/* =====================================================================
   ISK TECHNOLOGIES — SITE-WIDE DESIGN SYSTEM
   Inspired by the client's reference (prolines.pk): dark tech hero,
   numbered capability cards, category chips — reworked in ISK's own
   navy / orange identity with a circuit-schematic signature motif.
   Display face: Space Grotesk. Body: Inter. Data/mono: JetBrains Mono.
===================================================================== */
:root{
  --navy:#0B2A4A; --navy-2:#123B5C; --navy-900:#071223; --teal:#0B5563;
  --orange:#F58220; --orange-dark:#D96A0C; --paper:#F4F6F8; --ink:#1B2430;
  --line:#DDE3EA; --muted:#5B6B7B; --card:#FFFFFF; --radius:12px;
  --purple:#7A5AF8;
  /* ---- ONE horizontal rhythm for the entire site ----
     --page-x is the equal left/right space every band insets its content
     by: topbar, header, marquee, every section, the footer. --content-max
     caps how wide that content is allowed to get on a very large monitor.
     Because every wrapper uses the same two values plus margin-inline:auto,
     the left and right space is identical, on every screen size, by
     construction — there is nothing left to drift out of alignment. */
  --page-x:clamp(20px,3.6vw,72px);
  --content-max:1680px;
  --gutter:var(--page-x);      /* legacy alias */
  --container:var(--content-max);
  --header-pad:12px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.6;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; margin:0; color:var(--navy);}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
.container{
  width:100%; max-width:calc(var(--content-max) + var(--page-x) * 2);
  margin-inline:auto; padding-inline:var(--page-x);
}
/* edge-to-edge variant: same content edges, no inner padding */
.container-n{width:100%; max-width:var(--content-max); margin-inline:auto;}
/* narrower reading measures — still centred, still the same --page-x gutter */
.container.w-600{--content-max:600px;}
.container.w-820{--content-max:820px;}
.container.w-900{--content-max:900px;}
section{padding:64px 0;}
.section-tight{padding:40px 0;}
.center{text-align:center;}

/* ---------- eyebrow / kicker ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-dark);
  border:1px solid #F3D2AC; background:#FFF6EC; padding:5px 12px; border-radius:20px; margin-bottom:16px;
}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); display:inline-block;}
.eyebrow.on-dark{color:#FFD9AE; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.06);}

.section-head{max-width:680px; margin-bottom:38px;}
.section-head h2{font-size:clamp(24px,3vw,34px); line-height:1.15;}
.section-head p{color:var(--muted); font-size:15.5px; margin-top:10px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- topbar ----------
   Full-bleed dark utility bar. It spans edge to edge so no dead space is
   left at the far left/right of a wide monitor, and the whole row is a
   wrapping flexbox — at narrow widths the groups stack instead of being
   clipped. The collapse-on-scroll used to depend on a hard-coded
   --topbar-h that had to be guessed for every wrap count; it now uses a
   0fr/1fr grid row, which animates to the bar's *real* height whatever
   that turns out to be. */
.topbar{
  background:var(--navy-900); color:#CBD8E6; font-size:12.5px;
  display:grid; grid-template-rows:1fr; opacity:1;
  transition:grid-template-rows .32s ease, opacity .28s ease;
}
body.scrolled .topbar{grid-template-rows:0fr; opacity:0;}
.tb-clip{overflow:hidden; min-height:0;}
.tb-inner{
  width:100%; max-width:calc(var(--content-max) + var(--page-x) * 2);
  margin-inline:auto; padding-inline:var(--page-x); padding-block:8px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:6px clamp(14px,1.6vw,28px);
}
.tb-left,.tb-right{display:flex; align-items:center; flex-wrap:wrap; gap:6px clamp(12px,1.2vw,20px); min-width:0;}
.tb-right{margin-left:auto;}
.topbar a{opacity:.88; transition:opacity .15s ease, color .15s ease; white-space:nowrap;}
.topbar a:hover{opacity:1; color:var(--orange);}
.tb-contact{opacity:.7 !important;}
.tb-contact:hover{opacity:1 !important;}
.worldwide-tag{
  background:rgba(245,130,32,.16); border:1px solid rgba(245,130,32,.35); border-radius:12px;
  padding:2px 10px; font-size:10.5px; color:#FFD9AE; white-space:nowrap;
}

/* ---------- header / nav ---------- */
header.site{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .25s ease;}
body.scrolled header.site{box-shadow:0 8px 24px rgba(11,42,74,.08);}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:clamp(10px,1.4vw,26px);
  /* padding-block only — the old `padding:12px 0` shorthand wiped out the
     .container side gutters, which is why the logo touched the very left
     edge of the screen and the hamburger ran off the right. */
  padding-top:var(--header-pad); padding-bottom:var(--header-pad); flex-wrap:nowrap; min-width:0;}
.brand{display:flex; align-items:center; gap:clamp(8px,.8vw,14px); flex:0 0 auto; white-space:nowrap; min-width:0;}
.brand-mark-wrap{position:relative; flex:0 0 auto; display:flex; align-items:center;}
/* height only — width follows the natural aspect ratio so the mark can
   never be squashed or clipped, at any viewport size */
/* Full ISK lockup — the circuit mark AND the 'ISK TECHNOLOGIES' wordmark
   in one image. Height-only sizing with width:auto so the artwork keeps
   its own aspect ratio and is never cropped or squashed at any width. */
.brand-logo-img{height:clamp(50px,4.9vw,84px); width:auto; max-width:none; object-fit:contain; display:block; transition:transform .2s ease;}
.brand:hover .brand-logo-img{transform:scale(1.04);}
.brand-mark{
  width:52px; height:52px; border-radius:12px; background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; color:#fff; font-size:19px; letter-spacing:.5px;
}
.brand-text{line-height:1.1;}
.brand-text b{font-family:'Space Grotesk'; font-size:clamp(15.5px,1.15vw,21px); letter-spacing:.2px; color:var(--navy); display:block; white-space:nowrap;}
.brand-text small{color:var(--muted); font-size:10px; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;}
nav.links{display:flex; gap:clamp(11px,1.15vw,22px); font-size:clamp(12.6px,.86vw,14.5px); font-weight:500; align-items:center; white-space:nowrap; flex:1 1 auto; min-width:0; justify-content:center;}
nav.links > a{opacity:.82; padding:6px 0;}
nav.links > a.active, nav.links > a:hover{opacity:1; color:var(--orange-dark);}
.has-dropdown{position:relative; display:flex; align-items:center; gap:2px;}
.dropdown-caret{
  background:none; border:none; padding:4px; color:inherit; opacity:.75; display:inline-flex;
  align-items:center; justify-content:center; border-radius:5px; transition:transform .18s ease, background .15s ease;
}
.dropdown-caret svg{width:12px; height:12px;}
.dropdown-caret:hover{background:var(--paper); opacity:1;}
.has-dropdown.open .dropdown-caret, .has-dropdown:hover .dropdown-caret{transform:rotate(180deg); opacity:1;}
/* invisible bridge so the menu survives the mouse travelling down to it */
.has-dropdown::after{content:''; position:absolute; top:100%; left:-16px; width:calc(100% + 60px); height:18px; display:none;}
.has-dropdown:hover::after, .has-dropdown.open::after{display:block;}
.dropdown{
  position:absolute; top:100%; left:-16px; background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 20px 40px rgba(11,42,74,.14); min-width:258px; padding:8px; display:none; margin-top:14px; z-index:60;
}
.has-dropdown:hover .dropdown, .has-dropdown.open .dropdown, .dropdown:hover{display:block; animation:dropIn .16s ease both;}
@keyframes dropIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
.dropdown a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:7px; font-size:13.5px; color:var(--ink);}
.dropdown a:hover{background:var(--paper); color:var(--orange-dark);}
.dropdown a .ic-svg{width:16px; height:16px; color:var(--orange-dark); flex:0 0 auto;}
.nav-actions{display:flex; align-items:center; gap:clamp(6px,.6vw,11px); flex:0 0 auto; white-space:nowrap;}
.link-accent{color:var(--orange-dark); font-weight:600;}
.btn{border:none; border-radius:8px; padding:10px 18px; font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, box-shadow .15s, background .15s;}
.btn-primary{background:var(--orange); color:#fff;}
.btn-primary:hover{background:var(--orange-dark); box-shadow:0 8px 22px rgba(245,130,32,.35); transform:translateY(-1px);}
.btn-outline{background:transparent; border:1px solid var(--navy); color:var(--navy);}
.btn-outline:hover{background:var(--navy); color:#fff; transform:translateY(-1px);}
.btn-ghost-light{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); color:#fff;}
.btn-ghost-light:hover{background:rgba(255,255,255,.18); transform:translateY(-1px);}
.btn-block{width:100%; justify-content:center;}
.btn-sm{padding:8px 13px; font-size:12.5px; border-radius:7px;}
.icon-btn{border:1px solid var(--line); background:#fff; border-radius:8px; padding:9px 12px; font-size:14px; font-weight:600; color:var(--navy); position:relative; transition:border-color .15s;}
.icon-btn:hover{border-color:var(--orange);}
.badge{position:absolute; top:-7px; right:-7px; background:var(--orange); color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px;}
.mobile-toggle{display:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff;}

/* ---------- dark tech hero ---------- */
.hero-dark{
  position:relative; overflow:hidden; color:#fff; padding:88px 0 70px;
  background:
    radial-gradient(1000px 420px at 88% -8%, rgba(245,130,32,.22), transparent 60%),
    radial-gradient(700px 380px at 10% 110%, rgba(11,85,99,.35), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy) 100%);
}
.hero-dark .grid-lines{
  position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(700px 400px at 75% 20%, black, transparent 70%);
}
.hero-dark h1{color:#fff; font-size:clamp(32px,4.4vw,50px); line-height:1.1; max-width:760px;}
.hero-dark h1 span{color:var(--orange);}
.hero-dark p.lead{color:#C9D6E4; max-width:600px; font-size:16.5px; margin-top:18px;}
.hero-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}
.hero-stats{display:flex; gap:38px; margin-top:44px; flex-wrap:wrap;}
.hero-stats div b{font-family:'Space Grotesk'; font-size:26px; display:block; color:#fff;}
.hero-stats div span{font-size:11.5px; color:#9FB1C4; text-transform:uppercase; letter-spacing:.06em;}
.hero-chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;}
.hero-chip{font-size:12px; font-family:'JetBrains Mono'; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); color:#DCE6F0; padding:7px 13px; border-radius:18px;}

/* smaller page-header dark banner for interior pages */
.page-banner{
  background:
    radial-gradient(800px 300px at 85% 0%, rgba(245,130,32,.2), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy) 100%);
  color:#fff; padding:54px 0 40px; position:relative; overflow:hidden;
}
.page-banner .grid-lines{position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:40px 40px; mask-image:radial-gradient(600px 300px at 80% 10%, black, transparent 70%);}
.page-banner h1{color:#fff; font-size:clamp(26px,3.4vw,38px);}
.breadcrumb{font-size:12.5px; color:#9FB1C4; margin-bottom:14px; font-family:'JetBrains Mono';}
.breadcrumb a{color:#CBD8E6;}
.page-banner p{color:#C9D6E4; max-width:600px; margin-top:12px; font-size:15px;}

/* ---------- capability / numbered cards (Prolines-style) ---------- */
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.cap-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; position:relative; overflow:hidden;}
.cap-card::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--orange),var(--teal));}
.cap-num{font-family:'JetBrains Mono'; font-size:12px; color:var(--orange-dark); font-weight:700; letter-spacing:.06em;}
.cap-icon{font-size:26px; margin:10px 0 12px;}
.cap-card h4{font-size:16px; margin-bottom:8px;}
.cap-card p{font-size:13.5px; color:var(--muted); margin:0;}

/* ---------- service domain cards ---------- */
.domain-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.domain-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; border-top:3px solid var(--orange); transition:transform .15s, box-shadow .15s;}
.domain-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(11,42,74,.1);}
.domain-card .ic{font-size:26px; margin-bottom:12px;}
.domain-card h3{font-size:17px; margin-bottom:8px;}
.domain-card p{font-size:13.5px; color:var(--muted); margin:0 0 14px;}
.domain-card a.more{font-size:13px; font-weight:600; color:var(--orange-dark);}

/* ---------- process steps ---------- */
.process-row{display:flex; gap:0; counter-reset:step; margin-top:10px;}
.process-step{flex:1; text-align:center; position:relative; padding:0 12px;}
.process-step:not(:last-child)::after{
  content:""; position:absolute; top:26px; left:60%; width:80%; height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px, transparent 6px 12px);
}
.process-step .n{
  width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:'Space Grotesk'; font-weight:700; margin:0 auto 12px; position:relative; z-index:2;
}
.process-step h4{font-size:14.5px; margin-bottom:6px;}
.process-step p{font-size:12.5px; color:var(--muted);}

