/* ===================================================================
   IGT — Inno Green Technologies · Design System
   Swiss Engineering, Technology & Project Development Company
   =================================================================== */

@font-face{font-family:"Sora";src:url("../fonts/Sora-Thin.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:"Sora";src:url("../fonts/Sora-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Sora";src:url("../fonts/Sora-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Sora";src:url("../fonts/Sora-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Sora";src:url("../fonts/Sora-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  /* neutrals */
  --ink:#0F172A;
  --graphite:#10151C;
  --graphite-2:#161D27;
  --steel:#334155;
  --steel-soft:#5B6B7F;
  --line:#E2E6EB;
  --line-dark:#26303D;
  --muted:#EDF1F4;
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --white:#FFFFFF;

  /* brand */
  --accent-blue:#0B5FA5;
  --accent-blue-deep:#08477C;
  --accent-green:#2C9F45;
  --accent-green-deep:#1F7A34;

  /* text on dark */
  --on-dark:#E9EDF2;
  --on-dark-muted:#93A2B4;

  /* type */
  --font-display:"Sora", "Inter", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:.8125rem;
  --fs-sm:.9375rem;
  --fs-base:1.0625rem;
  --fs-md:1.25rem;
  --fs-lg:1.5rem;
  --fs-xl:2rem;
  --fs-2xl:2.75rem;
  --fs-3xl:3.75rem;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 24px 48px rgba(15,23,42,.14);

  --container:1240px;
  --gap:1.5rem;
  --ease:cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5{font-family:var(--font-display);line-height:1.15;margin:0 0 .6em;letter-spacing:-.01em;color:var(--ink);}
p{margin:0 0 1em;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--accent-blue);outline-offset:3px;}

h1{font-size:var(--fs-3xl);font-weight:800;}
h2{font-size:var(--fs-2xl);font-weight:800;}
h3{font-size:var(--fs-xl);font-weight:700;}
h4{font-size:var(--fs-md);font-weight:700;}

@media (max-width:960px){
  h1{font-size:2.375rem;}
  h2{font-size:1.875rem;}
  h3{font-size:1.375rem;}
}

.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.container--narrow{max-width:860px;}

.section{padding:88px 0;}
.section--tight{padding:56px 0;}
@media (max-width:720px){
  .section{padding:56px 0;}
  .section--tight{padding:40px 0;}
}

.section--dark{background:var(--graphite);color:var(--on-dark);}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--white);}
.section--muted{background:var(--muted);}
.section--surface{background:var(--surface);}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-blue);
  margin-bottom:1em;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent-green);display:inline-block;}
.section--dark .eyebrow{color:#7FC3F0;}

.lede{font-size:var(--fs-md);color:var(--steel);max-width:62ch;}
.section--dark .lede{color:var(--on-dark-muted);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.9em 1.7em;border-radius:var(--radius-sm);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);
  border:1px solid transparent;cursor:pointer;transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent-blue);color:var(--white);}
.btn-primary:hover{background:var(--accent-blue-deep);}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35);}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-outline:hover{border-color:var(--accent-blue);color:var(--accent-blue);}
.btn-sm{padding:.6em 1.1em;font-size:var(--fs-xs);}
.btn svg{width:1em;height:1em;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px;}
.brand{display:flex;align-items:center;gap:.65em;font-family:var(--font-display);font-weight:800;color:var(--ink);flex:0 0 auto;}
.brand__name b,.brand__name span{overflow-wrap:break-word;}
.brand img{height:40px;width:auto;}
.brand__name{display:flex;flex-direction:column;line-height:1.1;}
.brand__name b{font-size:1.05rem;letter-spacing:.02em;}
.brand__name span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-soft);font-weight:600;}

.nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;}
.nav__item{position:relative;}
.nav__link{
  display:flex;align-items:center;gap:.35em;padding:.9em 1em;
  font-size:var(--fs-xs);font-weight:600;color:var(--steel);
  border-radius:var(--radius-sm);transition:color .15s,background .15s;
}
.nav__link:hover,.nav__item.is-open .nav__link{color:var(--accent-blue);background:var(--muted);}
.nav__link svg{width:12px;height:12px;transition:transform .15s;}
.nav__item.is-open .nav__link svg{transform:rotate(180deg);}
.nav__current .nav__link{color:var(--accent-blue);}

.dropdown{
  position:absolute;top:100%;left:0;min-width:300px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  max-height:70vh;overflow:auto;
}
.nav__item.is-open .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:block;padding:.65em .8em;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:600;color:var(--steel);}
.dropdown a:hover{background:var(--muted);color:var(--accent-blue);}
.dropdown a small{display:block;font-weight:400;color:var(--steel-soft);margin-top:2px;font-size:.72rem;}

.header__actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle svg{width:26px;height:26px;color:var(--ink);}

@media (max-width:1080px){
  .nav{display:none;}
  .header__actions .btn-primary{display:none;}
  .nav-toggle{display:inline-flex;}
  .site-header.is-open .nav{
    display:flex;flex-direction:column;align-items:stretch;position:fixed;inset:84px 0 0 0;
    background:var(--surface);padding:12px 20px 40px;overflow:auto;gap:4px;z-index:99;
  }
  .site-header.is-open .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:none;border:none;padding:0 0 0 14px;}
  .site-header.is-open .nav__item.is-open .dropdown{display:block;}
  .site-header.is-open .header__actions .btn-primary{display:inline-flex;margin-top:10px;}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--graphite);color:var(--white);overflow:hidden;padding:120px 0 100px;}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 480px at 82% -10%, rgba(11,95,165,.35), transparent 60%),
    radial-gradient(700px 420px at 8% 110%, rgba(44,159,69,.22), transparent 60%);
  pointer-events:none;
}
.hero__grid{position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 75%);
}
.hero__inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(2.4rem,4.4vw,3.6rem);color:var(--white);margin-bottom:.5em;}
.hero .lede{color:var(--on-dark-muted);font-size:var(--fs-md);max-width:56ch;}
.hero__pillars{display:flex;flex-wrap:wrap;gap:8px;margin:1.6em 0 2em;}
.hero__pillars span{
  font-size:var(--fs-xs);font-weight:600;color:var(--on-dark);
  border:1px solid var(--line-dark);padding:.5em .9em;border-radius:999px;background:rgba(255,255,255,.04);
}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;}
.hero__panel{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:var(--radius-lg);
  padding:28px;backdrop-filter:blur(6px);
}
.hero__panel img{border-radius:var(--radius-md);aspect-ratio:4/5;object-fit:cover;}
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr;}
  .hero{padding:56px 0 64px;}
}

