/* EMSOL — self-hosted webfonts (Google Fonts, SIL Open Font License 1.1)
   Latin + Latin-Ext subsets only. Removes two third-party connections
   and the render-blocking request to fonts.googleapis.com. */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/Inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/PlusJakartaSans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/PlusJakartaSans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/PlusJakartaSans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/PlusJakartaSans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/PlusJakartaSans-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/PlusJakartaSans-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/SpaceGrotesk-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== EMSOL — Design 1 "Helios" · technical blueprint · light + dark ===== */
:root{
  --navy:#0d2747;--navy-2:#143a6b;--amber:#f0a019;--orange:#ef6c1a;--green:#2f9e57;
  --ink:#15233a;--muted:#5d6e84;--line:#dce4ee;--line-2:#c6d2e2;
  --bg:#ffffff;--bg-soft:#f4f7fb;--bg-grid:#eef3f9;--card:#ffffff;--head-bg:rgba(255,255,255,.9);
  --shadow:0 14px 40px rgba(13,39,71,.10);--shadow-sm:0 4px 16px rgba(13,39,71,.07);
  --max:1200px;--ff:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--fh:'Plus Jakarta Sans',var(--ff);--fm:'Space Grotesk',var(--fh);
}
[data-theme="dark"]{
  --navy:#dbe7fb;--navy-2:#aec4ec;--ink:#e7eef8;--muted:#93a6c0;--line:#23344c;--line-2:#2e425e;
  --bg:#0a1626;--bg-soft:#0e1d31;--bg-grid:#0d1c2f;--card:#10223a;--head-bg:rgba(10,22,38,.82);
  --shadow:0 16px 48px rgba(0,0,0,.5);--shadow-sm:0 6px 20px rgba(0,0,0,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{font-family:var(--ff);color:var(--ink);background:var(--bg);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
h1,h2,h3,h4{font-family:var(--fh);color:var(--navy);line-height:1.16;font-weight:700;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
/* height:auto is load-bearing. Every <img> carries width/height attributes so
   the browser can reserve space before the file arrives (this is what keeps
   CLS at zero). Those attributes also act as presentational hints, so an image
   whose CSS sets only a width would keep the hinted pixel height and end up
   stretched. Rules that deliberately fix BOTH dimensions (.avatar img,
   .hc-slide img, .cmp-logo) override this and are unaffected; rules that fix
   only a height must say width:auto themselves. */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
.eyebrow{font-family:var(--fm);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--orange)}
.muted{color:var(--muted)}
[dir="rtl"] body{text-align:right}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fm);font-weight:600;font-size:.93rem;padding:.8rem 1.5rem;border-radius:4px;border:1.5px solid transparent;cursor:pointer;transition:.2s}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--amber));color:#fff;box-shadow:0 8px 20px rgba(239,108,26,.26)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-2);color:var(--navy);background:var(--card)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-light{background:var(--card);color:var(--navy)}

/* header */
.site-header{position:sticky;top:0;z-index:80;background:var(--head-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:16px;height:74px}
.brand{margin-inline-end:auto;display:inline-flex;align-items:center}
/* width:auto is required, not cosmetic. The <img> carries width/height
   attributes (needed so the browser reserves space and the layout does not
   jump). Those attributes act as presentational hints, so setting only a
   height here would leave the hinted width in force and stretch the logo. */
.brand img{height:36px;width:auto}
[data-theme="dark"] .brand{background:#fff;padding:5px 10px;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-item{position:relative}
.nav-item>a{display:flex;align-items:center;gap:5px;font-family:var(--fm);font-weight:600;font-size:.92rem;color:var(--ink);padding:.6rem .85rem;border-radius:6px;transition:.18s;white-space:nowrap}
.nav-item>a:hover{color:var(--orange);background:var(--bg-soft)}
.nav-item.has-drop>a::after{content:"▾";font-size:.7rem;opacity:.6}
.drop{position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:248px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;list-style:none}
.nav-item.has-drop:hover .drop,.nav-item.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:.6rem .8rem;border-radius:7px;font-size:.9rem;color:var(--ink);font-weight:500}
.drop a:hover{background:var(--bg-soft);color:var(--orange)}
.nav-ctrls{display:flex;align-items:center;gap:10px}
.theme-toggle{width:38px;height:38px;border-radius:8px;border:1.5px solid var(--line-2);background:var(--card);color:var(--navy);cursor:pointer;font-size:1.05rem;display:grid;place-items:center;transition:.18s}
.theme-toggle:hover{border-color:var(--orange);color:var(--orange)}
.lang-select{font-family:var(--fm);font-weight:600;font-size:.85rem;padding:.5rem .6rem;border-radius:8px;border:1.5px solid var(--line-2);background:var(--card);color:var(--navy);cursor:pointer}
.nav-cta-btn{white-space:nowrap}
.menu-btn{display:none;background:none;border:0;font-size:1.5rem;color:var(--navy);cursor:pointer}
@media(max-width:1180px){
  .nav-cta-btn{display:none}
}
@media(max-width:980px){
  .menu-btn{display:block}
  .nav-links{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--card);border-bottom:1px solid var(--line);padding:12px 18px;gap:2px;box-shadow:var(--shadow);transform:translateY(-180%);transition:.3s;max-height:calc(100vh - 74px);overflow:auto;margin:0}
  .nav-links.open{transform:translateY(0)}
  .nav-item>a{padding:.8rem .6rem}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-inline-start:2px solid var(--line);border-radius:0;margin:0 0 6px 12px;padding:0;display:none}
  .nav-item.open-sub .drop{display:block}
  .nav-item.has-drop>a{justify-content:space-between}
}