/* ---------- generic card / list ---------- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;}
.check-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.check-list li{font-size:14px; padding-left:26px; position:relative; color:var(--ink);}
.check-list li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--teal); font-weight:700;}

/* ---------- category chips (shop) ---------- */
.chip-row{display:flex; gap:10px; flex-wrap:wrap;}
.chip{border:1px solid var(--line); background:#fff; padding:8px 16px; border-radius:20px; font-size:13.5px; font-weight:600; color:var(--muted);}
.chip.active{background:var(--navy); color:#fff; border-color:var(--navy);}

/* ---------- testimonials ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.testi-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.testi-stars{color:var(--orange); font-size:13px; margin-bottom:10px;}
.testi-card p{font-size:13.5px; color:var(--ink); font-style:italic;}
.testi-who{display:flex; align-items:center; gap:10px; margin-top:14px;}
.testi-avatar{width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:'Space Grotesk';}
.testi-who b{font-size:13px; display:block;}
.testi-who span{font-size:11.5px; color:var(--muted);}

/* ---------- industries grid ---------- */
.industry-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.industry-tile{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; text-align:center;}
.industry-tile .ic{font-size:28px; margin-bottom:10px;}
.industry-tile h4{font-size:14px;}

/* ---------- forms ---------- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--navy); margin-bottom:6px;}
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px; font-family:inherit; font-size:14px; background:#fff;
}
.field textarea{resize:vertical; min-height:100px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.three-col{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
.note{font-size:12px; color:var(--muted); margin-top:10px;}
.file-drop{border:1.5px dashed var(--line); border-radius:10px; padding:18px; text-align:center; font-size:13px; color:var(--muted); cursor:pointer;}
.file-drop:hover{border-color:var(--orange);}

/* ---------- pricing / package cards for shop ---------- */
/* auto-FIT, not auto-fill: with auto-fill a 1560px container fits five
   275px tracks, so a four-card row left a whole empty column of dead
   space on the right. auto-fit collapses the unused track. */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); gap:22px;}
.pcard{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s; animation:pcardIn .45s ease both;}
@keyframes pcardIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .pcard{animation:none;} }
.pcard:hover{transform:translateY(-4px); box-shadow:0 18px 36px rgba(11,42,74,.14);}
.pcard-media{
  aspect-ratio:16/10; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(135deg,#EEF2F6,#E3E9EF);
  background:
    radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--accent, var(--orange)) 55%, transparent) 0%, transparent 62%),
    repeating-linear-gradient(45deg, rgba(11,42,74,.035) 0 2px, transparent 2px 16px),
    linear-gradient(135deg,#EEF2F6,#E3E9EF);
}
.pcard-media::after{
  content:""; position:absolute; top:-40%; right:-20%; width:70%; height:180%;
  background:color-mix(in srgb, var(--accent, var(--orange)) 16%, transparent); transform:rotate(18deg);
}
.pcard-media .mark{position:relative; z-index:2; font-size:44px; filter:drop-shadow(0 4px 10px rgba(11,42,74,.18));}
.pcard-cat{position:absolute; top:10px; left:10px; z-index:3; background:rgba(11,42,74,.92); color:#fff; font-size:10px; font-weight:600; padding:4px 9px; border-radius:5px; text-transform:uppercase; letter-spacing:.03em;}
.pcard-badge{position:absolute; top:10px; right:10px; z-index:3; background:#fff; color:var(--teal); font-size:10px; font-weight:700; padding:4px 9px; border-radius:5px;}
.pcard-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.pcard-body h3{font-size:15.5px; line-height:1.3;}
.pcard-body .desc{font-size:12.5px; color:var(--muted); flex:1;}
.pcard-meta{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted);}
.stars{color:var(--orange); font-size:12px; letter-spacing:1px;}
.pcard-foot{display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:8px;}
.price{font-family:'JetBrains Mono'; font-weight:600; color:var(--navy); font-size:14.5px;}
.price small{display:block; font-family:'Inter'; font-weight:400; font-size:10px; color:var(--muted); text-transform:uppercase;}

/* ---------- scroll-reveal animation ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- mobile nav open state ---------- */
nav.links.mobile-open{
  display:flex !important; flex-direction:column; position:absolute; top:100%; left:0; right:0;
  background:#fff; padding:16px 24px; border-bottom:1px solid var(--line); gap:14px; z-index:60;
  box-shadow:0 14px 30px rgba(11,42,74,.12);
}

/* ---------- overlay + modal popups (login, product detail, checkout...) ----------
   These classes are used site-wide by the auth modal in the header, and by
   shop.html's cart/product/checkout modals. Missing these was the root cause
   of the login popup staying permanently visible in normal page flow. */
.overlay{
  position:fixed; inset:0; background:rgba(11,20,32,.55); z-index:200;
  display:none; opacity:0; transition:opacity .2s ease;
}
.overlay.open{display:block; opacity:1;}
.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.97);
  background:#fff; z-index:201; width:460px; max-width:92vw; max-height:88vh; overflow-y:auto;
  border-radius:14px; display:none; box-shadow:0 30px 80px rgba(0,0,0,.32);
  opacity:0; transition:opacity .18s ease, transform .18s ease;
}
.modal.open{display:block; opacity:1; transform:translate(-50%,-50%) scale(1);}
.modal-sm{width:420px;}
.modal-head{
  padding:18px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between;
  align-items:center; position:sticky; top:0; background:#fff; border-radius:14px 14px 0 0;
}
.modal-head h3{font-size:16.5px;}
.modal-body{padding:22px;}
.close-x{border:none; background:none; font-size:20px; color:var(--muted); line-height:1; cursor:pointer; padding:4px;}
.close-x:hover{color:var(--orange-dark);}
.drawer{
  position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100%; background:#fff;
  z-index:201; box-shadow:-12px 0 40px rgba(0,0,0,.2); transition:right .25s ease; display:flex; flex-direction:column;
}
.drawer.open{right:0;}

/* ---------- signed-in confirmation banner shown above submit buttons ---------- */
.signed-in-banner{
  display:flex; align-items:center; gap:10px; background:#EAF6EF; border:1px solid #BFE6CC; color:#1E8E3E;
  border-radius:8px; padding:10px 14px; font-size:12.5px; margin-bottom:14px;
}
.signed-in-banner .avatar{
  width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center;
  justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:11px; flex:0 0 auto;
}
.signed-in-banner b{color:var(--navy);}

/* ---------- moving text marquee ---------- */
.marquee-band{background:var(--navy-900); overflow:hidden; padding:10px 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);}
.marquee-track{display:flex; width:max-content; animation:marqueeScroll 150s linear infinite;}
.marquee-track span{
  color:#CBD8E6; font-family:'JetBrains Mono'; font-size:12.5px; letter-spacing:.04em; padding:0 14px;
  display:flex; align-items:center; gap:9px; white-space:nowrap;
}
.marquee-track span b{color:var(--orange); opacity:.9; font-weight:400;}
@keyframes marqueeScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ---------- floating / bobbing photo effect ---------- */
.float-img{animation:floatY 5.5s ease-in-out infinite;}
.float-img.delay-1{animation-delay:.6s;}
.float-img.delay-2{animation-delay:1.2s;}
@keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@media (prefers-reduced-motion: reduce){ .float-img{animation:none;} }