/* ---------- Page header (inner pages) ---------- */
.page-hero{background:var(--graphite);color:var(--white);padding:72px 0 64px;position:relative;overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 420px at 90% 0%,rgba(11,95,165,.32),transparent 60%);}
.page-hero__inner{position:relative;max-width:800px;}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:var(--fs-xs);color:var(--on-dark-muted);margin-bottom:1.4em;font-weight:600;}
.breadcrumb a{color:var(--on-dark-muted);}
.breadcrumb a:hover{color:var(--white);}
.page-hero h1{color:var(--white);margin-bottom:.4em;font-size:clamp(2rem,3.6vw,2.75rem);}
.page-hero .lede{color:var(--on-dark-muted);}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:var(--gap);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#D7DEE6;}
.card__icon{
  width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(11,95,165,.1),rgba(44,159,69,.1));margin-bottom:20px;
}
.card__icon svg{width:26px;height:26px;color:var(--accent-blue);}
.card__index{font-family:var(--font-display);font-weight:800;color:#C7D0DB;font-size:1.6rem;margin-bottom:12px;display:block;}
.card h3{font-size:var(--fs-md);margin-bottom:.5em;}
.card p{color:var(--steel);font-size:var(--fs-sm);margin-bottom:0;}
.card__link{display:inline-flex;align-items:center;gap:.4em;margin-top:1.2em;font-weight:700;font-size:var(--fs-xs);color:var(--accent-blue);}
.card__link svg{width:14px;height:14px;transition:transform .15s;}
.card:hover .card__link svg{transform:translateX(3px);}

.service-card{display:flex;flex-direction:column;height:100%;}

/* ---------- Stat band ---------- */
.stat-band{background:var(--ink);color:var(--white);padding:56px 0;}
.stat-band .grid{text-align:center;}
.stat-band b{display:block;font-family:var(--font-display);font-size:2.25rem;font-weight:800;color:var(--white);}
.stat-band span{font-size:var(--fs-xs);color:var(--on-dark-muted);font-weight:600;letter-spacing:.04em;}

/* ---------- Lifecycle stepper ---------- */
.lifecycle{display:flex;flex-wrap:wrap;gap:0;counter-reset:step;position:relative;}
.lifecycle::before{content:"";position:absolute;top:22px;left:0;right:0;height:2px;background:var(--line);z-index:0;}
.section--dark .lifecycle::before{background:var(--line-dark);}
.lifecycle__step{
  flex:1 1 150px;position:relative;z-index:1;padding:0 14px 0 0;text-align:left;
}
.lifecycle__step .dot{
  width:44px;height:44px;border-radius:50%;background:var(--surface);border:2px solid var(--accent-blue);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;color:var(--accent-blue);
  margin-bottom:14px;font-size:var(--fs-sm);
}
.section--dark .lifecycle__step .dot{background:var(--graphite);}
.lifecycle__step span{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--ink);line-height:1.3;}
.section--dark .lifecycle__step span{color:var(--on-dark);}
@media (max-width:860px){
  .lifecycle{flex-direction:column;gap:20px;}
  .lifecycle::before{width:2px;height:100%;left:22px;top:0;}
  /* Reset the desktop `flex:1 1 150px`: once the direction is column that
     150px basis applies to HEIGHT, spacing the steps ~170px apart. */
  .lifecycle__step{flex:0 0 auto;padding:0 0 0 64px;min-height:44px;display:flex;align-items:center;}
  .lifecycle__step .dot{position:absolute;left:0;top:0;margin:0;}
}

/* ---------- Pillars strip ---------- */
.pillars{display:flex;flex-wrap:wrap;gap:10px;}
.pillars span{
  font-size:var(--fs-xs);font-weight:700;padding:.6em 1.1em;border-radius:999px;
  background:var(--muted);color:var(--steel);border:1px solid var(--line);
}

/* ---------- Services hub filters ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.filter-bar button{
  padding:.6em 1.2em;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:var(--fs-xs);font-weight:700;color:var(--steel);cursor:pointer;transition:.15s;
}
.filter-bar button:hover{border-color:var(--accent-blue);color:var(--accent-blue);}
.filter-bar button.is-active{background:var(--ink);border-color:var(--ink);color:var(--white);}

/* ---------- Service detail page ---------- */
.service-layout{display:grid;grid-template-columns:2fr 1fr;gap:64px;align-items:start;}
@media (max-width:960px){.service-layout{grid-template-columns:1fr;}}
.service-toc{position:sticky;top:110px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;}
.service-toc h4{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--steel-soft);margin-bottom:1em;}
.service-toc a{display:block;padding:.5em 0;font-size:var(--fs-sm);font-weight:600;color:var(--steel);border-bottom:1px solid var(--line);}
.service-toc a:last-child{border-bottom:none;}
.service-toc a:hover{color:var(--accent-blue);}
.service-toc .btn{width:100%;margin-top:1.2em;}