/* hero — technical */
.hero{position:relative;background:var(--bg-soft);border-bottom:1px solid var(--line);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);background-size:38px 38px;opacity:.6;mask-image:radial-gradient(circle at 70% 30%,#000,transparent 75%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center;padding:78px 0 74px}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:.4rem .8rem;font-family:var(--fm);font-size:.8rem;font-weight:600;color:var(--navy)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);margin:18px 0 18px}
.hero p.sub{font-size:1.1rem;color:var(--muted);max-width:34em}
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero-stats{display:flex;gap:0;margin-top:36px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card)}
.hero-stats>div{flex:1;padding:16px 18px;border-inline-start:1px solid var(--line)}
.hero-stats>div:first-child{border-inline-start:0}
.hero-stats .num{font-family:var(--fm);font-size:1.5rem;font-weight:700;color:var(--navy)}
.hero-stats .lbl{font-size:.78rem;color:var(--muted)}
.hero-svg{position:relative}
.hero-svg .diagram{width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:var(--shadow)}
.diagram .label{font-family:var(--fm);font-size:13px;fill:var(--muted)}
.diagram .lab-strong{fill:var(--navy);font-weight:700}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:30px;padding:48px 0}}

/* partner strip */
.partners{border-bottom:1px solid var(--line);background:var(--bg)}
.partners .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;padding:20px 26px}
.partners .label{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;font-family:var(--fm)}
.partners .chip{font-family:var(--fm);font-weight:700;color:var(--navy);font-size:.9rem;opacity:.85}

/* sections */
.section{padding:80px 0}
.section.soft{background:var(--bg-soft)}
.section-head{max-width:700px;margin:0 auto 48px}
.section-head.center{text-align:center}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:12px 0 12px}
.section-head p{color:var(--muted);font-size:1.04rem}
.idx{font-family:var(--fm);color:var(--orange);font-weight:700;font-size:.85rem;letter-spacing:.1em}