/* ---------- product photo gallery (home page) ---------- */
.photo-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.photo-tile{
  position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/3; border:1px solid var(--line); background:linear-gradient(160deg,#F7F9FC,#EDF2F8);
  box-shadow:0 10px 26px rgba(11,42,74,.08); transition:transform .25s ease, box-shadow .25s ease;
}
.photo-tile:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(11,42,74,.18);}
.photo-tile img{width:100%; height:100%; object-fit:contain; object-position:center; display:block; padding:14px 14px 34px; background:linear-gradient(160deg,#F7F9FC,#EDF2F8);}
.photo-tile .cap{
  position:absolute; left:0; right:0; bottom:0; background:linear-gradient(0deg, rgba(11,20,32,.86), transparent);
  color:#fff; font-size:12.5px; font-weight:600; padding:26px 14px 12px;
}
footer{background:var(--navy-900); color:#B9C8D8; padding:52px 0 20px; margin-top:10px;}
/* minmax(0,…) so a long link can never push a column past its share and
   force the whole page to scroll sideways on a narrow phone */
.foot-grid{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.05fr) minmax(0,1.3fr); gap:26px;}
.foot-brand{display:inline-block; margin-bottom:18px;}
.foot-brand img{height:clamp(58px,4.6vw,76px); width:auto; max-width:none; display:block; transition:transform .2s ease;}
.foot-brand:hover img{transform:scale(1.04);}
footer h4{color:#fff; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; margin-bottom:16px; font-family:'Space Grotesk',sans-serif;}
footer p{font-size:13.5px; line-height:1.7; color:#A9BACB;}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
footer li{font-size:13.5px; line-height:1.7; color:#A9BACB;}
footer a{font-size:13.5px; line-height:1.7; color:#A9BACB; transition:color .15s ease;}
footer a:hover{color:var(--orange);}
.social-row{display:flex; gap:10px; margin-top:16px;}
.social-row a{width:34px; height:34px; border:1px solid rgba(255,255,255,.18); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#CBD8E6; transition:transform .18s ease, background .18s ease;}
.social-row a .ic-svg{width:16px; height:16px;}
.social-row a:hover{background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-3px);}

/* ---------- shared inline icon set ---------- */
.ic-svg{width:20px; height:20px; display:inline-block; vertical-align:middle; flex:0 0 auto;}
.icon-btn .ic-svg{width:19px; height:19px;}
.domain-card .ic{width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#FFF2E4,#FFE3C8); color:var(--orange-dark); margin-bottom:16px;}
.domain-card .ic .ic-svg{width:26px; height:26px;}
.cap-card .cap-icon{width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--paper); color:var(--teal); margin-bottom:6px;}
.cap-card .cap-icon .ic-svg{width:22px; height:22px;}
.page-banner h1 .ic-svg{width:.85em; height:.85em; margin-right:8px; color:var(--orange); vertical-align:-.12em;}

/* ---------- page banner graphic (raster/vector heading art per page) ----------
   A soft, animated vector graphic layered into every interior page's dark
   banner so each page carries its own visual identity, not just text. */
.page-banner{position:relative; overflow:hidden;}
.banner-art{position:absolute; right:max(24px,calc((100vw - 1180px)/2)); top:50%; transform:translateY(-50%); width:216px; height:216px; max-width:26vw; opacity:.92; pointer-events:none;}
.banner-art svg{width:100%; height:100%; animation:bannerFloat 7s ease-in-out infinite;}
@keyframes bannerFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@media (max-width:1080px){ .banner-art{opacity:.35; right:16px; width:180px; height:180px;} }
@media (max-width:820px){ .banner-art{display:none;} }

/* ---------- service page feature image block ---------- */
.svc-graphic{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:linear-gradient(135deg,var(--navy-900),var(--navy)); aspect-ratio:16/10; position:relative; margin:22px 0;}
.svc-graphic svg{width:100%; height:100%; display:block;}

/* ---------- profile page ---------- */
.profile-hero{background:linear-gradient(180deg,var(--navy-900),var(--navy)); color:#fff; padding:46px 0 64px;}
.profile-id{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.profile-avatar{width:74px; height:74px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--orange-dark)); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:26px; flex:0 0 auto;}
.profile-id h1{color:#fff; font-size:26px;}
.profile-id p{color:#C9D6E4; font-size:13.5px; margin-top:4px;}
.profile-grid{display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:flex-start; margin-top:-40px;}
@media (max-width:860px){ .profile-grid{grid-template-columns:1fr; margin-top:-20px;} }
.profile-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:0 20px 46px rgba(11,42,74,.1);}
.profile-card h3{font-size:15px; margin-bottom:14px;}
.profile-stat-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.profile-stat-row:last-child{border-bottom:none;}
.profile-stat-row span:first-child{color:var(--muted);}
.profile-tabs{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.profile-tabs button{background:#fff; border:1px solid var(--line); padding:9px 16px; border-radius:20px; font-size:13px; font-weight:600; color:var(--muted);}
.profile-tabs button.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.order-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:12px; display:flex; justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap;}
.order-card .oc-main b{display:block; font-size:14px; color:var(--navy);}
.order-card .oc-main span{font-size:12px; color:var(--muted);}
.empty-state{text-align:center; padding:40px 20px; color:var(--muted); font-size:13.5px;}
.field-row{display:flex; gap:10px; align-items:center; margin-bottom:12px;}

/* ---------- warning banner (profile.html server-sync notices) ---------- */
.warn-banner{background:#FFF2CC; color:#6B4E00; font-size:12.5px; padding:12px 14px; border-radius:8px; margin-bottom:14px; border:1px solid #F3D2AC;}

/* ---------- WhatsApp floating chat button (site-wide) ---------- */
.whatsapp-fab{
  position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.28); z-index:150; transition:transform .2s ease, box-shadow .2s ease;
  animation:fabPulse 2.6s ease-in-out infinite;
}
.whatsapp-fab svg{width:28px; height:28px; color:#fff;}
.whatsapp-fab:hover{transform:scale(1.08); box-shadow:0 14px 32px rgba(0,0,0,.32);}
@keyframes fabPulse{ 0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.5);} 50%{box-shadow:0 10px 26px rgba(0,0,0,.28), 0 0 0 10px rgba(37,211,102,0);} }
@media (max-width:560px){ .whatsapp-fab{width:48px; height:48px; right:14px; bottom:14px;} .whatsapp-fab svg{width:23px; height:23px;} }

/* ---------- topbar WhatsApp + social ---------- */
.tb-social{
  display:inline-flex; align-items:center; gap:10px;
  padding-left:clamp(12px,1.2vw,20px); border-left:1px solid rgba(255,255,255,.18);
}
.tb-social a{opacity:.85; display:inline-flex;}
.tb-social a:hover{opacity:1; color:var(--orange);}
.tb-social .ic-svg{width:13px; height:13px;}
.tb-whatsapp{
  display:inline-flex; align-items:center; gap:6px; color:#8CE6B0 !important; font-weight:600;
  padding:3px 11px; border-radius:20px; background:rgba(37,211,102,.12);
  border:1px solid rgba(37,211,102,.32); opacity:1 !important;
}
.tb-whatsapp:hover{background:rgba(37,211,102,.2); color:#A8F0C6 !important;}
.tb-whatsapp .ic-svg{width:14px; height:14px;}

/* ---------- homepage hero globe + orbiting flags ---------- */
.hero-dark{position:relative; overflow:hidden;}
/* size scales smoothly with the viewport (clamp) instead of a single fixed
   320px box, so the whole globe+flags widget adjusts itself automatically
   across laptop / desktop / ultrawide screens */
.hero-globe{
  position:absolute; right:100px; top:50%; transform:translateY(-50%);
  width:clamp(260px,26vw,460px); height:clamp(260px,26vw,460px);
  pointer-events:none; opacity:.97;
}
.globe-core{position:absolute; inset:26%; border-radius:50%; overflow:hidden; box-shadow:0 0 50px rgba(245,130,32,.22) inset, 0 0 40px rgba(0,0,0,.4);}
.globe-core svg{width:100%; height:100%; animation:globeSpin 34s linear infinite;}
@keyframes globeSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* dashed guide circles only — the real motion is driven by JS (per-flag
   position each frame) in isk-common.js so the rings themselves stay static */
.flag-ring{position:absolute; top:50%; left:50%; border-radius:50%; border:1px dashed rgba(255,255,255,.16); transform:translate(-50%,-50%);}
.flag-ring--a{width:56%; height:56%;}
.flag-ring--b{width:80%; height:80%;}
.flag-ring--c{width:106%; height:106%;}

/* each real country flag (served from flagcdn.com), evenly spaced per ring —
   spacing is computed in JS as 360deg / flag count, so it is always exact
   regardless of how many countries are listed */
.flag-chip{
  position:absolute; top:0; left:0;
  width:18px; height:18px; border-radius:50%;
  background:var(--navy-900,#0B2A4A);
  padding:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.45);
  will-change:transform;
  transition:box-shadow .2s ease;
}
.flag-ring--a .flag-chip{width:15px; height:15px;}
.flag-ring--b .flag-chip{width:18px; height:18px;}
.flag-ring--c .flag-chip{width:21px; height:21px;}
.flag-chip img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
.flag-chip:hover{box-shadow:0 0 0 2px var(--orange,#F58220), 0 4px 12px rgba(0,0,0,.5); z-index:5;}

@media (max-width:1100px){ .hero-globe{display:none;} }

/* ---------- animations: counters + gentle emphasis ---------- */
@keyframes popIn{ from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);} }
.kpi-card, .order-card, .profile-card{animation:popIn .4s ease both;}
.dropdown-caret svg, .banner-art svg{transition:transform .2s ease;}

.foot-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding-top:18px; font-size:12.5px; line-height:1.7; display:flex; align-items:center; justify-content:space-between; color:#7E93A8; flex-wrap:wrap; gap:10px;}
.foot-bottom a, .foot-bottom span{font-size:12.5px; line-height:1.7; color:#7E93A8;}
.foot-bottom .legal-links{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.foot-bottom a:hover{color:#fff;}

/* ---------- misc ---------- */
.divider-circuit{height:1px; background:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);}
.tag-pill{display:inline-block; background:#EEF2F6; color:var(--navy); font-size:11px; font-weight:600; padding:5px 10px; border-radius:6px; margin:0 6px 6px 0;}
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#fff; padding:13px 22px; border-radius:8px; font-size:13.5px; z-index:200; opacity:0; pointer-events:none; transition:all .25s; box-shadow:0 10px 30px rgba(0,0,0,.25);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.map-wrap{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line); padding:16px 0;}
.faq-item summary{cursor:pointer; font-weight:600; font-size:14.5px; color:var(--navy); list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:20px; color:var(--orange);}
.faq-item[open] summary::after{content:"−";}
.faq-item p{font-size:13.5px; color:var(--muted); margin-top:10px;}

/* =====================================================================
   RESPONSIVE SCALE
   The layout is driven by two custom properties (--container, --gutter)
   so that everything — header, sections, footer — widens together on a
   big monitor and narrows together on a small laptop. No fixed 1240px
   ceiling, no hard-coded pixel gutters.
===================================================================== */
@media (min-width:1500px){ :root{ --header-pad:14px; } }
@media (min-width:2400px){ :root{ --content-max:1880px; } }
@media (min-width:3000px){ :root{ --content-max:2100px; } }

/* --- nav squeeze band: shrink the menu before we ever let it overlap --- */
@media (max-width:1400px){
  nav.links{gap:13px;}
}
@media (max-width:1290px){
  nav.links{gap:11px; font-size:12.8px;}
  .nav-actions .btn-sm{padding:8px 12px;}
}

/* Brand + 8 links + 3 actions genuinely stop fitting around here, so the
   hamburger takes over BEFORE anything wraps or collides. */
@media (max-width:1150px){
  nav.links{display:none;}
  .mobile-toggle{display:block;}
  .cap-grid, .domain-grid, .testi-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1000px){
  nav.links{display:none;}
  .mobile-toggle{display:block;}
  .cap-grid, .domain-grid, .testi-grid{grid-template-columns:repeat(2,1fr);}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .process-row{flex-direction:column; gap:26px;}
  .process-step::after{display:none;}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .two-col, .three-col{grid-template-columns:1fr;}
  .photo-gallery{grid-template-columns:repeat(2,1fr);}
  .chart-grid, .kpi-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .tb-inner{justify-content:center; row-gap:7px;}
  .tb-left,.tb-right{justify-content:center; width:100%;}
  .tb-right{margin-left:0;}
  .worldwide-tag{display:none;}
  .tb-social{padding-left:0; border-left:none;}
  .nav-row{flex-wrap:wrap; gap:10px;}
  .nav-actions{gap:6px;}
  .nav-actions .btn-sm{padding:8px 10px; font-size:12px;}
  #accountLabel{display:none;}
  .modal, .modal-sm{width:94vw;}
}
@media (max-width:900px){
  .svc-graphic{aspect-ratio:16/9;}
}
@media (max-width:480px){
  .foot-grid{grid-template-columns:1fr; gap:22px;}
}
@media (max-width:560px){
  :root{ --header-pad:10px; }
  .cap-grid, .domain-grid, .testi-grid, .industry-grid{grid-template-columns:1fr;}
  .photo-gallery{grid-template-columns:1fr;}
  .kpi-grid, .chart-grid{grid-template-columns:1fr;}
  .marquee-track span{font-size:11px; padding:0 18px;}
  .topbar{font-size:11.8px;}
  .tb-contact[href^="tel"]{display:none;}
  .tbw-label{display:none;}
}

/* ================= REGISTRATIONS & COMPLIANCE ================= */
.reg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.reg-card{
  --tint:#F1F5FA; --tint-line:#D5E1EE; --tint-ink:#1B4F80;
  position:relative; display:flex; align-items:center; gap:15px; padding:18px 20px;
  background:var(--tint); border:1px solid var(--tint-line); border-radius:14px; overflow:hidden;
  box-shadow:0 6px 18px rgba(11,42,74,.06); transition:transform .25s ease, box-shadow .25s ease;
}
.reg-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tint-ink); opacity:.55;}
.reg-card::after{content:''; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:var(--tint-ink); opacity:.05;}
.reg-card:hover{transform:translateY(-5px); box-shadow:0 20px 40px rgba(11,42,74,.14);}
.reg-t1{--tint:#EEF4FB; --tint-line:#C9DDF0; --tint-ink:#1B4F80;}
.reg-t2{--tint:#EBF7F5; --tint-line:#C2E5DF; --tint-ink:#0F6F63;}
.reg-t3{--tint:#FDF5E9; --tint-line:#F0DCBC; --tint-ink:#8E5F12;}
.reg-t4{--tint:#F3F1FB; --tint-line:#D9D3F0; --tint-ink:#4B3A8C;}
.reg-t5{--tint:#FDF0F2; --tint-line:#F4CFD6; --tint-ink:#97253C;}
.reg-t6{--tint:#EFF8EE; --tint-line:#CDE7CB; --tint-ink:#25692C;}
.reg-t7{--tint:#EAF6FB; --tint-line:#C3E2EF; --tint-ink:#10627E;}
.reg-t8{--tint:#F7F4EB; --tint-line:#E4DCC6; --tint-ink:#6B5A2A;}
.reg-t9{--tint:#EFF2F7; --tint-line:#D2DBE7; --tint-ink:#2F4A6B;}
.reg-badge{
  flex:0 0 auto; width:62px; height:62px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--tint-line); box-shadow:0 3px 10px rgba(11,42,74,.07);
  overflow:hidden; position:relative; z-index:1;
}
.reg-badge img{width:100%; height:100%; object-fit:contain; padding:6px; display:block;}
.reg-badge .reg-abbr{
  font-family:'Space Grotesk'; font-weight:700; font-size:15px; color:var(--tint-ink); letter-spacing:.4px; text-align:center; line-height:1.05;
}
.reg-badge .reg-abbr small{display:block; font-size:8px; letter-spacing:.1em; color:var(--tint-ink); opacity:.7; font-weight:600; margin-top:3px;}
.reg-body{min-width:0; position:relative; z-index:1;}
.reg-body h4{font-size:14px; color:var(--navy); line-height:1.35; margin-bottom:3px;}
.reg-body .reg-auth{display:block; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--tint-ink); opacity:.78; font-weight:600;}
.reg-note{
  margin-top:22px; max-width:none; display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:10px;
  background:rgba(11,42,74,.04); border:1px solid var(--line); font-size:13px; color:var(--muted);
}
.reg-note svg{flex:0 0 auto; width:18px; height:18px; color:var(--orange-dark); margin-top:1px;}
@media (max-width:900px){ .reg-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .reg-grid{grid-template-columns:1fr;} }

/* ================= COURSE CATALOGUE (training page) ================= */
.course-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; margin-top:6px;}
.course-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 26px rgba(11,42,74,.07); transition:transform .25s ease, box-shadow .25s ease;
}
.course-card:hover{transform:translateY(-5px); box-shadow:0 22px 44px rgba(11,42,74,.16);}
.course-top{background:linear-gradient(135deg,var(--navy-900),var(--navy)); color:#fff; padding:16px 18px;}
.course-top .course-tag{
  display:inline-block; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  background:rgba(245,130,32,.2); border:1px solid rgba(245,130,32,.45); color:#FFD9AE; border-radius:20px; padding:3px 10px; margin-bottom:9px;
}
.course-top h3{font-size:16.5px; color:#fff; line-height:1.3;}
.course-meta{display:flex; flex-wrap:wrap; gap:8px; padding:14px 18px 0;}
.course-meta span{
  font-size:11px; color:var(--navy); background:var(--paper); border:1px solid var(--line);
  border-radius:20px; padding:4px 10px; display:inline-flex; align-items:center; gap:5px;
}
.course-body{padding:12px 18px 0; flex:1;}
.course-body p{font-size:13.5px; color:var(--muted); line-height:1.6;}
.course-body h5{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-dark); margin:14px 0 8px;}
.course-mods{list-style:none; padding:0; margin:0; display:grid; gap:6px;}
.course-mods li{position:relative; padding-left:20px; font-size:13px; color:var(--ink); line-height:1.5;}
.course-mods li::before{
  content:''; position:absolute; left:0; top:6px; width:8px; height:8px; border-radius:2px;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
}
.course-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:16px 18px; margin-top:16px; border-top:1px solid var(--line); background:var(--paper);
}
.course-price{font-family:'Space Grotesk'; font-weight:700; font-size:17px; color:var(--navy); line-height:1.1;}
.course-price small{display:block; font-family:'Inter'; font-weight:500; font-size:10.5px; color:var(--muted); letter-spacing:.04em; margin-top:2px;}
@media (max-width:860px){ .course-grid{grid-template-columns:1fr;} }

/* ================= LEADERSHIP TEAM ================= */
.team-lead{
  display:grid; grid-template-columns:260px 1fr; gap:30px; align-items:start;
  background:linear-gradient(135deg,#F4F8FC,#EAF1F8); border:1px solid var(--line);
  border-radius:18px; padding:26px; margin-bottom:24px; position:relative; overflow:hidden;
}
.team-lead::after{content:''; position:absolute; right:-70px; top:-70px; width:240px; height:240px; border-radius:50%; background:var(--orange); opacity:.07;}
.team-photo{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  background:linear-gradient(150deg,var(--navy),var(--navy-900)); box-shadow:0 14px 34px rgba(11,42,74,.22);
}
.team-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; display:block; z-index:1;}
.team-photo .team-initials{
  position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:38px; color:#fff; letter-spacing:1px;
}
.team-linkedin{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:8px 16px;
  background:#fff; border:1px solid var(--line); border-radius:8px; font-size:13px; font-weight:600;
  color:var(--navy); transition:background .18s ease, color .18s ease, transform .18s ease;
}
.team-linkedin svg{width:16px; height:16px; fill:currentColor;}
.team-linkedin:hover{background:#0A66C2; border-color:#0A66C2; color:#fff; transform:translateY(-2px);}
.team-lead .team-info{position:relative; z-index:1;}
.team-lead .team-role{
  display:inline-block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--orange-dark); background:rgba(245,130,32,.12); border:1px solid rgba(245,130,32,.3);
  border-radius:20px; padding:4px 12px; margin-bottom:12px;
}
.team-lead h3{font-size:24px; color:var(--navy); margin-bottom:6px;}
.team-lead .team-sub{font-size:13px; color:var(--muted); margin-bottom:12px;}
.team-lead p{font-size:14.5px; color:var(--ink); line-height:1.75; max-width:700px; margin-bottom:12px;}
.team-lead p:last-of-type{margin-bottom:0;}
.team-lead-aside{display:flex; flex-direction:column; gap:0; position:relative; z-index:1;}
.team-lead-aside .team-linkedin{margin-top:14px; justify-content:center;}

/* CEO pull-quote — the founding mission line, lifted out of the body copy */
.ceo-quote{
  margin:0 0 16px; padding:2px 0 2px 18px; border-left:3px solid var(--orange);
  font-family:'Space Grotesk',sans-serif; font-size:clamp(15.5px,1.15vw,18px); line-height:1.55;
  color:var(--navy); font-weight:500; max-width:700px;
}

/* CEO credential strip */
.ceo-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0 4px;
  padding:16px 0; border-top:1px solid rgba(11,42,74,.12); border-bottom:1px solid rgba(11,42,74,.12);
}
.ceo-stats div{display:flex; flex-direction:column; gap:3px; min-width:0;}
.ceo-stats b{font-family:'Space Grotesk',sans-serif; font-size:clamp(15px,1.15vw,18px); color:var(--navy); line-height:1.15;}
.ceo-stats span{font-size:11.5px; color:var(--muted); line-height:1.35;}
@media (max-width:860px){ .ceo-stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;} }
.team-creds{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.team-creds span{
  font-size:11.5px; color:var(--navy); background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:5px 12px;
}

.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.team-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; text-align:center;
  box-shadow:0 8px 22px rgba(11,42,74,.06); transition:transform .25s ease, box-shadow .25s ease;
}
.team-card:hover{transform:translateY(-5px); box-shadow:0 20px 38px rgba(11,42,74,.14);}
.team-card .team-photo{width:88px; height:88px; aspect-ratio:auto; border-radius:50%; margin:0 auto 14px; box-shadow:0 8px 20px rgba(11,42,74,.18);}
.team-card .team-initials{font-size:24px;}
.team-card h4{font-size:15px; color:var(--navy); margin-bottom:4px;}
.team-card .team-role-sm{
  display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--orange-dark);
}
.team-card p{font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:10px;}
@media (max-width:1000px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:760px){
  .team-lead{grid-template-columns:1fr;}
  .team-lead-aside{align-items:center;}
  .team-lead .team-photo{max-width:220px; width:100%;}
  .team-lead-aside .team-linkedin{align-self:center;}
}
@media (max-width:520px){ .team-grid{grid-template-columns:1fr;} }

/* ================= TRAINING PARTNER ================= */
.partner-band{
  display:grid; grid-template-columns:1fr 300px; gap:34px; align-items:center;
  background:linear-gradient(135deg,var(--navy-900),var(--navy)); color:#fff;
  border-radius:18px; padding:34px 36px; position:relative; overflow:hidden;
}
.partner-band::after{content:''; position:absolute; right:-90px; bottom:-90px; width:300px; height:300px; border-radius:50%; background:var(--orange); opacity:.12;}
.partner-band .eyebrow{color:#FFD9AE; border-color:rgba(245,130,32,.45); background:rgba(245,130,32,.14);}
.partner-band h2{color:#fff; font-size:clamp(21px,2.4vw,28px); margin-bottom:12px;}
.partner-band p{color:#C9D6E4; font-size:14.5px; line-height:1.7; max-width:620px;}
.partner-points{list-style:none; padding:0; margin:18px 0 22px; display:grid; gap:9px;}
.partner-points li{position:relative; padding-left:26px; font-size:13.5px; color:#DCE8F4; line-height:1.6;}
.partner-points li::before{
  content:''; position:absolute; left:0; top:5px; width:14px; height:14px; border-radius:50%;
  background:rgba(245,130,32,.25); border:1.5px solid var(--orange);
}
.partner-card{
  position:relative; z-index:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22);
  border-radius:14px; padding:22px; text-align:center; backdrop-filter:blur(4px);
}
.partner-logo{
  width:74px; height:74px; margin:0 auto 14px; border-radius:16px; background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.partner-logo img{width:100%; height:100%; object-fit:contain; padding:8px;}
.partner-logo .partner-abbr{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:var(--navy); letter-spacing:.5px;}
.partner-card b{display:block; font-size:15px; color:#fff; margin-bottom:4px;}
.partner-card span{display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#9FB9D2; margin-bottom:14px;}
.partner-accred{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:16px;}
.partner-accred i{
  font-style:normal; font-size:10.5px; letter-spacing:.05em; color:#DCE8F4;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:4px 10px;
}
@media (max-width:900px){ .partner-band{grid-template-columns:1fr; padding:26px 24px;} }

/* ================= TESTIMONIALS (refined) ================= */
.testi-card{position:relative; display:flex; flex-direction:column;}
.testi-card p{flex:1;}
.testi-quote{
  position:absolute; top:14px; right:18px; font-family:Georgia,serif; font-size:52px; line-height:1;
  color:var(--orange); opacity:.16; pointer-events:none;
}
.testi-src{
  display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:10.5px; letter-spacing:.05em;
  color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:3px 9px;
}
.testi-src b{font-weight:600; color:var(--navy);}

/* =====================================================================
   SEQUENTIAL LIGHT COLOUR PATTERN
   Client request: "Our Four Service Areas", "Why Grow With ISK
   Technologies" and "Client Feedback" should run through a repeating
   sequence of soft tints instead of a flat white grid — same tint system
   already used by the Registrations & Compliance cards on About Us.

   Each card sets three custom properties:
     --tint       card background (very light)
     --tint-line  border
     --tint-ink   accent used for the rail, icon and headings
   Contrast of --tint-ink on --tint is kept above 7:1 so body copy and
   headings stay fully readable.
===================================================================== */
.tone-1{ --tint:#EEF4FB; --tint-line:#CBDDF0; --tint-ink:#17537F; --tint-soft:#DCE9F7; }
.tone-2{ --tint:#EAF7F4; --tint-line:#C2E4DD; --tint-ink:#0F6A5F; --tint-soft:#D5EDE7; }
.tone-3{ --tint:#FDF4E8; --tint-line:#F0DBBA; --tint-ink:#8C5A10; --tint-soft:#F8E6CD; }
.tone-4{ --tint:#F2F0FB; --tint-line:#D8D2F0; --tint-ink:#493788; --tint-soft:#E5E0F6; }
.tone-5{ --tint:#FDEFF1; --tint-line:#F4CDD5; --tint-ink:#93233A; --tint-soft:#F8DEE3; }
.tone-6{ --tint:#EEF8ED; --tint-line:#CCE6CA; --tint-ink:#23652A; --tint-soft:#DFF0DD; }

/* ---------- Our Four Service Areas ---------- */
.domain-card{
  background:var(--tint,#fff); border:1px solid var(--tint-line,var(--line));
  border-top:3px solid var(--tint-ink,var(--orange));
  position:relative; overflow:hidden;
}
.domain-card::after{
  content:''; position:absolute; right:-46px; top:-46px; width:130px; height:130px;
  border-radius:50%; background:var(--tint-ink,var(--orange)); opacity:.05; pointer-events:none;
}
.domain-card:hover{box-shadow:0 16px 34px rgba(11,42,74,.12);}
.domain-card .ic{
  background:#fff; border:1px solid var(--tint-line,var(--line));
  color:var(--tint-ink,var(--orange-dark));
  box-shadow:0 3px 10px rgba(11,42,74,.06);
}
.domain-card h3{color:var(--tint-ink,var(--navy)); position:relative; z-index:1;}
.domain-card p{color:var(--muted); position:relative; z-index:1;}
.domain-card a.more{color:var(--tint-ink,var(--orange-dark)); position:relative; z-index:1;}

/* ---------- Why Grow With ISK Technologies (capability cards) ---------- */
.cap-card{
  background:var(--tint,#fff); border:1px solid var(--tint-line,var(--line));
}
.cap-card::before{background:var(--tint-ink,var(--orange)); opacity:.85;}
.cap-card::after{
  content:''; position:absolute; right:-44px; bottom:-44px; width:120px; height:120px;
  border-radius:50%; background:var(--tint-ink,var(--orange)); opacity:.05; pointer-events:none;
}
.cap-num{color:var(--tint-ink,var(--orange-dark)); position:relative; z-index:1;}
.cap-card .cap-icon{
  background:#fff; border:1px solid var(--tint-line,var(--line));
  color:var(--tint-ink,var(--teal)); position:relative; z-index:1;
  box-shadow:0 3px 10px rgba(11,42,74,.06);
}
.cap-card h4{color:var(--tint-ink,var(--navy)); position:relative; z-index:1;}
.cap-card p{position:relative; z-index:1;}

/* ---------- Client Feedback ---------- */
.testi-card{
  background:var(--tint,#fff); border:1px solid var(--tint-line,var(--line));
  border-top:3px solid var(--tint-ink,var(--orange));
}
.testi-card .testi-quote{color:var(--tint-ink,var(--orange)); opacity:.18;}
.testi-card .testi-stars{color:var(--orange);}
.testi-card .testi-avatar{background:var(--tint-ink,var(--navy));}
.testi-card .testi-who b{color:var(--tint-ink,var(--navy));}
.testi-card .testi-src{
  background:#fff; border-color:var(--tint-line,var(--line)); color:var(--muted);
}
.testi-card .testi-src b{color:var(--tint-ink,var(--navy));}

/* =====================================================================
   RESPONSIVE GRID UTILITIES
   These replace hard-coded inline `grid-template-columns` values that
   used to stay 2- or 3-up right down to a 390px phone and pushed the
   page sideways. They now step down cleanly at every breakpoint.
===================================================================== */
.g-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));}
.g-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));}
.g-split{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);}
@media (max-width:1000px){
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g-split{grid-template-columns:minmax(0,1fr); gap:28px !important;}
}
@media (max-width:720px){
  .g-2, .g-3{grid-template-columns:minmax(0,1fr);}
}
/* the old inline-style escape hatch is no longer needed */

/* =====================================================================
   CARD TEXT ALIGNMENT
   Cards in a row hold different amounts of copy, which used to leave the
   icons, headings and "Explore →" links sitting at different heights.
   Making each card a flex column and letting the paragraph absorb the
   slack puts every heading on one line and every CTA on a shared baseline.
===================================================================== */
.domain-card, .cap-card, .testi-card, .industry-card{
  display:flex; flex-direction:column; text-align:left;
}
.domain-card p, .cap-card p, .testi-card p{flex:1 1 auto;}
.domain-card a.more{margin-top:auto; align-self:flex-start;}
.testi-card .testi-who{margin-top:14px;}
.testi-card .testi-src{align-self:flex-start;}
/* headings never orphan a single word onto their own line */
.domain-card h3, .cap-card h4{text-wrap:balance; hyphens:none;}
.section-head h2, .section-head p{text-wrap:balance;}
.section-head.center{max-width:min(760px,100%);}
.nb{white-space:nowrap; display:inline-flex; align-items:center; gap:4px;}
.domain-card a.more{display:inline-block; line-height:1.5;}

/* --topbar-h is gone: .topbar now clips with a 0fr/1fr grid row, so it
   collapses from whatever height it actually has at that width. */

/* =====================================================================
   LARGE-SCREEN TYPE & SPACING SCALE
   On a 1920px+ monitor the old fixed type sizes left the page looking
   like a small site stranded in a big window. Type, card padding and
   section rhythm now step up with the viewport, in step with the
   --container growth above.
===================================================================== */
@media (min-width:1500px){
  /* the header runs edge-to-edge now, so let the menu breathe into it
     instead of huddling in the middle of a very wide bar */
  nav.links{gap:clamp(20px,1.9vw,40px); font-size:15px;}
  section{padding:74px 0;}
  .hero-dark p.lead{font-size:17.5px; max-width:660px;}
  .section-head h2{font-size:clamp(30px,2.4vw,40px);}
  .section-head p{font-size:16.5px;}
  .section-head.center{max-width:min(820px,100%);}
}
@media (min-width:1750px){
  section{padding:84px 0;}
  .hero-dark{padding:104px 0 84px;}
  .hero-dark h1{font-size:clamp(50px,3.3vw,62px); max-width:900px;}
  .hero-dark p.lead{font-size:18.5px; max-width:720px;}
  .hero-stats div b{font-size:30px;}
  .hero-stats div span{font-size:12.5px;}
  .section-head h2{font-size:clamp(36px,2.4vw,46px);}
  .section-head p{font-size:17px;}
  .section-head.center{max-width:min(900px,100%);}
  .domain-card, .cap-card, .testi-card{padding:30px;}
  .domain-card h3{font-size:19px;}
  .cap-card h4{font-size:17.5px;}
  .domain-card p, .cap-card p, .testi-card p{font-size:14.8px;}
  .domain-card a.more{font-size:14px;}
  .foot-grid{gap:34px;}
}
@media (min-width:2400px){
  section{padding:100px 0;}
  .hero-dark{padding:128px 0 104px;}
  .hero-dark p.lead{font-size:19.5px; max-width:780px;}
  .domain-card p, .cap-card p, .testi-card p{font-size:15.5px;}
  .topbar{font-size:13.5px;}
  .marquee-track span{font-size:13.5px;}
}

/* =====================================================================
   KLEVO SHOE SOLE CLEANING MACHINES
   Product page (klevo.html), the home-page advertisement band and the
   first-visit advertisement popup. Built on the same tokens as the rest
   of the site — navy/orange, --line borders, --radius corners — so the
   Klevo range reads as part of ISK, not a bolted-on microsite.
===================================================================== */

/* ---------- distributor strip: the one credibility line ---------- */
.klevo-authorized{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(245,130,32,.10),rgba(11,85,99,.08));
  border:1px solid #F3D2AC; border-radius:var(--radius); padding:16px 20px;
}
.klevo-authorized .ka-badge{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--orange); color:#fff; padding:6px 12px; border-radius:20px; white-space:nowrap; font-weight:700;
}
.klevo-authorized p{margin:0; font-size:14px; color:var(--ink);}
.klevo-authorized strong{color:var(--navy);}

/* ---------- series cards ----------
   Three product families sit side by side and are compared against each
   other, so the media box is a fixed aspect ratio and the body is a flex
   column: headings, chips and the footer line up across all three cards
   no matter how much copy each one carries. */
.series-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
.series-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
}
.series-card:hover{transform:translateY(-5px); box-shadow:0 20px 42px rgba(11,42,74,.15);}
.series-media{
  position:relative; aspect-ratio:16/11; background:linear-gradient(160deg,#F7F9FC,#E9EFF6);
  border-bottom:1px solid var(--line); overflow:hidden;
}
.series-media img{width:100%; height:100%; object-fit:contain; padding:18px; transition:transform .35s ease;}
.series-card:hover .series-media img{transform:scale(1.04);}
.series-tag{
  position:absolute; top:12px; left:12px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:.06em; color:#fff; background:var(--navy); padding:5px 11px; border-radius:16px;
}
.series-card.rec .series-tag{background:var(--orange);}
.series-rec{
  position:absolute; top:12px; right:12px; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; background:#0B5563; color:#fff; padding:5px 10px; border-radius:16px;
}
.series-body{padding:24px; display:flex; flex-direction:column; flex:1 1 auto;}
.series-body h3{font-size:19px; margin-bottom:4px;}
.series-sub{font-size:12.5px; color:var(--orange-dark); font-family:'JetBrains Mono',monospace; margin-bottom:12px;}
.series-body > p{font-size:14px; color:var(--muted); margin:0 0 16px; flex:1 1 auto;}
.series-specs{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:8px;}
.series-specs li{
  display:flex; justify-content:space-between; gap:12px; font-size:12.8px;
  border-bottom:1px dashed var(--line); padding-bottom:7px;
}
.series-specs li:last-child{border-bottom:none; padding-bottom:0;}
.series-specs .k{color:var(--muted);}
.series-specs .v{color:var(--navy); font-weight:600; text-align:right;}
.series-foot{display:flex; gap:10px; flex-wrap:wrap;}
.series-foot .btn{flex:1 1 auto; justify-content:center;}

/* ---------- specification tables ----------
   Model tables are wider than a phone. Each one scrolls inside its own
   box rather than pushing the page sideways, and the header row stays
   put while a long table scrolls vertically. */
.spec-wrap{
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.spec-table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px;}
.spec-table caption{
  caption-side:top; text-align:left; padding:16px 20px 12px; font-family:'Space Grotesk',sans-serif;
  font-weight:600; color:var(--navy); font-size:15px; border-bottom:1px solid var(--line);
}
.spec-table th, .spec-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line);}
.spec-table thead th{
  background:var(--navy); color:#fff; font-family:'JetBrains Mono',monospace; font-weight:500;
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  position:sticky; top:0; z-index:2;
}
.spec-table tbody tr:last-child td{border-bottom:none;}
.spec-table tbody tr:nth-child(even){background:#FAFCFE;}
.spec-table tbody tr:hover{background:#FFF6EC;}
.spec-table td:first-child{font-weight:600; color:var(--navy); white-space:nowrap;}
.spec-table .mono{font-family:'JetBrains Mono',monospace; font-size:12.5px;}
/* two-column key/value variant used for the shared technical specs */
.spec-table.kv{min-width:0;}
.spec-table.kv td:first-child{width:44%; color:var(--muted); font-weight:500; white-space:normal;}
.spec-table.kv td:last-child{font-weight:600; color:var(--navy);}
.scroll-hint{font-size:11.5px; color:var(--muted); font-family:'JetBrains Mono',monospace; margin:8px 0 0;}

/* ---------- how it works: numbered flow ---------- */
.klevo-flow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;}
.flow-step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:relative;}
.flow-step::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--orange),var(--teal));}
.flow-step .fn{
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--orange-dark); letter-spacing:.06em;
}
.flow-step h4{font-size:15.5px; margin:8px 0 6px;}
.flow-step p{font-size:13.2px; color:var(--muted); margin:0;}

/* ---------- split feature rows (alternating image / copy) ---------- */
.klevo-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:center;}
.klevo-split.flip .ks-media{order:2;}
.ks-media{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:0 16px 38px rgba(11,42,74,.12);}
.ks-media img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;}

/* ---------- home-page advertisement band ----------
   Full-bleed dark band so the Klevo range is unmissable on the home page
   without competing with the hero. */
.klevo-ad{position:relative; overflow:hidden; background:linear-gradient(135deg,var(--navy-900),var(--navy) 55%,var(--teal)); color:#fff; padding:0;}
.klevo-ad .grid-lines{
  position:absolute; inset:0; opacity:.13; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(700px 380px at 82% 15%, black, transparent 70%);
}
.klevo-ad-inner{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:52px; align-items:center; padding:66px 0;}
.klevo-ad h2{color:#fff; font-size:clamp(25px,3.1vw,36px); line-height:1.16; margin-bottom:14px;}
.klevo-ad p.lead{color:#C9D6E4; font-size:15.5px; margin:0 0 22px; max-width:520px;}
.klevo-ad-points{list-style:none; padding:0; margin:0 0 26px; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px;}
.klevo-ad-points li{font-size:13.5px; color:#DCE6F0; padding-left:24px; position:relative;}
.klevo-ad-points li::before{content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:700;}
.klevo-ad-cta{display:flex; gap:12px; flex-wrap:wrap;}
.klevo-ad-shots{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.klevo-ad-shots figure{
  margin:0; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.22); box-shadow:0 16px 34px rgba(0,0,0,.28);
}
.klevo-ad-shots img{width:100%; aspect-ratio:3/4; object-fit:contain; padding:12px; background:#fff;}
.klevo-ad-shots figcaption{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.05em; text-align:center;
  padding:7px 4px 9px; color:var(--navy); background:#fff; border-top:1px solid var(--line); font-weight:600;
}
.klevo-ad-note{
  margin-top:20px; font-size:12px; color:#9FB1C4; font-family:'JetBrains Mono',monospace;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* ---------- first-visit advertisement popup ----------
   Wider than the site's standard .modal because it is a picture-led ad,
   not a form. It reuses .overlay for the scrim so only one dimming layer
   ever exists on the page. */
.ad-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96);
  width:860px; max-width:94vw; max-height:90vh; overflow-y:auto; z-index:201;
  background:#fff; border-radius:16px; box-shadow:0 40px 100px rgba(0,0,0,.42);
  display:none; opacity:0; transition:opacity .22s ease, transform .22s ease;
}
.ad-modal.open{display:block; opacity:1; transform:translate(-50%,-50%) scale(1);}
.ad-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr);}
.ad-visual{
  position:relative; background:linear-gradient(150deg,var(--navy-900),var(--navy) 60%,var(--teal));
  padding:30px 26px; display:flex; flex-direction:column; justify-content:center; gap:14px;
  border-radius:16px 0 0 16px;
}
.ad-visual img{
  width:100%; border-radius:10px; background:#fff; padding:10px;
  box-shadow:0 14px 30px rgba(0,0,0,.3); aspect-ratio:4/3; object-fit:contain;
}
.ad-visual .ad-thumbs{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ad-visual .ad-thumbs img{aspect-ratio:1/1; padding:6px;}
.ad-body{padding:34px 32px 30px; display:flex; flex-direction:column; justify-content:center;}
.ad-body h3{font-size:clamp(20px,2.3vw,26px); line-height:1.18; margin-bottom:10px;}
.ad-body .ad-kicker{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-dark);
  border:1px solid #F3D2AC; background:#FFF6EC; padding:5px 12px; border-radius:20px; margin-bottom:14px;
}
.ad-body > p{font-size:14px; color:var(--muted); margin:0 0 16px;}
.ad-list{list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:9px;}
.ad-list li{font-size:13.4px; padding-left:24px; position:relative; color:var(--ink);}
.ad-list li::before{content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:700;}
.ad-actions{display:flex; gap:10px; flex-wrap:wrap;}
.ad-phone{
  margin-top:16px; font-size:12.6px; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.ad-phone a{color:var(--navy); font-weight:600;}
.ad-close{
  position:absolute; top:12px; right:14px; z-index:5; width:34px; height:34px; border-radius:50%;
  border:none; background:rgba(255,255,255,.92); color:var(--navy); font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:background .15s ease, transform .15s ease;
}
.ad-close:hover{background:#fff; transform:scale(1.08);}
.ad-dismiss{
  background:none; border:none; color:var(--muted); font-size:12px; text-decoration:underline;
  padding:0; margin-top:14px; align-self:flex-start;
}
.ad-dismiss:hover{color:var(--navy);}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .series-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .klevo-flow{grid-template-columns:repeat(2,minmax(0,1fr));}
  .klevo-ad-inner{grid-template-columns:minmax(0,1fr); gap:36px; padding:54px 0;}
  .klevo-ad-shots{max-width:520px;}
}
@media(max-width:860px){
  .klevo-split, .klevo-split.flip{grid-template-columns:minmax(0,1fr); gap:28px;}
  .klevo-split.flip .ks-media{order:0;}
  .ad-grid{grid-template-columns:minmax(0,1fr);}
  .ad-visual{border-radius:16px 16px 0 0; padding:22px 20px;}
  .ad-visual > img:first-of-type{display:none;}
  .ad-visual .ad-thumbs{grid-template-columns:repeat(2,1fr);}
  .ad-body{padding:26px 22px 24px;}
}
@media(max-width:680px){
  .series-grid{grid-template-columns:minmax(0,1fr);}
  .klevo-flow{grid-template-columns:minmax(0,1fr);}
  .klevo-ad-points{grid-template-columns:1fr;}
  .klevo-ad-shots{grid-template-columns:repeat(3,1fr); gap:10px;}
  .klevo-authorized{flex-direction:column; align-items:flex-start; gap:10px;}
  .ad-modal{max-height:88vh;}
  .ad-actions .btn{flex:1 1 100%; justify-content:center;}
}

/* =====================================================================
   KLEVO NAV & TOPBAR — MOBILE CORRECTIONS
   Two fixes that only show up once a second dropdown was added to the nav
   and a third number was added to the topbar.
===================================================================== */

/* 1. Dropdown panels inside the open mobile menu.
   .dropdown is position:absolute with a 258px min-width, which is fine
   hanging off a desktop nav item but on a 390px screen it was anchored to
   a centred item and ran off the right edge — the last two characters of
   every entry were clipped. Inside the mobile menu the panel becomes a
   normal block in the flow instead: full width, indented, no shadow. */
@media(max-width:900px){
  nav.links.mobile-open{align-items:stretch;}
  /* .has-dropdown is a flex ROW on desktop (link + caret side by side), so a
     width:100% panel inside it was still sized as a flex item and stopped
     short. Letting the row wrap puts link+caret on line one and gives the
     panel a full-width line of its own. */
  nav.links.mobile-open .has-dropdown{width:100%; flex-wrap:wrap; justify-content:center;}
  nav.links.mobile-open .has-dropdown > a{display:inline-block;}
  nav.links.mobile-open .dropdown{
    position:static; min-width:0; flex:1 0 100%; margin-top:10px; box-shadow:none;
    border-radius:8px; background:var(--paper); animation:none;
  }
  /* hover must not open the panel on touch — only the caret does */
  nav.links.mobile-open .has-dropdown:hover .dropdown{display:none;}
  nav.links.mobile-open .has-dropdown.open .dropdown{display:block;}
  nav.links.mobile-open .dropdown a{text-align:left;}
}

/* 2. Keep the PTCL landline reachable on small screens.
   The topbar hides every tel: link below 560px so the bar stays one line.
   The company landline is the number we want a visitor to see, so it is
   exempted while the mobile number stays hidden — WhatsApp already covers
   that one, and the pair together would wrap the bar onto two lines. */
@media(max-width:560px){
  .tb-contact.tb-ptcl[href^="tel"]{display:inline;}
  .tb-contact[href^="mailto"]{display:none;}
}

/* =====================================================================
   FACILITY & EQUIPMENT VIDEO GALLERY  (about.html #facility-video)
   Cards are 9:16 posters that swap to a muted looping preview on hover;
   clicking opens a lightbox with real controls, sound, and prev/next.
   Uses existing tokens only — no new colours, no new fonts.
===================================================================== */
.vid-section{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 420px at 10% -12%, rgba(245,130,32,.10), transparent 60%),
    radial-gradient(900px 380px at 92% 112%, rgba(11,85,99,.12), transparent 62%),
    var(--paper);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.vid-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(11,42,74,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,42,74,.035) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
          mask-image:linear-gradient(180deg,#000,transparent 78%);
}
.vid-section > .container{position:relative; z-index:1;}

/* ---- filter chips ---- */
.vid-filters{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px;}
.vid-chip{
  border:1px solid var(--line); background:#fff; color:var(--navy);
  font-family:inherit; font-weight:600; font-size:13px; line-height:1;
  padding:9px 16px; border-radius:20px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease,
             color .18s ease, border-color .18s ease;
}
.vid-chip:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(11,42,74,.10);}
.vid-chip[aria-pressed="true"]{
  background:var(--navy); border-color:var(--navy); color:#fff;
  box-shadow:0 10px 22px rgba(11,42,74,.22);
}

/* ---- grid ---- */
.vid-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(228px,1fr));}
.vid-card{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--navy-900); border-radius:var(--radius); overflow:hidden;
  aspect-ratio:9/16; text-align:left; color:#fff;
  box-shadow:0 10px 28px rgba(11,42,74,.14);
  transition:transform .38s cubic-bezier(.2,.7,.3,1), box-shadow .38s ease, opacity .5s ease;
  opacity:0; transform:translateY(26px);
}
.vid-card.is-in{opacity:1; transform:none;}
.vid-card.is-hidden{display:none;}
.vid-card:hover, .vid-card:focus-visible{
  transform:translateY(-8px); outline:none;
  box-shadow:0 26px 54px rgba(11,42,74,.30);
}
.vid-card:focus-visible{box-shadow:0 0 0 3px var(--orange), 0 26px 54px rgba(11,42,74,.30);}
.vid-card img, .vid-card video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.vid-card video{opacity:0; transition:opacity .45s ease;}
.vid-card.is-previewing video{opacity:1;}
.vid-card img{transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.vid-card:hover img{transform:scale(1.06);}
.vid-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,18,35,.10) 0%,rgba(7,18,35,0) 34%,
                                     rgba(7,18,35,.62) 74%,rgba(7,18,35,.92) 100%);
}
.vid-tag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 10px; border-radius:20px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.vid-time{
  position:absolute; top:12px; right:12px; z-index:2;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  background:rgba(7,18,35,.62); padding:6px 9px; border-radius:8px;
}
.vid-play{
  position:absolute; left:50%; top:50%; z-index:2;
  width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--navy);
  display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .34s cubic-bezier(.2,.7,.3,1), background .24s ease, color .24s ease;
}
.vid-play svg{width:20px; height:20px; margin-left:3px; fill:currentColor;}
.vid-card:hover .vid-play{transform:scale(1.12); background:var(--orange); color:#fff;}
.vid-card.is-previewing .vid-play{transform:scale(.86);}
.vid-meta{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 15px 15px;}
.vid-meta h3{margin:0 0 4px; font-size:15px; line-height:1.3; color:#fff;}
.vid-meta p{margin:0; font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.78);}
.vid-bar{position:absolute; left:0; bottom:0; height:3px; width:0; z-index:3;
  background:var(--orange); transition:width .12s linear;}

/* ---- lightbox ---- */
.vid-lb{
  position:fixed; inset:0; z-index:1200; display:none; opacity:0;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(7,18,35,.88);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:opacity .28s ease;
}
.vid-lb.is-open{display:flex;}
.vid-lb.is-visible{opacity:1;}
.vid-lb-box{
  position:relative; width:100%; max-width:min(420px,92vw);
  transform:translateY(14px) scale(.97);
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.vid-lb.is-visible .vid-lb-box{transform:none;}
.vid-lb video{
  width:100%; max-height:74vh; border-radius:var(--radius); background:#000;
  display:block; box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.vid-lb-cap{color:#fff; padding:14px 4px 0;}
.vid-lb-cap h3{margin:0 0 3px; font-size:16px; color:#fff;}
.vid-lb-cap p{margin:0; font-size:13px; color:rgba(255,255,255,.72);}
.vid-lb-close, .vid-lb-nav{
  position:absolute; z-index:2; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.12);
  color:#fff; display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.vid-lb-close:hover, .vid-lb-nav:hover{background:var(--orange); border-color:transparent; transform:scale(1.07);}
.vid-lb-close{top:-52px; right:0;}
.vid-lb-nav{top:50%; margin-top:-21px;}
.vid-lb-prev{left:-58px;} .vid-lb-next{right:-58px;}
.vid-lb-close svg, .vid-lb-nav svg{
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

@media (max-width:1080px){ .vid-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));} }
@media (max-width:860px){
  .vid-lb-nav{top:auto; bottom:-56px; margin-top:0;}
  .vid-lb-prev{left:auto; right:52px;} .vid-lb-next{right:0;}
}
@media (max-width:680px){
  .vid-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .vid-meta{padding:13px 12px 12px;}
  .vid-meta h3{font-size:13.5px;} .vid-meta p{font-size:11.5px;}
  .vid-play{width:46px; height:46px; margin:-23px 0 0 -23px;}
  .vid-play svg{width:17px; height:17px;}
}
@media (max-width:400px){ .vid-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){
  .vid-card, .vid-card img, .vid-play, .vid-lb, .vid-lb-box{transition:none !important;}
  .vid-card{opacity:1; transform:none;}
}

/* Cap the facility gallery at four columns on large screens: with seven
   clips, five-up leaves a lonely two on the second row. */
@media (min-width:1100px){ .vid-grid{grid-template-columns:repeat(4,1fr);} }

/* =====================================================================
   ROUND 10 — prominent shopping nav, video advertisement, one quote CTA
===================================================================== */

/* ---- the two shopping destinations read as buttons, not as text links.
   They sit last in the nav, so the pill treatment also groups them. ---- */
nav.links > a.nav-shop,
nav.links .has-dropdown.nav-shop-wrap{
  opacity:1;
  background:linear-gradient(180deg,#FFF4E8,#FFE6CB);
  border:1px solid #F4CB9C;
  border-radius:24px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 6px rgba(245,130,32,.10);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
nav.links > a.nav-shop{padding:7px 15px;}
nav.links .has-dropdown.nav-shop-wrap{padding:7px 9px 7px 15px; gap:4px;}
nav.links > a.nav-shop,
nav.links .has-dropdown.nav-shop-wrap > a.nav-shop{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; color:var(--navy); opacity:1;
}
nav.links .has-dropdown.nav-shop-wrap > a.nav-shop{padding:0;}
nav.links a.nav-shop .nav-shop-ico{
  width:15px; height:15px; flex:0 0 auto; color:var(--orange-dark);
  transition:color .2s ease;
}
nav.links > a.nav-shop:hover,
nav.links > a.nav-shop.active,
nav.links .has-dropdown.nav-shop-wrap:hover,
nav.links .has-dropdown.nav-shop-wrap:has(> a.active){
  background:linear-gradient(180deg,var(--orange),var(--orange-dark));
  border-color:transparent; transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(245,130,32,.34);
}
nav.links > a.nav-shop:hover,
nav.links > a.nav-shop.active,
nav.links .has-dropdown.nav-shop-wrap:hover > a.nav-shop,
nav.links .has-dropdown.nav-shop-wrap:hover > .dropdown-caret,
nav.links .has-dropdown.nav-shop-wrap > a.nav-shop.active{color:#fff;}
nav.links > a.nav-shop:hover .nav-shop-ico,
nav.links > a.nav-shop.active .nav-shop-ico,
nav.links .has-dropdown.nav-shop-wrap:hover .nav-shop-ico,
nav.links .has-dropdown.nav-shop-wrap > a.nav-shop.active .nav-shop-ico{color:#fff;}
nav.links .has-dropdown.nav-shop-wrap:hover > .dropdown-caret{opacity:1;}
/* the pill is taller than a text link — pull the menu clear of it */
nav.links .has-dropdown.nav-shop-wrap .dropdown{top:calc(100% + 10px);}

/* The pill is wider than the text link it replaced, and the nav row has no
   slack on a laptop screen — so the chrome comes off in stages as the row
   tightens, and the emphasis survives as weight and colour. Measured, not
   guessed: at 1600px the icons alone cost the row ~40px it does not have. */
@media (max-width:1680px){
  nav.links a.nav-shop .nav-shop-ico{display:none;}
  nav.links > a.nav-shop{padding:6px 13px;}
  nav.links .has-dropdown.nav-shop-wrap{padding:6px 6px 6px 13px;}
}
@media (max-width:1340px){
  nav.links > a.nav-shop{padding:5px 10px;}
  nav.links .has-dropdown.nav-shop-wrap{padding:5px 4px 5px 10px;}
}
@media (max-width:1240px) and (min-width:981px){
  /* below this the row cannot afford a box at all — keep the emphasis,
     drop the chrome */
  nav.links > a.nav-shop,
  nav.links .has-dropdown.nav-shop-wrap{
    background:none; border-color:transparent; box-shadow:none; padding:6px 0;
  }
  nav.links > a.nav-shop,
  nav.links .has-dropdown.nav-shop-wrap > a.nav-shop{color:var(--orange-dark);}
  nav.links > a.nav-shop:hover,
  nav.links .has-dropdown.nav-shop-wrap:hover{background:none; box-shadow:none; transform:none;}
  nav.links > a.nav-shop:hover,
  nav.links .has-dropdown.nav-shop-wrap:hover > a.nav-shop{color:var(--orange); text-decoration:underline;}
}
/* stacked mobile menu: full-width pills with their icons back, still the
   two loudest rows */
nav.links.mobile-open > a.nav-shop,
nav.links.mobile-open .has-dropdown.nav-shop-wrap{
  width:100%; justify-content:center; border-radius:12px; padding:11px 14px;
  background:linear-gradient(180deg,#FFF4E8,#FFE6CB); border:1px solid #F4CB9C;
}
nav.links.mobile-open a.nav-shop .nav-shop-ico{display:inline-block; width:15px; height:15px;}

/* ---- advertisement popup: video in place of the three stills ---- */
.ad-visual.ad-visual-video{
  position:relative; padding:0; overflow:hidden; display:block;
  background:linear-gradient(160deg,#0B2A4A,#071223);
}
.ad-video{
  width:100%; height:100%; min-height:320px; display:block;
  object-fit:cover; background:#071223;
}
.ad-video-tag{
  position:absolute; left:16px; bottom:16px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#fff;
  background:rgba(7,18,35,.62); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:7px 12px; border-radius:20px;
}
.ad-video-tag i{
  width:7px; height:7px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 0 rgba(245,130,32,.7); animation:adLive 2.2s infinite;
}
@keyframes adLive{70%{box-shadow:0 0 0 8px rgba(245,130,32,0);}100%{box-shadow:0 0 0 0 rgba(245,130,32,0);}}
.ad-video-sound{
  position:absolute; right:16px; top:16px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:rgba(7,18,35,.55); border:1px solid rgba(255,255,255,.26);
  color:#fff; display:grid; place-items:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .2s ease, transform .2s ease;
}
.ad-video-sound:hover{background:var(--orange); border-color:transparent; transform:scale(1.07);}
.ad-video-sound svg{
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.ad-video-sound .ad-wave{display:none;}
.ad-video-sound.is-on .ad-mute-x{display:none;}
.ad-video-sound.is-on .ad-wave{display:block;}

/* ---- ISK lockup inside the advertisement body ---- */
/* .ad-body is a column flexbox, so an <img> child stretches to the full
   panel width unless it is told not to — hence align-self, not just width. */
.ad-body .ad-logo{
  align-self:flex-start;
  height:58px; width:auto; max-width:200px; object-fit:contain;
  margin:0 0 14px;
  filter:drop-shadow(0 1px 2px rgba(11,42,74,.10));
}

/* ---- navy solid button (Place Order) ---- */
.btn.btn-navy{
  background:var(--navy); color:#fff; border:1px solid var(--navy);
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn.btn-navy:hover{
  background:var(--navy-2); border-color:var(--navy-2);
  box-shadow:0 8px 20px rgba(11,42,74,.28); transform:translateY(-1px);
}

@media (max-width:820px){
  .ad-visual.ad-visual-video{border-radius:16px 16px 0 0;}
  .ad-video{min-height:210px; max-height:240px;}
  .ad-body .ad-logo{height:46px; margin-bottom:12px;}
}
@media (prefers-reduced-motion:reduce){
  .ad-video-tag i{animation:none;}
  nav.links > a.nav-shop, nav.links .has-dropdown.nav-shop-wrap{transition:none;}
}

/* =====================================================================
   ROUND 13 — "ISKT Online Store" menu, and product cards that keep a
   sensible width when only a few items match a filter
===================================================================== */

/* ---- 1. store dropdown: search + every shop filter, each with a small icon.
   It carries 13 links, so it is a compact, scrollable panel rather than
   the plain 4–5 row dropdown the other menus use. ---- */
nav.links .has-dropdown.nav-store-wrap .dropdown.shop-menu{
  width:300px; min-width:0; padding:8px;
  max-height:min(78vh, 660px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin;
}
.shop-menu .dd-search{position:relative; margin:0 0 4px;}
.shop-menu .dd-search .ic-svg{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--muted); pointer-events:none;
}
.shop-menu .dd-search input{
  width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:9px;
  padding:9px 12px 9px 34px; font:inherit; font-size:13px; color:var(--ink); background:#fff;
}
.shop-menu .dd-search input:focus{outline:2px solid var(--orange); outline-offset:1px; border-color:transparent;}
.shop-menu .dd-label{
  font-size:11.5px; font-weight:600; color:var(--muted); padding:8px 10px 4px; letter-spacing:.01em;
}
.shop-menu a{padding:7px 10px; gap:10px; font-size:13.3px; line-height:1.25; white-space:normal;}
/* the small logo: a soft tinted tile behind a line icon */
.shop-menu a .ic-svg{
  width:26px; height:26px; padding:5px; box-sizing:border-box; border-radius:7px;
  background:#FFF1E2; color:var(--orange-dark); flex:0 0 auto;
  transition:background .15s ease, color .15s ease;
}
.shop-menu a:hover .ic-svg,
.shop-menu a.is-current .ic-svg{background:var(--orange); color:#fff;}
.shop-menu a.is-current{background:#FFF4E8; color:var(--orange-dark); font-weight:600;}
/* laptop types hang off "Laptops" with a guide line */
.shop-menu .dd-sub{margin:1px 0 3px 22px; padding-left:8px; border-left:2px solid #F6D9B8; display:flex; flex-direction:column;}
.shop-menu .dd-sub a{padding:5px 8px; font-size:12.8px;}
.shop-menu .dd-sub a .ic-svg{width:22px; height:22px; padding:4px; border-radius:6px;}
/* after choosing a filter the menu must close even while the pointer is
   still resting on it (hover would otherwise keep it open) */
.has-dropdown.suppress .dropdown{display:none !important;}

/* stacked mobile menu: the panel becomes a normal full-width block */
nav.links.mobile-open .has-dropdown.nav-store-wrap .dropdown.shop-menu{
  width:auto; max-height:none; overflow:visible; text-align:left;
}

/* ---- 2. shop grid: one, two or three matches no longer stretch across the
   whole row. Each card tops out at a medium 400px and the group sits in the
   centre. shop.html stamps the match count on the grid (data-count), so a
   full catalogue is untouched — the multi-column fill from round 5 still
   decides its columns — and only the short lists are capped. ---- */
#productGrid{justify-content:center; scroll-margin-top:200px;}
#productGrid > .pcard{min-width:0;}
#productGrid > p{justify-self:center; text-align:center;}
#productGrid[data-count="1"]{grid-template-columns:minmax(0,400px);}
@media (min-width:640px){
  #productGrid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,400px));}
}
@media (min-width:1000px){
  #productGrid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,400px));}
}

/* ---- 3. nav fit: "ISKT Online Store" is ~7 characters longer than the
   label it replaced, and the row already had no slack. Measured at every
   width from 1151px (where the hamburger takes over) upward: type and gaps
   ease down through the laptop widths, and below 1360px the Sign in button
   keeps its icon and drops its word (the tooltip and the drawer still say
   it) so the row never touches the logo or the action buttons. ---- */
@media (min-width:1500px) and (max-width:1780px){
  nav.links{gap:clamp(14px,1.2vw,22px); font-size:clamp(13px,.9vw,14.5px);}
}
@media (min-width:1151px) and (max-width:1360px){
  #accountLabel{display:none;}
}
@media (min-width:1151px) and (max-width:1340px){
  nav.links{gap:10px; font-size:12.6px;}
}
@media (min-width:1151px) and (max-width:1240px){
  nav.links{gap:8px; font-size:12.3px;}
  .nav-actions{gap:5px;}
  .nav-actions .btn-sm{padding:7px 11px;}
}
@media (min-width:1151px) and (max-width:1180px){
  nav.links{gap:6px; font-size:12px;}
}

/* the invisible hover bridge is only needed for a mouse; inside the open
   mobile menu it stuck out ~40px past the right edge and made the page
   scroll sideways whenever a dropdown was expanded (Klevo's did the same) */
nav.links.mobile-open .has-dropdown::after{display:none !important;}