.doc-block{margin-bottom:48px;scroll-margin-top:100px;}
.doc-block h2{font-size:var(--fs-lg);border-bottom:2px solid var(--muted);padding-bottom:.5em;margin-bottom:.8em;}
.doc-block p{color:var(--steel);}
.doc-block ul{margin:1em 0;}
.doc-block ul li{position:relative;padding-left:1.6em;color:var(--steel);margin-bottom:.6em;}
.doc-block ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--accent-green);}
.doc-block blockquote{border-left:3px solid var(--accent-blue);margin:1.4em 0;padding:.3em 1.4em;color:var(--ink);font-style:italic;background:var(--muted);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}

.applications-grid{display:flex;flex-wrap:wrap;gap:10px;}
.applications-grid span{background:var(--muted);border-radius:var(--radius-sm);padding:.7em 1em;font-size:var(--fs-sm);font-weight:600;color:var(--steel);}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--ink),var(--accent-blue-deep));
  color:var(--white);border-radius:var(--radius-lg);padding:56px;
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
}
.cta-band h2{color:var(--white);margin-bottom:.3em;}
.cta-band p{color:var(--on-dark-muted);margin:0;}

/* ---------- Timeline (project development lifecycle) ---------- */
.timeline{display:flex;flex-direction:column;max-width:680px;margin:0 auto;}
.timeline__item{display:grid;grid-template-columns:auto 1fr;gap:20px;}
.timeline__rail{display:flex;flex-direction:column;align-items:center;}
.timeline__rail i{width:14px;height:14px;border-radius:50%;background:var(--accent-blue);flex:0 0 auto;}
.timeline__rail b{width:2px;flex:1;background:var(--line-dark);margin:6px 0;min-height:24px;}
.section--surface .timeline__rail b,.section--muted .timeline__rail b{background:var(--line);}
.timeline__item:last-child .timeline__rail b{display:none;}
.timeline__content{padding-bottom:28px;}
.timeline__content b{font-family:var(--font-display);}

/* ---------- Team / people ---------- */
.person{text-align:center;}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:16px;}
.person h4{margin-bottom:.1em;}
.person span{font-size:var(--fs-xs);color:var(--accent-blue);font-weight:700;}

/* ---------- Blog ---------- */
.post-card{display:flex;flex-direction:column;height:100%;}
.post-card img{border-radius:var(--radius-md);aspect-ratio:16/10;object-fit:cover;margin-bottom:20px;}
.post-card .meta{font-size:var(--fs-xs);color:var(--steel-soft);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6em;}
.post-card h3{font-size:var(--fs-md);}
.post-card p{color:var(--steel);font-size:var(--fs-sm);flex:1;}

.article__header{max-width:760px;margin:0 auto;}
.article__body{max-width:760px;margin:0 auto;}
.article__body h2{margin-top:1.6em;font-size:var(--fs-lg);}
.article__body h3{margin-top:1.2em;font-size:var(--fs-md);}
.article__body p{color:var(--steel);}
.article__body ul{margin:1em 0;}
.article__body ul li{position:relative;padding-left:1.6em;color:var(--steel);margin-bottom:.6em;}
.article__body ul li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--accent-blue);}
.article__body figure{margin:2em 0;}
.article__body img{border-radius:var(--radius-md);}
.article__body figcaption{font-size:var(--fs-xs);color:var(--steel-soft);margin-top:.6em;text-align:center;}
.article__source{font-size:var(--fs-xs);color:var(--steel-soft);border-top:1px solid var(--line);margin-top:2.4em;padding-top:1.2em;}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:.5em;margin-bottom:20px;}
.field.full{grid-column:1/-1;}
.field label{font-size:var(--fs-xs);font-weight:700;color:var(--ink);}
.field label .req{color:var(--accent-blue);}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--fs-sm);padding:.9em 1em;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-blue);outline:none;}
.field textarea{resize:vertical;min-height:140px;}
.form-note{font-size:var(--fs-xs);color:var(--steel-soft);margin-top:8px;}