.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.grid.gap{background:transparent;border:0;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:920px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.cell{background:var(--card);padding:30px}
.cell .n{font-family:var(--fm);color:var(--orange);font-weight:700;font-size:.82rem;letter-spacing:.08em}
.cell .ic{font-size:1.6rem;margin:10px 0 12px}
.cell h3{font-size:1.14rem;margin-bottom:8px}
.cell p{color:var(--muted);font-size:.95rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px;transition:.2s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card .ic{width:50px;height:50px;border-radius:8px;display:grid;place-items:center;font-size:1.4rem;background:var(--bg-soft);border:1px solid var(--line);margin-bottom:14px}
.card h3{font-size:1.12rem;margin-bottom:8px}.card p{color:var(--muted);font-size:.95rem}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:32px}}
.ticks{list-style:none;margin-top:18px}
.ticks li{display:flex;gap:12px;padding:.5rem 0;border-bottom:1px dashed var(--line);color:var(--ink)}
.ticks li::before{content:"→";color:var(--orange);font-weight:700;font-family:var(--fm)}
.panel{background:var(--navy);border-radius:10px;padding:38px;color:#fff;box-shadow:var(--shadow)}
[data-theme="dark"] .panel{background:var(--card);border:1px solid var(--line)}
.panel h3{color:#fff}[data-theme="dark"] .panel h3{color:var(--navy)}
.panel .big{font-family:var(--fm);font-size:2.8rem;font-weight:800;color:var(--amber)}
.panel .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.panel .grid2 .v{font-family:var(--fm);font-size:1.5rem;font-weight:700;color:#fff}
[data-theme="dark"] .panel .grid2 .v{color:var(--navy)}
.panel .grid2 .k{color:#aebfd8;font-size:.82rem}

/* comparison table */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px}
table.cmp{width:100%;border-collapse:collapse;min-width:660px;background:var(--card)}
table.cmp th,table.cmp td{padding:15px 18px;text-align:start;border-bottom:1px solid var(--line);font-size:.94rem}
table.cmp thead th{font-family:var(--fm);background:var(--navy);color:#fff;font-size:.86rem;padding:6px 6px 15px}
[data-theme="dark"] table.cmp thead th{background:var(--bg-soft);color:var(--navy)}
table.cmp thead th.feat{background:linear-gradient(135deg,var(--orange),var(--amber));color:#fff}
table.cmp td:first-child{font-family:var(--fm);font-weight:600;color:var(--navy)}
table.cmp tbody tr:nth-child(even){background:var(--bg-soft)}
.col{background:rgba(240,160,25,.10)!important;font-weight:600}

/* stat band */
.band{background:var(--navy);border-radius:10px;padding:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;box-shadow:var(--shadow)}
[data-theme="dark"] .band{background:var(--card);border:1px solid var(--line)}
.band .num{font-family:var(--fm);font-size:2.3rem;font-weight:800;color:var(--amber)}
.band .lbl{color:#aebfd8;font-size:.88rem;margin-top:4px}
[data-theme="dark"] .band .lbl{color:var(--muted)}
@media(max-width:720px){.band{grid-template-columns:1fr 1fr;padding:30px}}

/* team / news */
.team-card{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:30px 22px}
.avatar{width:78px;height:78px;border-radius:50%;margin:0 auto 14px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--fm);font-weight:800;font-size:1.5rem}
.team-card h3{font-size:1.08rem}.team-card .role{color:var(--orange);font-weight:600;font-size:.84rem;font-family:var(--fm);margin:4px 0 10px}.team-card p{color:var(--muted);font-size:.92rem}
.news-card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.news-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.news-card .top{height:110px;background:linear-gradient(135deg,var(--navy),var(--navy-2));position:relative;overflow:hidden}
.news-card .top::after{content:"";position:absolute;right:-26px;top:-26px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--amber),var(--orange))}
[dir="rtl"] .news-card .top::after{right:auto;left:-26px}
.news-card .b{padding:24px}.news-card .tag{font-family:var(--fm);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);font-weight:600}
.news-card h3{font-size:1.12rem;margin:8px 0 10px}.news-card p{color:var(--muted);font-size:.93rem}

/* pills / specs */
.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill-list span{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:.45rem .9rem;font-size:.85rem;font-family:var(--fm);font-weight:600;color:var(--navy)}
.spec-list{list-style:none}
.spec-list li{display:flex;justify-content:space-between;gap:14px;padding:.65rem 0;border-bottom:1px dashed var(--line);font-size:.96rem}
.spec-list li b{font-family:var(--fm);color:var(--navy)}
.spec-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:30px;box-shadow:var(--shadow-sm)}

/* CTA */
.cta{background:var(--navy);border-radius:10px;color:#fff;text-align:center;padding:58px 38px;box-shadow:var(--shadow);position:relative;overflow:hidden}
[data-theme="dark"] .cta{background:var(--card);border:1px solid var(--line)}
.cta h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}[data-theme="dark"] .cta h2{color:var(--navy)}
.cta p{color:#cdd9ee;max-width:40em;margin:12px auto 24px}[data-theme="dark"] .cta p{color:var(--muted)}

/* page hero */
.page-hero{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:60px 0 48px;position:relative}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:12px 0 10px}
.page-hero p{color:var(--muted);font-size:1.06rem;max-width:48em}
.crumb{font-size:.84rem;color:var(--muted)}.crumb a:hover{color:var(--orange)}
.prose p{color:var(--muted);margin-bottom:12px}

/* contact */
.contact-grid{display:grid;grid-template-columns:.85fr 1.5fr;gap:34px;align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact-info{background:var(--navy);color:#fff;border-radius:10px;padding:34px;box-shadow:var(--shadow)}
[data-theme="dark"] .contact-info{background:var(--card);border:1px solid var(--line)}
.contact-info h3{color:#fff}[data-theme="dark"] .contact-info h3{color:var(--navy)}
.contact-info .row{display:flex;gap:14px;align-items:flex-start;margin-top:20px}
.contact-info .row .ic{flex:none;width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,.12);display:grid;place-items:center}
[data-theme="dark"] .contact-info .row .ic{background:var(--bg-soft)}
.contact-info .row b{font-family:var(--fm)}.contact-info .row span{color:#bccbe4;font-size:.9rem}
[data-theme="dark"] .contact-info .row span{color:var(--muted)}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:32px;box-shadow:var(--shadow-sm)}
.form-grid{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-family:var(--fm);font-weight:600;font-size:.84rem;color:var(--navy)}.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{font-family:var(--ff);font-size:.94rem;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:6px;background:var(--bg-soft);color:var(--ink);transition:.18s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);background:var(--card);box-shadow:0 0 0 3px rgba(239,108,26,.14)}
.field textarea{resize:vertical;min-height:88px}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}

/* footer */
.site-footer{background:var(--navy);color:#bccbe4;padding:60px 0 26px}
[data-theme="dark"] .site-footer{background:var(--bg-soft);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
.site-footer .flogo{height:32px;margin-bottom:16px;background:#fff;padding:7px 11px;border-radius:8px;display:inline-block}
.site-footer .quote{color:#a6b8d6;font-size:.92rem;max-width:30em;line-height:1.7}[data-theme="dark"] .site-footer .quote{color:var(--muted)}
.site-footer h4{color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;font-family:var(--fm)}[data-theme="dark"] .site-footer h4{color:var(--navy)}
.site-footer ul{list-style:none}.site-footer li{margin-bottom:9px}
.site-footer a{color:#bccbe4;font-size:.92rem}[data-theme="dark"] .site-footer a{color:var(--muted)}.site-footer a:hover{color:var(--amber)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.85rem;color:#8ea2c4}
[data-theme="dark"] .footer-bottom{border-color:var(--line);color:var(--muted)}
.footer-bottom .design{font-family:var(--fm);font-weight:600;color:var(--amber)}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* hero carousel */
.hero-media{position:relative}
.hero-carousel{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);direction:ltr}
.hc-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.hc-slide{position:relative;min-width:100%;aspect-ratio:3/2}
.hc-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hc-play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;background:rgba(239,108,26,.94);color:#fff;font-size:1.4rem;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:.2s;padding-inline-start:5px}
.hc-play:hover{transform:scale(1.08)}
.hc-play::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:hcpulse 2s infinite}
@keyframes hcpulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.45);opacity:0}}
.hc-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:rgba(13,39,71,.55);color:#fff;font-size:1.4rem;cursor:pointer;display:grid;place-items:center;transition:.2s;z-index:3}
.hc-nav:hover{background:var(--navy)}
.hc-prev{left:12px}.hc-next{right:12px}
.hc-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:3}
.hc-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.6);cursor:pointer;padding:0;transition:.2s}
.hc-dot.active{background:var(--amber);width:22px;border-radius:5px}
.vmodal{position:fixed;inset:0;z-index:200;background:rgba(5,12,22,.9);display:none;align-items:center;justify-content:center;padding:20px}
.vmodal.open{display:flex}
.vbox{width:min(900px,100%);position:relative}
.vbox .frame{aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vbox .frame iframe{width:100%;height:100%;border:0;display:block}
.vbox .close{position:absolute;top:-42px;right:0;background:none;border:0;color:#fff;font-size:1.7rem;cursor:pointer;line-height:1}
.vbox .vm-yt{position:absolute;top:-38px;left:0;color:#fff;font-family:var(--fm);font-size:.85rem;text-decoration:underline;opacity:.92}
.vbox .vm-yt:hover{color:var(--amber)}

/* client images */
table.cmp thead th{text-align:center;vertical-align:bottom}
table.cmp thead th:first-child{text-align:start;padding:15px 18px}
.cmp-logo{display:block;margin:0 auto 6px;width:100%;max-width:100%;height:200px;object-fit:cover;border-radius:1.5px}
.flagi{display:inline-block;width:28px;text-align:center;font-size:1.15rem;vertical-align:middle;margin-inline-end:9px;line-height:1}
.zoomable{cursor:zoom-in}
.imodal{position:fixed;inset:0;z-index:210;background:rgba(5,12,22,.92);display:none;align-items:center;justify-content:center;padding:24px}
.imodal.open{display:flex}
.imodal img{max-width:96%;max-height:90vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.imodal .iclose{position:absolute;top:18px;right:26px;color:#fff;font-size:1.9rem;cursor:pointer;background:none;border:0;line-height:1}
.plogos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:680px){.plogos{grid-template-columns:repeat(2,1fr)}}
.plogo{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;display:grid;place-items:center;aspect-ratio:3/2}
.plogo img{max-height:66px;max-width:86%;width:auto;height:auto;object-fit:contain}
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.cert-card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow-sm)}
.cert-card img{width:100%;display:block}
.proj-card{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:.2s}
.proj-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.proj-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.proj-card .cap{padding:18px 20px}.proj-card .cap h3{font-size:1.05rem}.proj-card .cap p{color:var(--muted);font-size:.9rem;margin-top:2px}
.feat-banner{width:100%;border-radius:10px;border:1px solid var(--line);display:block;margin-bottom:30px}
.flag{width:28px;height:auto;border-radius:2px;vertical-align:middle;margin-inline-end:9px;box-shadow:0 0 0 1px var(--line)}

/* Scroll-in animation. Gated behind .js (set by boot.js) so that if scripting
   is unavailable or a script fails to load, the content stays visible instead
   of the whole page rendering blank at opacity:0. */
.js .reveal{opacity:0;transform:translateY(20px);transition:.6s cubic-bezier(.2,.7,.2,1)}.js .reveal.in{opacity:1;transform:none}
/* already on screen at load — show at once, no fade (see emsolReveal in app.js) */
.js .reveal.instant{transition:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ===== client revisions ===== */
/* brighten team photo (Late Prof. Dr. Roland Winston) */
.team-card .avatar img.brighten{filter:brightness(1.18) contrast(1.04) saturate(1.05)}

/* home "trusted by" — logos with names */
.partners{padding:30px 0}
.partners .wrap{flex-direction:column;gap:22px}
.trust-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:14px;width:100%}
.trust-logo{display:flex;flex-direction:column;align-items:center;width:104px}
.trust-logo .tl-img{width:100%;height:70px;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:11px;transition:.2s}
.trust-logo:hover .tl-img{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.trust-logo .tl-img img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.trust-logo .tl-name{font-family:var(--fm);font-weight:600;font-size:.72rem;color:var(--navy);line-height:1.3;text-align:center;margin-top:10px}
/* keep all eight logos on one row on desktop/tablet */
@media(min-width:760px){.trust-logos{flex-wrap:nowrap;gap:12px}.trust-logo{flex:1 1 0;width:auto;min-width:0}}
@media(max-width:600px){.trust-logos{gap:14px}.trust-logo{width:30%;min-width:88px}.trust-logo .tl-img{height:60px;padding:9px}}

/* footer logo — match header logo size exactly */
/* width:auto — see the note on .brand img above. */
.site-footer .flogo{height:36px;width:auto;box-sizing:content-box;margin-bottom:16px;background:#fff;padding:6px 10px;border-radius:8px;display:inline-block}

/* company page hero — eco animated background + parallax */
.page-hero--company{position:relative;overflow:hidden}
.eco-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.eco-orb{position:absolute;border-radius:50%;filter:blur(8px);opacity:.5;will-change:transform}
.eco-orb--1{width:320px;height:320px;left:-80px;top:-90px;background:radial-gradient(circle at 30% 30%,rgba(46,196,116,.45),transparent 70%);animation:ecoFloat 14s ease-in-out infinite}
.eco-orb--2{width:260px;height:260px;right:-70px;top:30px;background:radial-gradient(circle at 60% 40%,rgba(239,108,26,.4),transparent 70%);animation:ecoFloat 18s ease-in-out infinite reverse}
.eco-orb--3{width:200px;height:200px;left:40%;bottom:-90px;background:radial-gradient(circle at 50% 50%,rgba(245,180,40,.35),transparent 70%);animation:ecoFloat 16s ease-in-out infinite}
.eco-leaf{position:absolute;font-size:1.5rem;opacity:.45;will-change:transform}
.eco-leaf--1{left:4%;top:24%;animation:ecoDrift 11s ease-in-out infinite}
.eco-leaf--2{right:4%;bottom:16%;font-size:1.7rem;animation:ecoDrift 15s ease-in-out infinite reverse}
.page-hero--company .wrap{position:relative;z-index:1}
@keyframes ecoFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-18px)}}
@keyframes ecoDrift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(8deg)}}

