/* ==========================================================================
   Linkssor — Bilingual corporate site design system
   Western industrial B2B aesthetic. Light theme, navy + electric blue,
   amber accent (HV cable orange), generous whitespace, low-chrome cards.
   ========================================================================== */

/* ---------- typeface ----------
   Inter is served from this domain rather than a third-party CDN: one fewer
   DNS lookup, no request to a domain that may be slow or blocked for a buyer,
   and the same file for every visitor. It is a variable font, so the whole
   weight range 100-900 arrives as a single 47 KB Latin request — which is also
   what lets headings render at their real weight instead of the browser
   picking the nearest static cut.
   Until it lands the stack below still resolves to Segoe UI / San Francisco,
   i.e. fonts of similar metrics, so nothing reflows. */
@font-face{
  font-family:"Inter var";
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  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;
}
@font-face{
  font-family:"Inter var";
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  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;
}

:root{
  --navy:#0B2545;
  --navy-2:#122F55;
  --navy-3:#1B3E6B;
  --blue:#1F6FEB;
  --blue-dk:#1558C0;
  --blue-lt:#EAF2FE;
  --amber:#E8620F;
  --amber-lt:#FEF1E7;
  --ink:#0F172A;
  --body:#475569;
  --muted:#7C8798;
  --line:#E4E8EF;
  --line-2:#EFF2F7;
  --bg:#FFFFFF;
  --bg-alt:#F6F8FC;
  --bg-alt-2:#EEF3FA;
  --ok:#0B7A4B;
  --ok-lt:#E6F6EE;

  --wrap:1200px;
  --gut:clamp(18px,4vw,32px);
  --r:4px;
  --r-lg:8px;
  --sect:clamp(56px,7vw,104px);

  --f-sans:"Inter var","Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Arial,sans-serif;
  --f-num:"Inter var","Inter","Segoe UI",ui-monospace,Menlo,Consolas,monospace;

  --sh-1:0 1px 2px rgba(15,23,42,.06);
  --sh-2:0 4px 16px rgba(15,23,42,.07);
  --sh-3:0 12px 40px rgba(15,23,42,.11);
  --hd:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--f-sans);font-size:16.5px;line-height:1.72;
  /* Kerning and ligatures are asked for here, via the features themselves.
     There is deliberately no `-webkit-font-smoothing:antialiased`: on Windows
     that switches text off ClearType onto greyscale antialiasing, which reads
     as thin and soft, and the client reviews on Windows. `text-rendering:
     optimizeLegibility` is gone for the same reason — it is a known source of
     engine-specific spacing and does not add anything the features above miss. */
  font-feature-settings:"kern" 1,"liga" 1;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--blue-dk);text-decoration:none}
a:hover{color:var(--amber)}
[id]{scroll-margin-top:calc(var(--hd) + 18px)}