.contact-card{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line-dark);}
.contact-card:last-child{border-bottom:none;}
.contact-card svg{width:22px;height:22px;color:var(--accent-green);flex:0 0 auto;margin-top:2px;}
.contact-card b{display:block;color:var(--white);font-family:var(--font-display);font-size:var(--fs-sm);margin-bottom:.2em;}
.contact-card span{color:var(--on-dark-muted);font-size:var(--fs-sm);}

.notice{
  border:1px dashed var(--line);background:var(--muted);border-radius:var(--radius-md);
  padding:16px 20px;font-size:var(--fs-xs);color:var(--steel);
}

/* ---------- Footer ---------- */
.site-footer{background:var(--graphite-2);color:var(--on-dark-muted);padding:72px 0 28px;}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px;}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr;}}
.footer__brand{display:flex;align-items:center;gap:.6em;margin-bottom:16px;}
.footer__brand img{height:34px;filter:brightness(0) invert(1);opacity:.9;}
.footer__brand b{font-family:var(--font-display);color:var(--white);font-size:1rem;}
.site-footer p{font-size:var(--fs-sm);max-width:34ch;}
.site-footer h4{color:var(--white);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.2em;}
.site-footer ul li{margin-bottom:.7em;}
.site-footer a{font-size:var(--fs-sm);color:var(--on-dark-muted);transition:color .15s;}
.site-footer a:hover{color:var(--white);}
.footer__bottom{border-top:1px solid var(--line-dark);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:var(--fs-xs);}

/* ---------- misc ---------- */
.tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-blue);background:rgba(11,95,165,.08);padding:.4em .8em;border-radius:999px;margin-bottom:1em;}
.divider{height:1px;background:var(--line);margin:64px 0;}
.center{text-align:center;margin-left:auto;margin-right:auto;}
.mt-0{margin-top:0;}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:1000;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* ---------- on-dark utility (Elementor build: applied per-widget since
   section-level custom classes don't render in this Elementor version) ---------- */
.on-dark{color:var(--on-dark);}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--white);}
.on-dark p{color:var(--on-dark-muted);}
.on-dark .lede{color:var(--on-dark-muted);}
.on-dark .eyebrow{color:#7FC3F0;}
/* Elementor's own widget CSS sets heading/text color at the same
   specificity (0,2,0) as a plain ".on-dark h1" rule and is regenerated
   per-page after this stylesheet loads, so it wins ties on source order.
   These compound selectors (0,3,0) beat it outright, regardless of order. */
.on-dark.elementor-widget-heading .elementor-heading-title{color:var(--white) !important;}
.on-dark.elementor-widget-text-editor,
.on-dark.elementor-widget-text-editor p{color:var(--on-dark-muted) !important;}

/* Elementor button widget: our custom class lands on the outer
   .elementor-element wrapper (a block-level div, not the actual
   <a class="elementor-button"> inside it). Re-using .btn-primary etc. here
   made that *wrapper* pick up their bare-class background/color rules too
   (those rules have no element restriction), producing a full-width
   colored block behind the real button — hence dedicated e-btn-* names
   that exist only in this Elementor-build context, plus an explicit reset
   on the wrapper itself as a safety net. */
.elementor-widget-button.e-btn-primary,
.elementor-widget-button.e-btn-outline,
.elementor-widget-button.e-card-link{background:transparent;}
.elementor-widget-button .elementor-button{display:inline-flex !important;width:auto !important;font-family:var(--font-display);font-weight:700;padding:.9em 1.7em;border-radius:var(--radius-sm);transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);}
.elementor-widget-button.e-btn-primary .elementor-button{background:var(--accent-blue);color:var(--white);}
.elementor-widget-button.e-btn-primary .elementor-button:hover{background:var(--accent-blue-deep);}
.elementor-widget-button.e-btn-outline .elementor-button{background:transparent;color:var(--ink);border:1px solid var(--line);}
.elementor-widget-button.e-btn-outline .elementor-button:hover{border-color:var(--accent-blue);color:var(--accent-blue);}
.elementor-widget-button.e-card-link .elementor-button{background:transparent;color:var(--accent-blue);padding:0;font-size:var(--fs-xs);}
.on-dark.elementor-widget-button .elementor-button{color:var(--white);}