/* EMSOL-logo-inspired sun (the "O" in EMSOL): glowing core + orange/grey/navy wave arcs */
.eco-sun{position:absolute;right:6%;top:14%;width:104px;height:104px;will-change:transform}
.ls-core{position:absolute;inset:30px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#ffd25e 0%,#ffb31f 55%,#f59412 100%);
  box-shadow:0 0 18px 4px rgba(255,178,30,.5),0 0 42px 12px rgba(255,178,30,.22);
  animation:lsGlow 4.5s ease-in-out infinite}
.ls-arc{position:absolute;inset:0;border-radius:50%;will-change:transform}
/* each arc is a coloured annulus segment, staggered in angle to mimic the logo's sweeping waves */
.ls-arc--orange{background:conic-gradient(from 158deg,#ef6c1a 0deg 132deg,transparent 132deg);
  -webkit-mask:radial-gradient(circle,transparent 76%,#000 78% 91%,transparent 93%);
          mask:radial-gradient(circle,transparent 76%,#000 78% 91%,transparent 93%)}
.ls-arc--grey{background:conic-gradient(from 178deg,#9aa1c4 0deg 124deg,transparent 124deg);
  -webkit-mask:radial-gradient(circle,transparent 64%,#000 66% 78%,transparent 80%);
          mask:radial-gradient(circle,transparent 64%,#000 66% 78%,transparent 80%)}
.ls-arc--navy{background:conic-gradient(from 198deg,#2a2f86 0deg 120deg,transparent 120deg);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 54% 66%,transparent 68%);
          mask:radial-gradient(circle,transparent 52%,#000 54% 66%,transparent 68%)}
.eco-sun{animation:lsSway 12s ease-in-out infinite}
@keyframes lsGlow{0%,100%{box-shadow:0 0 16px 3px rgba(255,178,30,.42),0 0 36px 10px rgba(255,178,30,.18)}50%{box-shadow:0 0 22px 6px rgba(255,178,30,.6),0 0 52px 16px rgba(255,178,30,.3)}}
@keyframes lsSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media(max-width:760px){.eco-leaf,.eco-sun{display:none}}
@media(prefers-reduced-motion:reduce){.eco-orb,.eco-leaf,.ls-core,.eco-sun{animation:none}}

/* company history — scrollytelling timeline */
.timeline-section{position:relative}
.timeline{list-style:none;margin:8px auto 0;max-width:780px;position:relative;padding-left:0}
.timeline::before{content:"";position:absolute;left:27px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--green),var(--amber),var(--orange))}
.tl-item{position:relative;padding:0 0 26px 70px;min-height:56px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:6px;top:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;background:var(--card);border:2px solid var(--line-2);box-shadow:var(--shadow-sm);z-index:1}
.tl-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:.2s}
.tl-item:hover .tl-card{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.tl-card .tl-year{display:inline-block;font-family:var(--fm);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);background:rgba(239,108,26,.1);padding:.2rem .6rem;border-radius:99px;margin-bottom:8px}
.tl-card h3{font-size:1.08rem;margin-bottom:6px;color:var(--navy)}
[data-theme="dark"] .tl-card h3{color:var(--ink)}
.tl-card p{color:var(--muted);font-size:.95rem;line-height:1.6}
/* repeatable staggered reveal (re-animates on every scroll) */
.tl-item{opacity:0;transform:translateY(22px);transition:opacity .4s ease-out,transform .4s cubic-bezier(.2,.7,.2,1)}
.tl-item .tl-dot{transition:transform .35s cubic-bezier(.34,1.56,.64,1);transform:scale(.55)}
.tl-item.in{opacity:1;transform:none}
.tl-item.in .tl-dot{transform:scale(1)}
.tl-item.in:nth-child(1){transition-delay:.04s}
.tl-item.in:nth-child(2){transition-delay:.1s}
.tl-item.in:nth-child(3){transition-delay:.16s}
.tl-item.in:nth-child(4){transition-delay:.22s}
@media(prefers-reduced-motion:reduce){.tl-item{opacity:1;transform:none;transition:none}.tl-item .tl-dot{transform:none;transition:none}}
@media(max-width:520px){.tl-item{padding-left:60px}.timeline::before{left:22px}.tl-dot{width:40px;height:40px;left:2px;font-size:1.1rem}}

/* count-up numbers */
.stat-v.count{font-variant-numeric:tabular-nums}

/* company page hero — better title + centered intro */
.page-hero--company{text-align:center;padding:54px 0 46px}
.page-hero--company .crumb{justify-content:center}
.page-hero--company .eyebrow{display:block;margin-bottom:8px}
.page-hero--company h1{font-size:clamp(2rem,4.2vw,2.9rem);font-weight:800;letter-spacing:-.025em;margin:0 auto 6px;position:relative;display:inline-block}
.page-hero--company h1::after{content:"";display:block;width:60px;height:4px;border-radius:3px;margin:14px auto 0;background:linear-gradient(135deg,var(--orange),var(--amber))}
.page-hero--company p{margin:18px auto 0;max-width:42em;font-size:1.06rem;line-height:1.7}

/* company history — clearer stat cards */
.stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 22px;box-shadow:var(--shadow-sm);transition:.2s}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.stat-card .stat-ic{font-size:1.5rem;margin-bottom:10px}
.stat-card .stat-v{font-family:var(--fm);font-size:1.9rem;font-weight:800;color:var(--orange);line-height:1.1}
.stat-card .stat-k{color:var(--muted);font-size:.9rem;margin-top:4px}
@media(max-width:520px){.stat-cards{grid-template-columns:1fr 1fr;gap:12px}.stat-card{padding:18px 16px}.stat-card .stat-v{font-size:1.5rem}}

/* partner institutions — logos with names under */
.plogo{margin:0;background:transparent;border:0;padding:0;display:flex;flex-direction:column;gap:10px;aspect-ratio:auto}
.plogo .plogo-img{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;place-items:center;aspect-ratio:3/2;transition:.2s}
.plogo:hover .plogo-img{border-color:var(--orange);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.plogo .plogo-img img{max-height:66px;max-width:86%;object-fit:contain}
.plogo figcaption{font-family:var(--fm);font-weight:600;font-size:.82rem;color:var(--navy);text-align:center}

/* investor relations & commitment — feature cards */
.feature-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.feature-cards{grid-template-columns:1fr}}
.feature-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px 30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:.2s}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.feature-card.highlight{background:linear-gradient(160deg,var(--navy),var(--navy-2));border-color:transparent}
[data-theme="dark"] .feature-card.highlight{background:var(--card);border-color:var(--line)}
.feature-card.highlight h3,[data-theme="dark"] .feature-card.highlight h3{color:#fff}
[data-theme="dark"] .feature-card.highlight h3{color:var(--navy)}
.feature-card.highlight p{color:#cdd9ee}[data-theme="dark"] .feature-card.highlight p{color:var(--muted)}
.feature-card .fc-ic{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;background:var(--bg-soft);border:1px solid var(--line);margin-bottom:10px}
.feature-card.highlight .fc-ic{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
[data-theme="dark"] .feature-card.highlight .fc-ic{background:var(--bg-soft);border-color:var(--line)}
.feature-card h3{font-size:1.2rem}
.feature-card p{color:var(--muted);font-size:.96rem;flex:1}
.feature-card .btn{margin-top:18px}
.feature-card.highlight .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.feature-card.highlight .btn-ghost:hover{background:rgba(255,255,255,.16)}
[data-theme="dark"] .feature-card.highlight .btn-ghost{background:var(--card);border-color:var(--line-2);color:var(--navy)}

/* certificate gallery */
.cert-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.cert-thumb{display:block;width:100%;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:zoom-in;padding:0;font:inherit;transition:.2s}
.cert-thumb:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--orange)}
.cert-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#fff}
.cert-thumb .cert-label{display:block;padding:12px 14px;font-family:var(--fm);font-weight:600;font-size:.86rem;color:var(--navy)}
.cert-note{text-align:center;margin-top:22px;font-size:.88rem}
.cert-note code{font-family:var(--fm);background:var(--bg-soft);border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:.85em}

/* certificate lightbox (original shape & size + pdf) */
.cert-modal{flex-direction:column;gap:16px}
.cert-stage{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:96vw;max-height:80vh}
.cert-stage img{max-width:96vw;max-height:72vh;width:auto;height:auto;object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.cert-stage .cert-cap{color:#fff;font-family:var(--fm);font-weight:600;font-size:.95rem;text-align:center}
.cert-modal .cert-pdf{text-decoration:none}
.cert-prev,.cert-next{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.8rem;cursor:pointer;display:grid;place-items:center;transition:.2s;z-index:2}
.cert-prev:hover,.cert-next:hover{background:rgba(255,255,255,.28)}
.cert-prev{left:18px}.cert-next{right:18px}
@media(max-width:560px){.cert-prev{left:8px}.cert-next{right:8px}.cert-prev,.cert-next{width:40px;height:40px;font-size:1.5rem}.cert-stage img{max-height:64vh}}

/* ===== content protection (deterrents) ===== */
html.protected, html.protected body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
html.protected input,html.protected textarea,html.protected select,html.protected [contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
html.protected img{-webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:none}
html.protected a img,html.protected button img{pointer-events:auto}

/* ===== contact protection: reveal + captcha ===== */
.reveal-btn{font-family:var(--fm);font-weight:600;font-size:.9rem;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:.35rem .8rem;cursor:pointer;transition:.18s}
.reveal-btn:hover{background:rgba(255,255,255,.22)}
[data-theme="dark"] .reveal-btn{color:var(--navy);background:var(--bg-soft);border-color:var(--line-2)}
.revealed-contact{color:#fff;font-weight:600;border-bottom:1px dashed rgba(255,255,255,.5)}
[data-theme="dark"] .revealed-contact{color:var(--navy);border-color:var(--line-2)}
.reveal-note{margin-top:22px;font-size:.78rem;color:#9fb2d0;line-height:1.5}
[data-theme="dark"] .reveal-note{color:var(--muted)}

/* honeypot — hidden from humans, visible to bots */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* link from callback form to the full enquiry form */
.form-switch{margin-top:16px;font-size:.88rem}
.form-switch a{color:var(--orange);font-family:var(--fm);font-weight:600;text-decoration:none;border-bottom:1px dashed var(--orange);padding-bottom:1px}
.form-switch a:hover{color:var(--amber);border-color:var(--amber)}

.form-msg{display:none;margin-top:14px;color:var(--orange);font-family:var(--fm);font-weight:600;font-size:.9rem}

/* slide-to-verify captcha */
.emsol-captcha{margin-top:20px;user-select:none}
.cap-track{position:relative;height:52px;border-radius:8px;background:var(--bg-soft);border:1.5px solid var(--line-2);overflow:hidden;touch-action:none}
.cap-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(135deg,var(--green),#37b366);transition:width .05s linear;opacity:.9}
.emsol-captcha.dragging .cap-fill{transition:none}
.cap-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-weight:600;font-size:.86rem;color:var(--muted);pointer-events:none;z-index:1}
.emsol-captcha.verified .cap-text,.emsol-captcha.working .cap-text{color:#fff}
.cap-handle{position:absolute;top:3px;left:3px;width:46px;height:44px;border:0;border-radius:6px;background:linear-gradient(135deg,var(--orange),var(--amber));color:#fff;font-size:1.4rem;font-weight:700;cursor:grab;display:grid;place-items:center;box-shadow:0 4px 12px rgba(239,108,26,.3);z-index:2;transition:transform .05s linear}
.emsol-captcha.dragging .cap-handle{cursor:grabbing;transition:none}
.emsol-captcha.working .cap-handle{background:var(--navy);animation:capspin 1s linear infinite}
.emsol-captcha.verified .cap-handle{background:var(--green);cursor:default}
@keyframes capspin{0%{box-shadow:0 0 0 0 rgba(13,39,71,.35)}100%{box-shadow:0 0 0 10px rgba(13,39,71,0)}}

/* ===== mobile-friendliness pass ===== */
@media(max-width:640px){
  body{font-size:15.8px}
  .wrap{padding:0 18px}
  .section{padding:56px 0}
  .hero-grid{padding:38px 0}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
  .hero-stats{flex-wrap:wrap}
  .hero-stats>div{flex:1 1 33%;min-width:33%}
  .cell{padding:24px}
  .cta{padding:40px 22px}
  .panel{padding:28px 22px}
  .contact-info,.form-card{padding:24px}
}
@media(max-width:380px){
  .hero-stats>div{flex-basis:50%;min-width:50%}
}

/* ===== mobile responsiveness — second pass =====================================
   Addresses the concrete issues found while testing at 375px:
   iOS zoom-on-focus, sub-44px tap targets, and swipe/scroll affordances.
   ============================================================================ */

/* 1. Never let a form control fall below 16px. Mobile Safari force-zooms the
      whole page when a focused field is smaller than that, and the user is
      then left scrolled sideways on a form they cannot see. */
.field input,.field select,.field textarea{font-size:16px}
@media(max-width:640px){
  .field input,.field select,.field textarea{font-size:16px;padding:.75rem .85rem}
}

/* 2. Tap targets. Google's mobile-usability check (and plain thumb accuracy)
      wants ~44px; the header button was 22x32 and the menu links ~18px tall. */
.menu-btn{min-width:44px;min-height:44px;display:none;place-items:center}
@media(max-width:980px){
  .menu-btn{display:grid}
  .theme-toggle{width:42px;height:42px}
  .lang-select{min-height:42px}
  .nav-links>.nav-item>a{min-height:48px;align-items:center}
  .drop a{min-height:44px;display:flex;align-items:center}
  .site-footer li{margin-bottom:2px}
  .site-footer li a{display:inline-flex;align-items:center;min-height:40px;padding:2px 0}
  .footer-bottom{justify-content:flex-start;row-gap:6px}
}

/* 3. Kill the grey flash on tap, and make sure nothing can push the page
      sideways on a narrow screen. */
a,button,select,input,textarea,summary{-webkit-tap-highlight-color:rgba(239,108,26,.18)}
html,body{overflow-x:hidden}
@media(max-width:980px){
  .nav-links{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* 4. The comparison table scrolls horizontally (min-width:660px). Without a
      hint, mobile users read the first two columns and assume that is all. */
.table-wrap{-webkit-overflow-scrolling:touch}
@media(max-width:720px){
  .table-wrap{position:relative}
  .table-wrap::after{
    content:"";position:sticky;top:0;right:0;float:right;width:34px;height:100%;
    margin-left:-34px;pointer-events:none;
    background:linear-gradient(to right,transparent,rgba(13,39,71,.10));
  }
  .table-scroll-hint{
    display:block;margin-top:8px;font-family:var(--fm);font-weight:600;
    font-size:.76rem;color:var(--muted);text-align:center;
  }
  table.cmp th,table.cmp td{padding:12px 14px}
  .cmp-logo{height:120px}
}
.table-scroll-hint{display:none}

/* 5. Carousel on touch: swipeable (see app.js), so shrink the arrows and keep
      them clear of the dots. */
@media(max-width:640px){
  .hero-carousel{touch-action:pan-y}
  .hc-nav{width:36px;height:36px;font-size:1.2rem}
  .hc-prev{left:6px}.hc-next{right:6px}
  .hc-play{width:60px;height:60px;font-size:1.15rem}
  .hc-dots{bottom:9px}
  .hc-dot{width:11px;height:11px}
  .hc-dot.active{width:24px}
}

/* 6. Long unbroken strings (emails, spec values) must wrap rather than widen
      the layout. */
.spec-list li,.revealed-contact,.contact-info .row span{overflow-wrap:anywhere}
.spec-list li{flex-wrap:wrap}

/* 7. Slide-to-verify: the handle must own the gesture or the page scrolls
      underneath the drag on Android Chrome. */
.cap-handle{touch-action:none}
@media(max-width:420px){
  .cap-track{height:56px}
  .cap-handle{width:50px;height:48px}
  .cap-text{font-size:.8rem}
}

/* 8. Remaining small controls: brand link, breadcrumb and the click-to-reveal
      buttons all sat under 40px tall on a phone. */
.reveal-btn{min-height:40px;padding:.5rem 1rem}
@media(max-width:980px){
  .brand{min-height:44px}
  .crumb a{display:inline-block;padding:10px 0;min-height:40px}
  /* the language <select> also force-zooms iOS below 16px */
  .lang-select{font-size:16px}
}

/* Carousel dots: keep the 11px visual dot but give it a 30px hit area, so a
   thumb can actually land on it. background-clip keeps the paint unchanged. */
@media(max-width:640px){
  .hc-dots{gap:0;bottom:4px}
  .hc-dot{
    width:30px;height:30px;border-radius:50%;padding:0;
    background:rgba(255,255,255,.6);
    border:10px solid transparent;background-clip:content-box;
  }
  .hc-dot.active{width:38px;border-radius:15px;background:var(--amber);background-clip:content-box}
  .hc-nav{width:40px;height:40px}
}

/* 9. Modals: keep controls reachable inside the safe area on notched phones. */
@media(max-width:640px){
  .vmodal,.imodal,.cert-modal{padding:16px 12px calc(16px + env(safe-area-inset-bottom))}
  .vbox .close{top:-36px}
  .vbox .vm-yt{font-size:.78rem}
}