h1,h2,h3,h4,h5{margin:0 0 .5em;color:var(--ink);font-weight:750;line-height:1.18;letter-spacing:-.021em}
h1{font-size:clamp(2rem,1.35rem + 2.6vw,3.35rem);letter-spacing:-.032em}
h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);letter-spacing:-.026em}
h3{font-size:clamp(1.08rem,1rem + .4vw,1.34rem)}
h4{font-size:1.02rem;letter-spacing:-.01em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin:.35em 0}
strong,b{color:var(--ink);font-weight:680}
hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap--narrow{max-width:880px}
.section{padding:var(--sect) 0}
.section--tight{padding:calc(var(--sect) * .6) 0}
.section--alt{background:var(--bg-alt);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.section--navy{background:var(--navy);border:0}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.section--navy,.section--navy p{color:#B9C7DA}
.grid{display:grid;gap:clamp(18px,2.2vw,28px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:1.35fr 1fr}
.g-1-2{grid-template-columns:1fr 1.35fr}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.split--top{align-items:start}

/* ---------- section heads ---------- */
.eyebrow{
  display:inline-block;font-size:.735rem;font-weight:730;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue);margin:0 0 .8rem
}
.eyebrow--amber{color:var(--amber)}
.eyebrow--light{color:#7FB3FF}
.shead{max-width:790px;margin-bottom:clamp(28px,3.4vw,48px)}
.shead--center{margin-left:auto;margin-right:auto;text-align:center}
.shead p{font-size:1.075rem;color:var(--body)}
.lede{font-size:clamp(1.06rem,1rem + .4vw,1.24rem);color:var(--body);line-height:1.68}

/* ---------- topbar ---------- */
.topbar{background:var(--navy);color:#9FB3CC;font-size:.815rem;line-height:1}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;flex-wrap:wrap}
.topbar a{color:#C6D5E8}
.topbar a:hover{color:#fff}
.topbar-l{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.topbar-r{display:flex;gap:12px;align-items:center}
.topbar .pip{display:inline-block;width:6px;height:6px;border-radius:50%;background:#31C48D;margin-right:7px;vertical-align:middle}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.24);border-radius:3px;overflow:hidden}
.lang a{padding:5px 11px;font-weight:640;letter-spacing:.02em}
.lang a.on{background:var(--blue);color:#fff}
.lang a:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- header ----------
   No backdrop-filter here. It was a 97%-opaque white bar, so what it blurred
   was already invisible, while it forced the header onto its own composited
   layer that must be re-blurred on every scroll frame.
   This is a cost decision, NOT a blur fix, and the difference is worth stating
   because it is easy to get backwards: rendering the open mega panel at 2x with
   and without the filter gives bit-identical glyphs (0 of 322,400 pixels below
   the header differ; the only changes are 9920 pixels at 1/255 inside the
   header, from the background alpha going .97 -> .985, test: ab_filter.py).
   So do not re-add it hoping to sharpen the dropdown, and do not remove this
   note expecting a sharpness win either. */
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.985);border-bottom:1px solid var(--line)}
.header.is-scrolled{box-shadow:var(--sh-2)}
.header .wrap{position:relative;display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);min-height:var(--hd)}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:30px;width:auto}
.brand .tag{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:600;margin-top:3px}
.nav{margin-left:auto}
.nav > ul > li{position:static;margin:0}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(10px,1.4vw,22px)}
.nav a{display:block;padding:10px 2px;font-size:.93rem;font-weight:620;color:var(--ink);letter-spacing:-.005em;white-space:nowrap}
.nav a:hover,.nav a.on{color:var(--blue)}
.nav a.on{box-shadow:inset 0 -2px 0 var(--blue)}
.nav .has-sub > a::after{content:"";display:inline-block;margin-left:6px;vertical-align:middle;border:4px solid transparent;border-top-color:var(--muted);transform:translateY(2px)}
.nav > ul > li:hover > a::after,.nav > ul > li:focus-within > a::after{border-top-color:var(--blue)}

/* ---------- mega dropdown ----------
   Anchored to the header's content column, NOT to its own tab. Measured at a
   961 px viewport (the narrowest width that still shows the desktop nav): the
   nav row is only ~560 px wide while the panel is as wide as the content
   column, so a tab-anchored panel runs off the viewport for every tab except
   the first. Anchored to the row it always lands exactly under the logo, at
   any width, for any tab order.

   Clarity, in order of how much it matters:
   1. the open state is the identity for both transform and translate, so the
      panel is never left sitting on a sub-pixel offset — by definition there is
      nothing for the compositor to resample;
   2. every glyph in here is >= 14 px, set in the real variable font;
   3. the photo is sized so it is never drawn larger than its file (verified at
      1x, 2x and 3x by nav_check.py).

   The closed state is display:none rather than opacity:0 + visibility:hidden.
   Both hide the panel, but only display:none stops the browser loading the
   three panel photos: a visibility:hidden element keeps its layout box, so
   loading="lazy" fetches it anyway. Measured, that was 177 KB on every page
   load at 1x and 374 KB at 2x, for a menu most visitors never open. The fade
   is rebuilt with @starting-style + allow-discrete, which browsers without
   support simply skip — they get an instant panel instead. */
.sub{
  position:absolute;top:calc(100% + 1px);left:var(--gut);right:var(--gut);
  display:none;grid-template-columns:300px minmax(0,1fr);gap:24px;
  padding:16px;background:#fff;border:1px solid var(--line);
  border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--sh-3);
  opacity:0;translate:0 6px;
  transition:opacity .16s ease,translate .16s ease,display .16s allow-discrete
}
.nav > ul > li:hover > .sub,.nav > ul > li:focus-within > .sub{
  display:grid;opacity:1;translate:0 0
}
@starting-style{
  .nav > ul > li:hover > .sub,.nav > ul > li:focus-within > .sub{
    opacity:0;translate:0 6px
  }
}
.sub-fig{position:relative;display:block;min-height:212px;border-radius:var(--r);overflow:hidden;background:var(--navy-2)}
.sub-fig img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.sub-fig--none{background:none}
.sub-fig-b{
  position:absolute;left:0;right:0;bottom:0;padding:30px 15px 12px;
  background:linear-gradient(180deg,rgba(11,37,69,0) 0%,rgba(11,37,69,.9) 60%);
  color:#fff;font-size:.815rem;font-weight:660;line-height:1.34;letter-spacing:.01em
}
.sub-b{display:flex;flex-direction:column;min-width:0;padding:3px 0 0}
.sub .sub-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  align-items:start;gap:1px 22px;margin:0;padding:0;list-style:none
}
.sub .sub-list > li{margin:0;position:static}
.nav .sub a{
  display:block;padding:9px 11px;border-radius:var(--r);color:var(--ink);
  font-size:.925rem;font-weight:660;line-height:1.3;letter-spacing:-.006em;white-space:normal
}
.nav .sub .sub-d{
  display:block;margin-top:3px;color:var(--body);
  font-size:.875rem;font-weight:450;line-height:1.42;letter-spacing:0
}
.nav .sub a:hover{background:var(--blue-lt);color:var(--blue-dk);box-shadow:none}
.nav .sub a:hover .sub-d{color:var(--blue-dk)}
/* Scoped to .nav .sub on purpose: the plain `.sub-cta` selector loses to
   `.nav .sub a` above (0-2-1 beats 0-1-0), which silently handed this link the
   body-link padding and left the arrow wrapping onto a second line. */
.nav .sub .sub-cta{
  display:flex;align-items:center;justify-content:flex-start;gap:7px;align-self:stretch;
  margin-top:auto;padding:12px 11px 2px;border-top:1px solid var(--line-2);
  color:var(--blue);font-size:.885rem;font-weight:680;letter-spacing:-.002em
}
.nav .sub .sub-cta .si{flex-shrink:0;transition:translate .16s ease}
.nav .sub .sub-cta:hover{background:none;color:var(--blue-dk)}
.nav .sub .sub-cta:hover .si{translate:2px 0}
.hact{display:flex;align-items:center;gap:10px;flex-shrink:0}
.burger{display:none;width:42px;height:38px;border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r);background:var(--blue);color:#fff;
  font-weight:670;font-size:.94rem;letter-spacing:-.004em;border:1px solid var(--blue);
  cursor:pointer;transition:.16s;line-height:1.2;text-align:center
}
.btn:hover{background:var(--blue-dk);border-color:var(--blue-dk);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn--amber{background:var(--amber);border-color:var(--amber)}
.btn--amber:hover{background:#CC5209;border-color:#CC5209}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{background:#fff;border-color:var(--blue);color:var(--blue);box-shadow:var(--sh-1)}
.btn--light{background:#fff;border-color:#fff;color:var(--navy)}
.btn--light:hover{background:#EAF2FE;border-color:#EAF2FE;color:var(--navy)}
.btn--outline-lt{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn--outline-lt:hover{background:rgba(255,255,255,.13);border-color:#fff;color:#fff}
.btn--sm{padding:9px 16px;font-size:.86rem}
.btn--lg{padding:16px 32px;font-size:1rem}
.btn--block{width:100%}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.linkarrow{display:inline-flex;align-items:center;gap:7px;font-weight:650;font-size:.9rem;color:var(--blue-dk)}
.linkarrow::after{content:"\2192";transition:.18s}
.linkarrow:hover::after{transform:translateX(4px)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);overflow:hidden;color:#CFDCEC}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.36}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,37,69,.96) 0%,rgba(11,37,69,.86) 46%,rgba(11,37,69,.58) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(60px,8vw,116px);padding-bottom:clamp(44px,5vw,72px)}
.hero-inner{max-width:830px}
.hero h1{color:#fff;margin-bottom:.55em}
.hero .lede{color:#D2DEEE;font-size:clamp(1.05rem,1rem + .45vw,1.28rem);max-width:720px}
.hero .btns{margin-top:1.9rem}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:1.7rem}
.hero-tags span{font-size:.79rem;font-weight:620;letter-spacing:.02em;padding:6px 12px;border-radius:100px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#DCE7F5}
.hero-kpi{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.15);background:rgba(7,26,50,.55)}
.hero-kpi .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-top:0;padding-bottom:0}
.hero-kpi .k{padding:24px 20px;border-right:1px solid rgba(255,255,255,.12)}
.hero-kpi .k:first-child{padding-left:0}
.hero-kpi .k:last-child{border-right:0}
.hero-kpi b{display:block;font-family:var(--f-num);font-size:clamp(1.5rem,1.15rem + 1.3vw,2.1rem);color:#fff;font-weight:730;letter-spacing:-.03em;line-height:1.1}
.hero-kpi span{display:block;font-size:.79rem;color:#93A9C4;margin-top:5px;letter-spacing:.01em}

/* page hero (inner pages) */
.phero{background:var(--navy);color:#C4D3E6;position:relative;overflow:hidden}
.phero--img::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(11,37,69,.95),rgba(11,37,69,.7))}
.phero--img .hero-bg img{opacity:.3}
.phero .wrap{position:relative;z-index:2;padding-top:clamp(38px,4.6vw,62px);padding-bottom:clamp(34px,4.2vw,58px)}
.phero h1{color:#fff;margin-bottom:.4em;font-size:clamp(1.72rem,1.25rem + 1.9vw,2.65rem)}
.phero p{margin:0;max-width:760px;font-size:1.045rem;color:#BDCDE1}
.phero--center{text-align:center}
.phero--center p{margin-left:auto;margin-right:auto}
.phero .btns{margin-top:1.6rem}
.crumb{font-size:.79rem;color:#8CA3C0;margin-bottom:1.05rem;letter-spacing:.02em}
.crumb a{color:#A9BED8}
.crumb a:hover{color:#fff}
.crumb span{opacity:.5;padding:0 7px}

/* ---------- answer block (GEO) ---------- */
.answer{
  background:var(--blue-lt);border-left:3px solid var(--blue);border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:20px 24px;margin:0 0 clamp(28px,3.4vw,42px)
}
.answer p{margin:0;font-size:1.045rem;color:#1D3557;line-height:1.68}
.answer strong{color:var(--navy)}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:#D2DCEA}
.card-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt-2);position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .card-img img{transform:scale(1.035)}
.card-img--tall{aspect-ratio:4/3}
.card-img--contain{background:#fff}
.card-img--contain img{object-fit:contain;padding:16px}
.card-b{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.card-b h3{margin-bottom:.42em}
.card-b p{font-size:.935rem;margin-bottom:.85em;color:var(--body)}
.card-b > :last-child{margin-bottom:0;margin-top:auto}
.card-tag{position:absolute;top:12px;left:12px;background:rgba(11,37,69,.87);color:#fff;font-size:.7rem;font-weight:680;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:3px}
.card--flat{border:0;box-shadow:none;background:transparent}
.card--flat:hover{transform:none;box-shadow:none}
.card--flat .card-b{padding:16px 0 0}
.card--link:hover h3{color:var(--blue)}

/* feature (icon-less, numbered / rule-led) */
.feat{padding:26px 0 0;border-top:2px solid var(--ink)}
.feat h3{margin-bottom:.42em;font-size:1.1rem}
.feat p{font-size:.94rem;margin:0}
.feat-num{font-family:var(--f-num);font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.1em;display:block;margin-bottom:14px}

/* ---------- trust / logos ---------- */
.trust{background:#fff;border-bottom:1px solid var(--line-2);padding:34px 0 38px}
.trust-h{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.logos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.logo-chip{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:56px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;font-weight:680;font-size:.845rem;color:#41506A;letter-spacing:.01em;
  transition:.16s;flex:0 1 auto;min-width:132px
}
.logo-chip:hover{border-color:var(--blue);color:var(--blue-dk);box-shadow:var(--sh-1)}

/* ---------- customer logo wall ----------
   Each mark is stored at its own natural resolution and shown at no more than
   1:1 inside a fixed-ratio tile, so nothing is ever stretched and the wall
   stays sharp. The old version fitted every mark into a shared padded canvas,
   which meant small marks were blown up by up to 2.6x — that was the blur.

   Columns are an explicit count rather than auto-fill, because 18 marks divide
   evenly by 6, 3 and 2: the wall always ends on a full row instead of trailing
   off with a ragged one, and every caption reserves two lines so all the tiles
   are the same height. */
.custs{display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1100px){.custs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.custs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.cust{
  margin:0;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
.cust-mark{
  aspect-ratio:420/168;display:flex;align-items:center;justify-content:center;
  padding:14px;box-sizing:border-box;background:#fff
}
.cust-mark img{
  display:block;width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain
}
.cust figcaption{
  padding:10px 10px 12px;border-top:1px solid var(--line-2);text-align:center;
  display:flex;flex-direction:column;justify-content:center;
  /* reserve name + two lines of sector on every tile, so a one-line sector
     does not make its row shorter than its neighbours */
  min-height:74px
}
.cust figcaption b{display:block;font-size:.815rem;font-weight:700;color:#1F2E45;letter-spacing:.005em;line-height:1.25}
.cust figcaption span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.7rem;color:var(--muted);line-height:1.4;margin-top:3px
}
.cust:hover{border-color:#C3D2E6;box-shadow:var(--sh-1);transform:translateY(-2px)}
@media(max-width:560px){
  .cust-mark{padding:12px}
  .cust figcaption{min-height:70px;padding:9px 8px 11px}
  .cust figcaption span{font-size:.665rem}
}


/* ---------- certification badges ---------- */
.badges{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.badge{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.badge-ic{flex:0 0 42px;height:42px;border-radius:var(--r);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:750;font-size:.78rem;letter-spacing:.03em}
.badge-ic--amber{background:var(--amber)}
.badge-ic--ok{background:var(--ok)}
.badge b{display:block;color:var(--ink);font-size:.955rem;line-height:1.35;margin-bottom:3px}
.badge span{font-size:.82rem;color:var(--muted);line-height:1.5;display:block}
.badge a{font-size:.82rem;font-weight:650}

/* ---------- KPI / stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stats > div{background:#fff;padding:24px 22px}
.stats b{display:block;font-family:var(--f-num);font-size:clamp(1.4rem,1.1rem + 1vw,1.95rem);font-weight:730;color:var(--navy);letter-spacing:-.03em;line-height:1.1}
.stats span{display:block;font-size:.83rem;color:var(--muted);margin-top:6px}
.stat-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.stat-list li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px dashed var(--line);margin:0;font-size:.94rem}
.stat-list li:last-child{border-bottom:0}
.stat-list b{font-family:var(--f-num);color:var(--navy);font-weight:700;white-space:nowrap}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.step{position:relative;padding:24px 20px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  display:block;font-family:var(--f-num);font-size:.8rem;font-weight:700;color:var(--blue);
  letter-spacing:.1em;margin-bottom:12px
}
.step h4{margin-bottom:.35em;font-size:1rem}
.step p{font-size:.875rem;margin:0;line-height:1.6}

/* ---------- process arrow strip ---------- */
.flow{display:flex;flex-wrap:wrap;gap:0;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.flow > div{flex:1 1 168px;padding:20px 18px;border-right:1px solid var(--line-2);position:relative}
.flow > div:last-child{border-right:0}
.flow b{display:block;font-size:.925rem;color:var(--ink);margin-bottom:5px}
.flow span{font-size:.8rem;color:var(--muted);line-height:1.5;display:block}

/* ---------- tables ---------- */
/* A `1fr` grid track is minmax(auto,1fr), so a wide child — a table with a
   min-width, a long unbreakable token — inflates the whole column and blows
   out the mobile layout. .grid > *:min-width:0 keeps the track honest, and the
   table then scrolls inside its own wrapper instead of the page. */
.grid > *,.split > *,.quote-grid > *,.foot-grid > *,.cards > *{min-width:0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;min-width:0;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:top}
thead th{background:var(--bg-alt);font-weight:700;color:var(--ink);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FCFDFF}
td b{color:var(--ink)}
.spec th{width:34%;background:#fff;color:var(--muted);font-weight:600;font-size:.87rem;text-transform:none;letter-spacing:0}

/* ---------- gallery ---------- */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
.gallery figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-alt-2);border:1px solid var(--line)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;background:linear-gradient(transparent,rgba(9,26,48,.85));color:#fff;font-size:.79rem;font-weight:600;line-height:1.35}
.gallery .w2{grid-column:span 2}
.gallery .h2{grid-row:span 2}
.gallery .h2 img{aspect-ratio:4/6}

/* ---------- split media ---------- */
.media{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-alt-2)}
.media img{width:100%;object-fit:cover}
.media--16-10 img{aspect-ratio:16/10}
.media--4-3 img{aspect-ratio:4/3}
/* portrait frames: show the whole thing at 1:1 rather than cropping to a
   sliver and then enlarging what is left */
.media--contain img{aspect-ratio:4/3;object-fit:contain;background:#fff}
.media--3-2 img{aspect-ratio:3/2}
.media-cap{font-size:.79rem;color:var(--muted);padding:10px 14px;border-top:1px solid var(--line-2);background:#fff}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.media-grid .span2{grid-column:span 2}

/* ---------- lists ---------- */
.checks{list-style:none;padding:0;margin:0 0 1.05em}
.checks li{position:relative;padding-left:28px;margin:.5em 0;font-size:.945rem}
.checks li::before{content:"";position:absolute;left:0;top:.52em;width:14px;height:8px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.checks--ok li::before{border-color:var(--ok)}
.chev{list-style:none;padding:0;margin:0}
.chev li{position:relative;padding-left:20px;margin:.42em 0;font-size:.94rem}
.chev li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--blue);border-radius:1px;transform:rotate(45deg)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.05em;padding:0;list-style:none}
.pills li{margin:0;font-size:.815rem;font-weight:620;padding:5px 12px;border-radius:100px;background:var(--bg-alt-2);color:#33455F;border:1px solid var(--line)}

/* ---------- FAQ ---------- */
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--line);padding:0}
.faq details[open]{background:#FCFDFF}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 42px 19px 0;position:relative;
  font-weight:665;color:var(--ink);font-size:1.015rem;line-height:1.5
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.4rem;font-weight:400;color:var(--blue);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 42px 20px 0;font-size:.945rem}
.faq .a p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.cta{background:var(--navy);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(31,111,235,.34),transparent 68%)}
.cta .wrap{position:relative;z-index:2;padding-top:clamp(46px,5.4vw,76px);padding-bottom:clamp(46px,5.4vw,76px)}
.cta-in{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(26px,4vw,58px);align-items:center}
.cta h2{color:#fff;margin-bottom:.4em}
.cta p{color:#B9C7DA;margin:0;font-size:1.045rem}
.cta-acts{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.cta-acts .btn{width:100%}
.cta-note{font-size:.8rem;color:#8CA3C0;text-align:center}

/* ---------- forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,34px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.845rem;font-weight:650;color:var(--ink);margin-bottom:6px}
.field label .req{color:var(--amber)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);
  font-size:.945rem;font-family:inherit;color:var(--ink);background:#fff;transition:.16s
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,111,235,.13)}
.field .hint{font-size:.785rem;color:var(--muted);margin-top:5px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:var(--muted);margin:4px 0 18px}
.consent input{width:auto;margin-top:3px;flex:0 0 auto}
.form-ok{display:none;background:var(--ok-lt);border:1px solid #A7DFC4;color:#065F3B;border-radius:var(--r);padding:14px 16px;font-size:.9rem;margin-bottom:16px}
.form-ok.show{display:block}

/* ---------- contact blocks ---------- */
.cinfo{display:grid;gap:16px}
.cinfo .row{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.cinfo .ic{flex:0 0 38px;height:38px;border-radius:var(--r);background:var(--blue-lt);color:var(--blue-dk);display:flex;align-items:center;justify-content:center;font-weight:750;font-size:.72rem;letter-spacing:.02em}
.cinfo b{display:block;font-size:.94rem;color:var(--ink);margin-bottom:2px}
.cinfo p,.cinfo span{font-size:.885rem;margin:0;color:var(--body);line-height:1.6}
.cinfo a{word-break:break-word}

/* ---------- notice / callout ---------- */
.note{border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--amber-lt);border-radius:0 var(--r) var(--r) 0;padding:16px 20px;font-size:.905rem;color:#7A3A0B}
.note b{color:#5E2C06}
.note--blue{border-left-color:var(--blue);background:var(--blue-lt);color:#1D3557}
.note--blue b{color:var(--navy)}
.note--gray{border-left-color:var(--muted);background:var(--bg-alt);color:#3F4A5C}
.note--gray b{color:var(--ink)}

/* ---------- breadcrumb-ish tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);margin-bottom:26px}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;padding:11px 15px;
  font:inherit;font-size:.905rem;font-weight:640;color:var(--muted);cursor:pointer;margin-bottom:-1px
}
.tabs button.on{color:var(--blue-dk);border-bottom-color:var(--blue)}
.tabpane{display:none}
.tabpane.on{display:block}

/* aside / sidebar */
.aside{position:sticky;top:calc(var(--hd) + 22px)}
.aside .box{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:var(--bg-alt);margin-bottom:16px}
.aside .box h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:14px;font-weight:700}
.aside ul{list-style:none;margin:0;padding:0}
.aside ul li{margin:0;border-bottom:1px solid var(--line-2)}
.aside ul li:last-child{border-bottom:0}
.aside ul a{display:block;padding:10px 0;font-size:.9rem;font-weight:600;color:var(--body)}
.aside ul a:hover,.aside ul a.on{color:var(--blue)}
.aside ul a.on{font-weight:700}

/* ---------- related / prev next ---------- */
.rel{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pager{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:22px;margin-top:34px;font-size:.9rem}

/* ---------- footer ---------- */
.footer{background:#071A32;color:#8FA3BE;font-size:.885rem;padding:clamp(46px,5.6vw,72px) 0 0}
.footer h4{color:#fff;font-size:.795rem;text-transform:uppercase;letter-spacing:.13em;margin-bottom:16px;font-weight:700}
.footer a{color:#A8BCD6}
.footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:clamp(20px,2.6vw,40px);padding-bottom:clamp(32px,4vw,52px)}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:0 0 9px;line-height:1.5}
.foot-brand img{height:26px;margin-bottom:16px;opacity:.95}
.foot-brand p{font-size:.855rem;line-height:1.65;margin-bottom:14px;color:#8FA3BE}
.foot-addr{font-size:.83rem;line-height:1.7;color:#7F93AE}
.foot-addr b{color:#B6C8DE;display:block;margin-bottom:3px;font-size:.83rem}
.foot-bar{border-top:1px solid rgba(255,255,255,.1);padding:20px 0 26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.815rem;color:#7F93AE}
.foot-bar .fb-l{display:flex;gap:18px;flex-wrap:wrap}
.legal{margin-top:10px;font-size:.775rem;color:#6C7F99;line-height:1.65}

/* ---------- social & chat entry points ---------- */
.si{fill:currentColor;flex:0 0 auto;display:block}
.soc-strip{display:flex;align-items:center;gap:6px}
.soc-link{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 8px;border-radius:3px;line-height:1;
  color:#C6D5E8;transition:background .16s,color .16s
}
.soc-link:hover{background:rgba(255,255,255,.12);color:#fff}
.soc-name{display:none}

/* footer variant: name is shown, so the tile carries a readable label */
.soc-strip--foot{flex-wrap:wrap;gap:7px;margin-top:15px}
.soc-strip--foot .soc-link{
  padding:7px 11px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);font-size:.815rem;font-weight:640
}
.soc-strip--foot .soc-link:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.soc-strip--foot .soc-name{display:inline}

.topbar-wa{display:inline-flex;align-items:center;gap:6px;color:#C6D5E8}
.topbar-wa:hover{color:#fff}
.topbar-cert{color:#8FA6C2;white-space:nowrap}

/* contact page card list */
.soc-box .soc-list{list-style:none;margin:0;padding:0}
.aside .soc-box ul li{border-bottom:0}
.aside .soc-box a.soc-card{
  display:flex;gap:12px;align-items:flex-start;padding:12px 12px;margin:0 -12px;
  border-radius:var(--r);color:var(--body);font-weight:400
}
.aside .soc-box a.soc-card:hover{background:#fff;color:var(--body);box-shadow:var(--sh-1)}
.soc-ic{
  flex:0 0 36px;height:36px;border-radius:var(--r);background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center
}
.soc-card:hover .soc-ic{background:var(--blue)}
.soc-tx{display:block;min-width:0}
.soc-tx b{display:block;font-size:.925rem;font-weight:700;color:var(--ink);line-height:1.3}
.soc-h{display:block;font-size:.8rem;color:var(--blue-dk);font-weight:600;margin-top:1px;word-break:break-word}
.soc-n{display:block;font-size:.815rem;color:var(--muted);margin-top:4px;line-height:1.5}

/* floating chat button — one tap to WhatsApp from any page */
.wa-float{
  position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:70;
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 17px 12px 14px;border-radius:100px;
  background:#25D366;color:#06331A!important;font-weight:700;font-size:.9rem;
  box-shadow:0 6px 22px rgba(11,37,69,.26),0 2px 6px rgba(11,37,69,.18);
  transition:transform .18s ease,box-shadow .18s ease
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(11,37,69,.3)}
.wa-float .si{width:26px;height:26px}
@media(max-width:640px){
  .wa-float{padding:12px;border-radius:50%}
  .wa-float span{display:none}
}
@media print{.wa-float{display:none}}

/* ---------- utility ---------- */
.mb0{margin-bottom:0!important}
.mt0{margin-top:0!important}
.mt1{margin-top:1rem}
.mt2{margin-top:2rem}
.mt3{margin-top:3rem}
.center{text-align:center}
.nowrap{white-space:nowrap}
.muted{color:var(--muted)}
.small{font-size:.855rem}
.mono{font-family:var(--f-num);letter-spacing:-.01em}
/* Inter's tabular figures keep KPI strips and spec tables column-aligned
   instead of letting each digit set its own width */
.hero-kpi b,.stats b,.feat-num,.stat-list b,.mono,thead th,.badge-ic{
  font-feature-settings:"kern" 1,"tnum" 1
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 18px;z-index:200}
.skip:focus{left:0}
.only-mob{display:none}

@media (max-width:1080px){
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:34px}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hide-md{display:none}
}
@media (max-width:860px){
  /* keep the language switcher and the phone number; the icon row is the
     first thing to go, because the same links sit in the footer and on the
     contact page. */
  .topbar .soc-strip{display:none}
  .topbar-r{gap:10px}
}
@media (max-width:960px){
  :root{--hd:64px}
  .burger{display:flex}
  .nav{
    position:fixed;inset:var(--hd) 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--sh-3);max-height:calc(100vh - var(--hd));overflow-y:auto;
    transform:translateY(-130%);transition:.26s;padding:8px 0 22px;margin:0
  }
  .nav.open{transform:translateY(0)}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:0 var(--gut)}
  .nav li{border-bottom:1px solid var(--line-2)}
  .nav a{padding:14px 0;font-size:.98rem}
  .nav a.on{box-shadow:none;color:var(--blue)}
  .nav .has-sub > a::after{float:right;transform:translateY(6px)}
  /* The panel photo stays in the accordion, as a 190 px band: the group is
     display:none until it is tapped, so nothing is downloaded until then, and
     the band reads as a header image rather than as a second navigation block
     pushing the links off-screen.
     The 620 px cap on the whole expanded group is what keeps that band sharp:
     a full-bleed band on a 900 px tablet asks for 1828 device px at 2x and the
     largest source is 1500, i.e. a 1.22x blow-up — soft, and exactly the
     complaint this work exists to fix. Capped, it asks for 1212 and downsizes.
     The selector has to out-specify `.nav .sub a` (0-2-1) — the figure IS an
     anchor, so a bare `.sub-fig` rule loses and a stray padding wins instead. */
  .sub{
    position:static;top:auto;left:auto;right:auto;display:none;max-width:620px;
    grid-template-columns:1fr;gap:0;padding:0 0 12px 14px;margin:0;
    background:none;border:0;border-radius:0;box-shadow:none;
    opacity:1;translate:0 0;transition:none
  }
  .nav li.open > .sub{display:block}
  .nav .sub a.sub-fig{min-height:0;height:190px;margin-bottom:12px}
  .sub-b{padding:0}
  .sub .sub-list{grid-template-columns:1fr;gap:0}
  .nav .sub a{padding:9px 0;font-size:.925rem}
  .nav .sub .sub-d{font-size:.875rem}
  .nav .sub .sub-cta{margin-top:8px;padding:10px 0 2px;letter-spacing:0}
  .hact .btn{display:none}
  .split,.g-2,.g-3,.g-2-1,.g-1-2,.cta-in{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .w2{grid-column:span 2}
  .only-mob{display:block}
  .only-desk{display:none}
  .quote-grid{grid-template-columns:1fr!important}
  .aside{position:static}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero-kpi .wrap{grid-template-columns:repeat(2,1fr)}
  .hero-kpi .k{padding:18px 0}
  .hero-kpi .k:nth-child(odd){padding-right:14px}
  .hero-kpi .k:nth-child(even){border-right:0;padding-left:14px}
  .hero-kpi .k:nth-child(1),.hero-kpi .k:nth-child(2){border-bottom:1px solid rgba(255,255,255,.12)}
  .frow{grid-template-columns:1fr}
  .g-4{grid-template-columns:1fr}
  .flow > div{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line-2)}
  .media-grid{grid-template-columns:1fr}
  .media-grid .span2{grid-column:span 1}
  .topbar-l{gap:12px}
  .topbar-l .hide-sm{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:span 2}
}
@media print{
  .header,.topbar,.nav,.cta,.footer,.burger{display:none}
  .section{padding:18px 0}
}

/* ---------- quote page grid ---------- */
.quote-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(26px,3.6vw,54px);align-items:start}