/* List bullets inside Elementor text-editor widgets (the .doc-block
   ancestor these were originally scoped to doesn't exist in the Elementor
   build, since section/column custom classes don't render there). */
.elementor-widget-text-editor ul li{position:relative;padding-left:1.6em;margin-bottom:.6em;}
.elementor-widget-text-editor ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--accent-green);}

/* Hero image: reproduce the original .hero__panel treatment (glass panel
   around a 4:5 portrait crop). The Elementor image widget renders a bare
   <img> at the file's own 3:2 landscape ratio without this. */
/* Target the widget element itself, not .elementor-widget-container: that
   inner wrapper exists in Elementor 3.x but not in 4.x, and the two
   environments run different major versions. The class from _css_classes
   lands on the outer widget element in both. */
.hero-panel{
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);padding:28px;backdrop-filter:blur(6px);
}
.hero-panel .elementor-widget-container{background:none;border:0;padding:0;}
.hero-panel img{border-radius:var(--radius-md);aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;display:block;}

/* Elementor header/footer Theme Builder templates */
.elementor-location-header .site-header__bar,
.elementor-location-header{background:var(--surface);}
/* The logo file is a wide lockup (935x267), so constrain by height and let
   width follow, matching the original PHP header's .brand img rule. */
.elementor-widget-theme-site-logo img{height:44px !important;width:auto !important;max-width:none;}
.on-dark.elementor-widget-theme-site-logo img{filter:brightness(0) invert(1);opacity:.9;height:34px !important;}
.elementor-location-header .elementor-container{align-items:center;}
/* Full-width sections run edge to edge, so the inner content needs its own
   gutter to line up with the boxed page sections above/below it. */
.elementor-location-header > .elementor-section > .elementor-container,
.elementor-location-footer > .elementor-section > .elementor-container{padding-left:40px;padding-right:40px;}
@media (max-width:767px){
  .elementor-location-header > .elementor-section > .elementor-container,
  .elementor-location-footer > .elementor-section > .elementor-container{padding-left:20px;padding-right:20px;}
}
/* Nine nav items have to fit one row next to the logo and CTA. */
.elementor-location-header .elementor-nav-menu--main .elementor-item{font-size:.82rem;padding-left:.7em;padding-right:.7em;}
.footer-links ul{list-style:none;margin:0;padding:0;}
.footer-links ul li{margin-bottom:.7em;padding-left:0;}
.footer-links ul li::before{display:none;}
.footer-links a{font-size:var(--fs-sm);color:var(--on-dark-muted);transition:color .15s;}
.footer-links a:hover{color:var(--white);}
/* Elementor's image widget centres by default; the footer text around the
   logo is left-aligned, so the logo should be too. */
.elementor-location-footer .elementor-widget-theme-site-logo{text-align:left;}
.elementor-location-footer .elementor-widget-theme-site-logo img{margin-left:0;margin-right:auto;}
.elementor-nav-menu--dropdown{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);}
.elementor-nav-menu--dropdown .elementor-item{color:var(--steel);font-size:var(--fs-xs);font-weight:600;}
.elementor-nav-menu--main .elementor-item{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);}

