/* =====================================================================
   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:flex-start; gap:15px; padding:20px 20px 18px;
  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; margin-bottom:10px;}
.reg-body .reg-no{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--tint-ink); font-weight:500;
  background:#fff; border:1px solid var(--tint-line); border-radius:7px; padding:4px 9px; display:inline-block;
  word-break:break-all; box-shadow:0 2px 6px rgba(11,42,74,.05);
}
.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;}
}