/* ==========================================================================
   J&L International — full-screen canvas stylesheet
   --------------------------------------------------------------------------
   Every page is one fixed 1619 x 971 "stage" (the size of the original design
   file) that is scaled with a CSS transform to fit the browser window.
   No page scrolls: one screen, one page, exactly like the design.
   Below 900px wide the stage is hidden and a stacked mobile version is shown.
   ========================================================================== */


:root{
  --navy:#12275e;--navy-deep:#0c1c47;--blue:#1668c8;--blue-dk:#14306e;
  --gold:#d99b1c;--gold-lt:#eab54a;--cream:#fef8e4;--pale:#e1f3fd;
  --line:#dde7f4;--body:#4a5c7a;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{background:#e9f1fa}
/* smooth cross-fade between pages where the browser supports it */
@view-transition{navigation:auto}
body{
  background:#e9f1fa;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:#0f2a63;
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

/* ---------------- the stage ---------------- */
#viewport{position:relative;width:100%;height:100%;overflow:hidden}
#stage{
  position:absolute;top:0;left:0;width:1619px;height:971px;transform-origin:top left;
  /* --stage-* are set by the inline script in <head>, before the first
     paint, so the stage is never drawn at the wrong size */
  transform:translate(var(--stage-x,0px),var(--stage-y,0px)) scale(var(--stage-k,1));
  overflow:hidden;
  background:
    radial-gradient(520px 300px at 100% 42%,#dcf0fd 0%,rgba(220,240,253,0) 78%),
    radial-gradient(420px 300px at 0% 42%,#e6f4fd 0%,rgba(230,244,253,0) 78%),
    radial-gradient(680px 340px at 96% 6%,#e4f2fd 0%,rgba(228,242,253,0) 76%),
    radial-gradient(520px 280px at 2% 96%,#eef7fd 0%,rgba(238,247,253,0) 76%),
    #fdfdfd;
}
.abs{position:absolute}

/* ---------------- header (all pages) ---------------- */
#nav{top:31px;left:930px;width:440px;display:flex;justify-content:space-between;
     font-size:15px;color:#1e63ba;font-weight:400}
#nav a:hover{color:var(--gold)}
#nav a.on{color:var(--gold);font-weight:500}
#cta{top:16px;left:1401px;width:170px;height:44px;border-radius:22px;
  background:linear-gradient(100deg,#c78818 0%,#e5ac37 48%,#b87c14 100%);
  color:#fff;font-size:15.5px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 4px 12px rgba(185,128,20,.30)}
#cta:hover{filter:brightness(1.06)}
#brand{top:22px;left:70px;display:flex;align-items:center;gap:13px}
#brand img{height:46px;width:auto}
#brand .bn{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:25px;font-weight:600;color:var(--navy);line-height:1.05}
#brand .bs{font-size:9.5px;font-weight:500;letter-spacing:2.6px;color:var(--blue)}

/* ---------------- home hero ---------------- */
#eyebrow{top:89px;left:74px;width:286px;display:flex;justify-content:space-between;
  font-size:13.5px;font-weight:500;letter-spacing:3.2px;color:#1668c8}
#eyebrow i{color:#e8a52c;font-style:normal}
#rule{top:116px;left:73px;width:76px;height:3px;background:#e8a52c;border-radius:2px}
#h1{top:130px;left:70px;font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-weight:500;font-size:95px;line-height:1;
    color:#10265e;transform:scaleX(.737);transform-origin:left top;white-space:nowrap}
#h2{top:238px;left:75px;font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-weight:400;font-size:30.5px;line-height:1;
    color:#14306e;transform:scaleX(.795);transform-origin:left top;white-space:nowrap}
#lede{top:282px;left:76px;font-size:18px;line-height:1.62;color:#2e80d8}
#btns{top:350px;left:73px;display:flex;gap:15px}
.btn{height:45px;border-radius:23px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:500;gap:13px;transition:transform .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn.solid{width:249px;background:linear-gradient(100deg,#1256b2 0%,#2378d8 55%,#1a63c0 100%);color:#fff;
  box-shadow:0 4px 12px rgba(25,90,180,.28)}
.btn.ghost{width:160px;border:1.7px solid #e6a52d;color:#123a86;background:rgba(255,255,255,.6)}
#jl{top:84px;left:606px;width:432px;z-index:3}
#globe{top:58px;left:1028px;width:591px}
#conn{top:380px;left:0;width:1619px;height:70px}
#curves{top:520px;left:1080px;width:220px;height:320px;z-index:6}

/* ---------------- panels (home + ecosystem) ---------------- */
.panel{position:absolute;top:428px;height:450px;border-radius:16px;overflow:hidden}
.wm{position:absolute;left:1px;bottom:0;pointer-events:none}
.p1,.p4{background:#fef8e4}
.p2,.p3{background:#e1f3fd}
.p1{left:49px;width:351px}
.p2{left:418px;width:374px}
.p3{left:812px;width:374px}
.p4{left:1205px;width:363px}
.picon{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:64px;height:64px}
.ptitle{position:absolute;top:72px;left:0;right:0;text-align:center;font-family:'EB Garamond',Georgia,'Times New Roman',serif;
  font-weight:400;font-size:35.5px;line-height:1;color:#12275e}
.ptitle span{display:inline-block;transform:scaleX(.865)}
.psub{position:absolute;top:112px;left:0;right:0;text-align:center;font-size:12px;font-weight:500;
  letter-spacing:2.3px;color:#2072c9;line-height:1.75}
.pfoot{position:absolute;left:0;right:0;text-align:center;font-size:12px;font-weight:500;
  letter-spacing:2.2px;line-height:1.85}
.p1 .pfoot,.p4 .pfoot{color:#c08c2a}
.p2 .pfoot,.p3 .pfoot{color:#2072c9}

.card{position:absolute;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(30,70,130,.10);
  display:flex;align-items:center;justify-content:flex-start;padding-left:22px;
  transition:transform .16s ease,box-shadow .16s ease}
/* every logo in a column starts on the same left edge, whatever its width */
/* the card lifts on hover whether or not it links anywhere - only the
   little arrow is reserved for cards that really do open a website */
.card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(20,50,110,.16)}
a.card::after{content:"\2197";position:absolute;top:7px;right:9px;font-size:11px;color:#b9cade;opacity:0;transition:opacity .16s}
.card.no-link{cursor:default}
.card.no-link::after{content:none}
.cap{position:absolute;left:14px;right:14px;text-align:center;font-size:12.5px;font-style:italic;
  line-height:1.45;color:#a08b60}
a.card:hover::after{opacity:1}
.card img{display:block}
.bname{margin-left:14px;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.2px;color:#12275e;white-space:nowrap}
/* a long brand name set beside its icon has to clear the country badge */
.bname.long{font-size:17px;letter-spacing:-.25px;line-height:1.2;white-space:normal;max-width:178px}
.cc{position:absolute;right:17px;top:50%;transform:translateY(-50%);font-size:15px;color:#24457c;letter-spacing:.5px}
#soon{position:absolute;left:55px;width:282px;top:288px;height:76px;border:1.7px dashed #e3a93c;
  border-radius:12px;background:rgba(255,255,255,.30);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px}
#soon .bulb{width:21px}
#soon .txt{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:30px;line-height:1;color:#96601a;transform:scaleX(.82)}

/* ---------------- footer (all pages) ---------------- */
#fline{top:890px;left:49px;width:1521px;height:1px;
  background:linear-gradient(90deg,rgba(185,207,233,0),#c3d6ec 10%,#c3d6ec 90%,rgba(185,207,233,0))}
.ftxt{font-size:13px;color:#3f6aa6}
#copy{top:904px;left:53px}
/* company registration numbers sit quietly under the copyright line */
#abn{top:924px;left:53px;font-size:11.5px;color:#7d9ac0}
#mail{top:902px;left:560px;display:flex;align-items:center;gap:9px}
#sep1{top:904px;left:790px;color:#a9c2de}
#site{top:902px;left:812px;display:flex;align-items:center;gap:9px}

#tag{top:893px;left:1330px;width:250px}
#mail:hover,#site:hover{color:var(--gold)}

/* ==========================================================================
   Sub-page building blocks — same canvas, laid out block by block
   ========================================================================== */
.eyebrow{font-size:12.5px;font-weight:500;letter-spacing:3.2px;text-transform:uppercase;color:var(--blue)}
.grule{width:76px;height:3px;background:#e8a52c;border-radius:2px}
.ph1{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:52px;font-weight:500;line-height:1.1;color:#10265e;
     transform:scaleX(.86);transform-origin:left top}
.ph2{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:31px;font-weight:500;line-height:1.15;color:#12275e}
.ph3{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:23px;font-weight:500;line-height:1.2;color:#12275e}
.plede{font-size:17px;line-height:1.6;color:#2e80d8}
.ptxt{font-size:15px;line-height:1.62;color:var(--body)}
.ptxt strong{color:var(--navy);font-weight:500}
.small{font-size:13.5px;line-height:1.55;color:#6b7c99}

.box{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;
     box-shadow:0 2px 8px rgba(30,70,130,.07)}
.box.cream{background:#fef8e4;border-color:#f2e3bd}
.box.pale{background:#e1f3fd;border-color:#cfe6f9}
.box.navy{background:linear-gradient(150deg,#12275e,#173371 55%,#0c1c47);border:0;color:#c9d8f4}
.box.navy .ph2,.box.navy .ph3{color:#fff}
.box.navy .ptxt{color:#b8caee}
.box .pad{padding:26px 28px}
.chip{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:500;
  letter-spacing:1.2px;text-transform:uppercase;background:var(--pale);color:#1a5fae}
.chip.gold{background:var(--cream);color:#9b6c12}
.dot-list{margin:0;padding:0;list-style:none}
.dot-list li{position:relative;padding-left:20px;margin-bottom:7px;font-size:14.5px;line-height:1.5;color:var(--body)}
.dot-list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.stepnum{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:30px;color:var(--gold);line-height:1}
.year{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:27px;color:var(--navy);line-height:1}

/* ecosystem page brand rows */
.col-head{position:absolute;left:0;right:0;text-align:center}
.b-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:10px 13px;margin-bottom:9px;transition:transform .15s ease,box-shadow .15s ease}
.b-card:not(.b-soon):hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,50,110,.14)}
.b-logo{width:88px;min-width:88px;height:42px;display:flex;align-items:center;justify-content:flex-start}
.b-logo img{max-height:42px;max-width:88px;width:auto;object-fit:contain}
/* an icon-only mark is roughly square, so the 42px row would render it tiny -
   give those a taller slot; wide wordmarks are unaffected (width-limited) */
.b-logo-mark{height:60px}
.b-logo-mark img{max-height:60px}
.b-name{display:block;font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:17px;color:var(--navy);line-height:1.15}
.b-name-long{font-size:14.5px;line-height:1.32}
.b-tag{display:block;font-size:11.5px;line-height:1.35;color:#7b8ca9;margin-top:3px}
.b-note{margin:-1px 0 13px;padding:0 6px 0 14px;font-size:11.5px;font-style:italic;line-height:1.4;color:#a08b60}
.b-desc{margin:-2px 0 14px;padding:0 6px 0 14px;font-size:12px;line-height:1.45;color:#6b7c99}
.b-soon{border-style:dashed;border-color:#e3a93c;background:rgba(255,255,255,.45);justify-content:center;text-align:center}
.b-soon .b-name{color:#96601a}

/* Research Labs has only two brands and a lot of column left over, so its rows
   are set larger than the default; Incubation gets a wider logo slot only. */
#lab .b-logo{width:108px;min-width:108px;height:52px}
#lab .b-logo img{max-height:52px;max-width:108px}
#lab .b-name{font-size:19.5px}
#lab .b-tag{font-size:13px;margin-top:4px}
#lab .b-desc{font-size:13px;line-height:1.5;margin:0 0 13px;padding:0 6px 0 16px}
#incubation .b-logo{width:104px;min-width:104px;height:46px}
#incubation .b-logo img{max-height:46px;max-width:104px}

.col-blurb{position:absolute;left:22px;right:22px;font-size:13px;line-height:1.55;color:#6b7c99;text-align:center}
.col-step{position:absolute;top:20px;left:0;right:0;text-align:center;font-size:11px;font-weight:500;
  letter-spacing:2.4px;text-transform:uppercase;color:#a8b8d0}

/* case studies */
.casebox .dot-list li{font-size:14px;line-height:1.45;margin-bottom:6px;padding-left:18px}
.casebox .dot-list li::before{top:7px;width:6px;height:6px}
.casebox .ptxt{font-size:14.5px;line-height:1.55}
.lbl{font-size:11px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:#8fa3c2;margin:0 0 7px}
.case-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}
.case-role{font-size:12.5px;color:#7b8ca9;white-space:nowrap}
.kpi{display:flex;gap:12px;margin-top:18px}
.kpi>div{flex:1;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kpi .n{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:27px;color:#c08c2a;line-height:1}
.kpi .l{font-size:11.5px;line-height:1.35;color:#6b7c99;margin-top:6px}
.case-link{display:inline-block;margin-top:16px;font-size:13.5px;color:var(--blue)}
.case-link:hover{color:var(--gold)}

/* contact form */
.fld{margin-bottom:12px}
.fld label{display:block;font-size:12px;font-weight:500;letter-spacing:.6px;color:#2b4272;margin-bottom:5px}
.fld input,.fld select,.fld textarea{width:100%;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14.5px;color:#1d2b4d;
  padding:10px 13px;border:1px solid var(--line);border-radius:9px;background:#fcfdff}
.fld textarea{height:190px;resize:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid #bcd8f5;border-color:#9cc3ec}
.sendbtn{height:42px;padding:0 26px;border:0;border-radius:21px;color:#fff;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;font-weight:500;cursor:pointer;
  background:linear-gradient(100deg,#1256b2 0%,#2378d8 55%,#1a63c0 100%);box-shadow:0 4px 12px rgba(25,90,180,.28)}

/* ==========================================================================
   Mobile — the fixed canvas cannot shrink to a phone, so below 900px the
   stage is hidden and this stacked version is shown instead. It carries the
   SAME content as the canvas, stacked, not a shortened summary.
   ========================================================================== */
#mobile{display:none}
@media (max-width:900px),(max-height:420px){
  html,body{height:auto;min-height:100%}
  body{display:block;overflow:auto;background:#fff}
  #viewport{display:none}
  #mobile{display:block;font-size:16px;line-height:1.6;color:var(--body)}
  .m-head{position:sticky;top:0;z-index:9;display:flex;align-items:center;justify-content:space-between;
    padding:12px 18px;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
  .m-head img{height:34px}
  .m-brand{display:flex;align-items:center;gap:10px}
  .m-brand span{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:18px;font-weight:600;color:var(--navy)}
  .m-burger{background:none;border:0;padding:6px;cursor:pointer}
  .m-burger i{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0;border-radius:2px}
  .m-nav{display:none;flex-direction:column;padding:6px 18px 14px;border-bottom:1px solid var(--line);background:#fff}
  .m-nav.open{display:flex}
  .m-nav a{padding:11px 0;border-bottom:1px solid #f0f4fa;color:#2a4c86}
  .m-wrap{padding:26px 18px 40px}
  .m-eyebrow{font-size:11.5px;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
  .m-wrap h1{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:34px;font-weight:500;color:#10265e;margin:0 0 6px;line-height:1.1}
  .m-wrap h2{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:24px;font-weight:500;color:var(--navy);margin:30px 0 10px}
  .m-wrap h3{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:19px;font-weight:500;color:var(--navy);margin:0 0 4px}
  .m-sub{font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:20px;color:#14306e;margin:0 0 14px}
  .m-wrap p{margin:0 0 14px}
  .m-card{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;background:#fff}
  .m-card.cream{background:#fef8e4;border-color:#f2e3bd}
  .m-logos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 8px}
  .m-logo{border:1px solid var(--line);border-radius:10px;height:74px;display:flex;align-items:center;
    justify-content:center;padding:12px;background:#fff}
  .m-logo img{max-height:40px;max-width:100%;width:auto}
  .m-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;
    border-radius:23px;font-weight:500;color:#fff;margin:6px 8px 0 0;
    background:linear-gradient(100deg,#1256b2,#2378d8 55%,#1a63c0)}
  .m-btn.gold{background:linear-gradient(100deg,#c78818,#e5ac37 48%,#b87c14)}
  .m-kicker{font-size:11px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:#a8b8d0;margin:0 0 6px}
  .m-motto{font-size:12.5px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:#2072c9;margin:0}
  .m-card.cream .m-motto{color:#c08c2a}
  .m-note{font-style:italic;font-size:14px;color:#a08b60;margin:8px 0 0}
  .m-role{font-size:14px;color:#7b8ca9;margin:0 0 12px}
  .m-card p{margin:0 0 10px}
  .m-card p:last-child,.m-card ul:last-child,.m-card .kpi:last-child{margin-bottom:0}
  .m-card .dot-list{margin:0 0 10px}
  .m-card .lbl{margin:14px 0 6px}
  #mobile .dot-list li{font-size:15px;line-height:1.5}
  #mobile .b-card{margin-bottom:10px}
  #mobile .b-name{font-size:19px}
  #mobile .b-name-long{font-size:17px}
  #mobile .b-tag{font-size:13.5px}
  #mobile .b-logo-mark{height:66px}
  #mobile .b-logo-mark img{max-height:66px}
  #mobile .b-desc{margin:-2px 0 18px;padding-left:14px;font-size:14.5px;line-height:1.55}
  #mobile .b-note{margin:-2px 0 18px;padding-left:14px;font-size:14px;line-height:1.5}
  #mobile .kpi{flex-direction:column;gap:9px;margin-top:14px}
  #mobile .kpi>div{display:flex;align-items:baseline;gap:12px;padding:10px 14px}
  #mobile .kpi .n{font-size:23px;min-width:78px}
  #mobile .kpi .l{margin-top:0;font-size:13.5px}
  #mobile .case-link{font-size:15px}
  #mobile form{margin-bottom:4px}
  #mobile .fld textarea{height:150px}
  #mobile .sendbtn{width:100%}
  .m-foot{background:var(--navy-deep);color:#a9bbdd;padding:26px 18px;font-size:14px}
  .m-foot a{color:#a9bbdd;display:block;margin-bottom:6px}
}