/* Elementor Pro Form widget: style to match .field/.btn-primary look. */
.elementor-field-group{margin-bottom:20px;}
.elementor-field-group>label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--ink);margin-bottom:.5em;}
.elementor-field-group .elementor-field,
.elementor-field-group .elementor-select-wrapper select{
  width:100%;font:inherit;font-size:var(--fs-sm);padding:.9em 1em;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);transition:border-color .15s;
}
.elementor-field-group .elementor-field:focus,
.elementor-field-group .elementor-select-wrapper select:focus{border-color:var(--accent-blue);outline:none;}
.elementor-field-textual textarea{min-height:140px;resize:vertical;}
.elementor-form .elementor-button{display:inline-flex;width:auto;background:var(--accent-blue);color:var(--white);font-family:var(--font-display);font-weight:700;padding:.9em 1.7em;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:background .18s var(--ease);}
.elementor-form .elementor-button:hover{background:var(--accent-blue-deep);}
.elementor-message{border-radius:var(--radius-sm);padding:.9em 1.2em;font-size:var(--fs-sm);margin-top:1em;}
.elementor-message.elementor-message-success{background:rgba(44,159,69,.1);color:var(--accent-green-deep);}
.elementor-message.elementor-message-danger{background:rgba(220,38,38,.08);color:#B91C1C;}

/* Safety net: this Elementor build generates zero @media rules in its
   per-post CSS (verified — a multi-column section keeps its desktop
   percentage split at every viewport width with no mobile override),
   so columns never stack and cause horizontal overflow. Force it here. */
@media (max-width:767px){
  .elementor-column{width:100% !important;}
  .elementor-row,.elementor-container{flex-wrap:wrap !important;}
}

/* On mobile Elementor's boxed container spans the full viewport, so page
   sections get no side gutter and cards/text sit flush against the screen
   edges. (The header/footer rule above is more specific and keeps 20px.) */
@media (max-width:1024px){
  .elementor-section > .elementor-container{padding-left:20px;padding-right:20px;}
}

/* Compact header (≤1024px — the Nav Menu widget swaps to its burger at the
   tablet breakpoint, so the header must switch layout at the same width).
   On phones the safety net above would otherwise stack the header into
   three rows; on tablets the desktop 20/60/20 split leaves the burger
   centred and the CTA wrapping. Either way: logo left, burger right, one
   row. Declared after the safety net so it wins the cascade. */
@media (max-width:1024px){
  .elementor-location-header .elementor-container{
    flex-wrap:nowrap !important;align-items:center;
  }
  .elementor-location-header .elementor-column{width:auto !important;}
  .elementor-location-header .elementor-column:nth-child(1){flex:0 0 auto;}
  .elementor-location-header .elementor-column:nth-child(2){flex:1 1 auto;min-width:0;}
  /* CTA is redundant on mobile — "Contact" is already in the menu. */
  .elementor-location-header .elementor-column:nth-child(3){display:none !important;}
  .elementor-location-header .elementor-widget-nav-menu{display:flex;justify-content:flex-end;}
  .elementor-location-header .elementor-menu-toggle{margin-left:auto;}
  .elementor-location-header .elementor-widget-theme-site-logo img{height:34px !important;}
  .elementor-location-header > .elementor-section{padding-top:10px !important;padding-bottom:10px !important;}
  /* Opened burger panel: full-width sheet under the bar. It must be taken
     out of flow — left in flow it expands the nav column, which stretches
     the header row and drags the logo down with it. */
  /* Elementor sets position:relative on columns/widget wraps, so an
     absolute panel would anchor to the nav column (narrow, offset right).
     Neutralise those so the section is the positioning context, and lift
     the header above the page content it overlays. */
  .elementor-location-header > .elementor-section{position:relative;z-index:100;}
  .elementor-location-header .elementor-column,
  .elementor-location-header .elementor-widget-wrap,
  .elementor-location-header .elementor-widget-nav-menu{position:static !important;}
  .elementor-location-header nav.elementor-nav-menu--dropdown{
    position:absolute !important;top:100% !important;left:0 !important;right:0 !important;
    width:100% !important;max-width:none !important;
    background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--shadow-md);
  }
  .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-item{
    font-size:.95rem;padding:.85em 1.2em;
  }
}

/* =================== Sep 2026 client revisions =================== */

/* Section titles: the former blue eyebrow label is now the real, large
   heading, and the headline under it is a smaller subtitle (client asked
   for the two to swap sizes). Colour and leading dash kept from the
   eyebrow so the label is still recognisable. */
.elementor-widget-heading.section-title .elementor-heading-title{
  font-family:var(--font-display);font-weight:800;line-height:1.12;letter-spacing:-.01em;
  color:var(--accent-blue);font-size:clamp(1.9rem,3vw,2.6rem);
}
.elementor-widget-heading.section-title h1.elementor-heading-title{font-size:clamp(2.2rem,4vw,3.4rem);}
.elementor-widget-heading.section-title .elementor-heading-title::before{
  content:"";display:inline-block;width:30px;height:3px;border-radius:2px;background:var(--accent-green);
  vertical-align:middle;margin-right:.45em;position:relative;top:-.08em;
}
.on-dark.elementor-widget-heading.section-title .elementor-heading-title{color:#7FC3F0 !important;}
.elementor-widget-heading.section-subtitle .elementor-heading-title{
  font-family:var(--font-display);font-weight:600;line-height:1.35;letter-spacing:0;
  font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--ink);margin:0;
}

/* Technology groups: client's own copy under each title. */
.tech-desc p{color:var(--steel);font-size:1.02rem;line-height:1.7;max-width:62ch;}

/* Lifecycle as grouped phases (replaces the 1–11 numbered dots). */
.phase-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.phase-num{font-family:var(--font-display);font-weight:800;font-size:.74rem;letter-spacing:.16em;color:var(--accent-blue);white-space:nowrap;}
.phase-bar{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent-blue),rgba(11,95,165,.08));}
.elementor-widget-heading.phase-title .elementor-heading-title{font-size:1.35rem;color:var(--ink);}
.phase-stages p{color:var(--steel);font-size:.95rem;margin-bottom:.8em;}
.phase-stages ul li{font-size:.92rem;font-weight:600;color:var(--ink);}
.phase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:.5em 0 1.5em;}
.phase-grid .phase{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;}
.phase-grid h4{font-family:var(--font-display);font-size:1.05rem;margin:0 0 .4em;color:var(--ink);}
.phase-grid p{font-size:.88rem;color:var(--steel);margin:0 0 .8em;}
.phase-grid ul{list-style:none;margin:0;padding:0;}
.phase-grid li{position:relative;padding-left:1.3em;margin-bottom:.45em;font-size:.88rem;font-weight:600;color:var(--ink);}
.phase-grid li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--accent-green);}
@media (max-width:1024px){.phase-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.phase-grid{grid-template-columns:1fr;}}
/* Home phase cards are 4 native columns: 2×2 on tablet instead of four
   cramped ones (section/column CSS classes don't render, hence :has). */
@media (min-width:768px) and (max-width:1024px){
  .elementor-container:has(.phase-title){flex-wrap:wrap !important;}
  .elementor-column:has(.phase-title){width:50% !important;margin-bottom:14px;}
}

/* Card icons: tinted tile, matching the original static design. */
.card-icon{margin-bottom:14px !important;}
.card-icon .elementor-icon-wrapper{text-align:left;line-height:0;}
.card-icon .elementor-icon{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;
  background:linear-gradient(135deg,rgba(11,95,165,.10),rgba(44,159,69,.12));font-size:22px !important;color:var(--accent-blue);
}
.card-icon .elementor-icon svg{width:22px;height:22px;fill:var(--accent-blue);}
.card-icon .elementor-icon i{font-size:22px;}
/* With an icon above it, the big "01" service number becomes a small label. */
.card-icon + .elementor-widget-html .card__index{font-size:.78rem;letter-spacing:.16em;color:var(--steel-soft);margin:0 0 6px;}

/* Stacked cards on phones were touching edge to edge. */
@media (max-width:767px){
  .elementor-column:has(.card-icon),.elementor-column:has(.phase-title){margin-bottom:14px;}
}