/* ==========================================================================
   TESKO NDT — Design System
   Layered on top of Tailwind (Play CDN). Defines brand tokens, typography,
   and reusable component classes so markup stays clean across ~50 pages.
   ========================================================================== */

:root {
  /* Brand palette — industrial navy + safety amber (energy/inspection sector) */
  --navy-900: #071E33;
  --navy-800: #0B2A45;
  --navy-700: #103654;
  --navy-600: #16466b;
  --accent-500: #F47920;   /* safety amber — CTA fills, highlights */
  --accent-600: #B85410;   /* darker amber for text-on-white (WCAG AA 4.87:1) */
  --steel-500: #1C9BD1;    /* technical cyan — accents */
  --steel-600: #136488;    /* link text on white (WCAG AA) */

  --ink: #0f172a;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-400: #5f6b7b;    /* muted meta text — AA-compliant on white (5.42:1) */
  --line: #e2e8f0;
  --surface: #ffffff;
  --bg: #f8fafc;
  --bg-soft: #f1f5f9;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow-md: 0 10px 30px -12px rgba(11,42,69,.25);
  --shadow-lg: 0 24px 60px -20px rgba(11,42,69,.35);
  --container: 1200px;
}

* { -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Accessibility: visible keyboard focus (WCAG 2.4.7) */
:focus-visible { outline: 3px solid var(--steel-500); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--steel-500); box-shadow: 0 0 0 3px rgba(28,155,209,.25);
}
/* Skip link (WCAG 2.4.1) */
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 100; background: var(--navy-800);
  color: #fff; padding: .65rem 1rem; border-radius: 8px; font: 600 .9rem "Sora",sans-serif;
  transition: top .15s ease; }
.skip-link:focus { top: 1rem; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--slate-700);
  background: var(--surface);
  line-height: 1.6;
  overflow-x: hidden; /* guard against any incidental horizontal scroll */
}
h1,h2,h3,h4,h5 {
  font-family: "Sora", "Inter", sans-serif;
  color: var(--navy-800);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  overflow-wrap: break-word;
}

/* ----- Layout helpers ----- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font: 600 .8rem/1 "Sora", sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color: var(--accent-600);
}
.eyebrow::before { content:""; width:1.75rem; height:2px; background:var(--accent-500); border-radius:2px; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--slate-500); }

/* ----- Buttons ----- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font: 600 .95rem/1 "Sora", sans-serif; padding:.85rem 1.5rem; border-radius:999px;
  transition: all .18s ease; cursor:pointer; white-space:nowrap; border:1.5px solid transparent; }
.btn svg { width:1.05em; height:1.05em; }
/* navy text on amber = 6.12:1 (white-on-amber failed AA at 2.76:1) */
.btn-primary { background: var(--accent-500); color: var(--navy-900); box-shadow: 0 8px 20px -8px rgba(244,121,32,.6); }
.btn-primary:hover { background: #9E4A0A; color:#fff; transform: translateY(-1px); } /* white on #9E4A0A = 6.1:1 */
.btn-dark { background: var(--navy-800); color:#fff; }
.btn-dark:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--navy-800); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy-800); background: var(--bg-soft); }
.btn-white { background:#fff; color: var(--navy-800); }
.btn-white:hover { background: var(--bg-soft); transform: translateY(-1px); }
.btn-outline-light { background:transparent; color:#fff; border-color: rgba(255,255,255,.4); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color:#fff; }

/* ----- Cards ----- */
.card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: all .2s ease; }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #cdd9e7; }
.card-pad { padding: 1.5rem; }
.icon-badge { display:grid; place-items:center; width:3rem; height:3rem; border-radius:12px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color:#fff; }
.icon-badge svg { width:1.5rem; height:1.5rem; }
.icon-badge.amber { background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); }
.icon-badge.steel { background: linear-gradient(135deg, var(--steel-500), var(--steel-600)); }

/* ----- Header ----- */
.site-header { position: sticky; top:0; z-index:50; background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px); border-bottom:1px solid var(--line); }
.nav-link { font: 500 .92rem/1 "Inter", sans-serif; color: var(--slate-700); padding:.5rem 0; position:relative; }
.nav-link:hover { color: var(--navy-800); }
.has-mega > a::after { content:"⌄"; margin-left:.3rem; color: var(--slate-400); font-size:.8em; }
.mega { position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid var(--line);
  box-shadow: var(--shadow-lg); opacity:0; visibility:hidden; transform: translateY(8px);
  transition: all .18s ease; }
.has-mega:hover .mega, .mega:hover,
.has-mega:focus-within .mega { opacity:1; visibility:visible; transform: translateY(0); } /* keyboard-accessible */
.mega-link { display:block; padding:.6rem .75rem; border-radius:8px; color:var(--slate-700); font-size:.9rem; }
.mega-link:hover { background: var(--bg-soft); color: var(--navy-800); }
.mega-link strong { display:block; color:var(--navy-800); font-weight:600; }
.mega-link span { font-size:.8rem; color:var(--slate-400); }

/* topbar */
.topbar { background: var(--navy-900); color:#cbd5e1; font-size:.8rem; }
.topbar a { color:#cbd5e1; } .topbar a:hover { color:#fff; }

/* language dropdown */
.lang-switch > button { color: inherit; cursor: pointer; }
.lang-menu { left:auto; right:0; width:auto; min-width:200px; border:1px solid var(--line);
  border-top:1px solid var(--line); border-radius:12px; padding:.4rem; z-index:60; }
.lang-row { display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border-radius:8px;
  color:var(--slate-700); font-size:.85rem; }
.lang-row:hover, .lang-row.active { background:var(--bg-soft); }
.lang-row .lang-code { font:700 .7rem/1 "Sora",sans-serif; width:1.7rem; color:var(--navy-800); letter-spacing:.04em; }
.lang-row.active .lang-code { color:var(--accent-600); }

/* ----- Hero ----- */
.hero { position:relative; background:
    radial-gradient(1200px 600px at 80% -10%, rgba(28,155,209,.18), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(244,121,32,.12), transparent 55%),
    linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color:#fff; overflow:hidden; }
.hero h1 { color:#fff; }
.hero-grid::before { content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%); }

/* ----- Home cinematic hero (background image + glass stats) ----- */
.hero-home { display:flex; align-items:center; min-height: clamp(560px, 80vh, 780px);
  background: var(--navy-900); padding:0; }
.hero-home .hero-media { position:absolute; inset:0; z-index:1; }
.hero-home .hero-media img { width:100%; height:100%; object-fit:cover; object-position:64% 50%; }
.hero-home .hero-scrim { position:absolute; inset:0; z-index:2; background:
  linear-gradient(90deg, rgba(6,24,42,.97) 0%, rgba(6,24,42,.86) 34%, rgba(6,24,42,.55) 58%, rgba(7,30,51,.28) 100%),
  linear-gradient(180deg, rgba(7,30,51,.45) 0%, rgba(7,30,51,0) 30%, rgba(6,20,36,.78) 100%); }
.hero-home .hero-overlay-grid { position:absolute; inset:0; z-index:3; opacity:.6; }
.hero-home .hero-inner { position:relative; z-index:4; width:100%;
  padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero-content { max-width: 660px; }
.hero-stats { margin-top: clamp(1.75rem,3vw,2.5rem); display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr)); gap:.75rem; max-width:740px; }
.hero-stat { display:flex; align-items:center; gap:.7rem; padding:.85rem .9rem; border-radius:14px;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px -16px rgba(0,0,0,.6); }
.hero-stat .hs-ic { display:grid; place-items:center; width:2.4rem; height:2.4rem; flex-shrink:0;
  border-radius:10px; background: rgba(255,255,255,.09); color:#cbd5e1; }
.hero-stat .hs-ic svg { width:1.25rem; height:1.25rem; }
.hero-stat .hs-val { font:800 clamp(1.35rem,2vw,1.6rem)/1 "Sora",sans-serif; color: var(--accent-500); }
.hero-stat .hs-lab { font-size:.76rem; line-height:1.25; color:#cbd5e1; margin-top:.15rem; }
@media (max-width: 720px) {
  .hero-home .hero-media img { object-position:70% 50%; }
  .hero-home .hero-scrim { background:
    linear-gradient(180deg, rgba(6,24,42,.86) 0%, rgba(6,24,42,.7) 40%, rgba(6,20,36,.9) 100%); }
  .hero-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ----- Stat / pill ----- */
.stat { font: 800 clamp(1.8rem,3vw,2.6rem)/1 "Sora", sans-serif; color: var(--navy-800); }
.pill { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border-radius:999px;
  font:600 .78rem/1 "Inter"; background: var(--bg-soft); color: var(--slate-700); border:1px solid var(--line); }
.pill-dot::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background: var(--accent-500); }

/* ----- Section headings ----- */
.dark-section { background: var(--navy-900); color:#cbd5e1; }
.dark-section h2, .dark-section h3 { color:#fff; }

/* ----- Breadcrumb ----- */
.crumb { font-size:.82rem; color: var(--slate-500); }
.crumb a:hover { color: var(--accent-600); }

/* ----- Footer ----- */
.site-footer { background: var(--navy-900); color:#94a3b8; }
.site-footer h4 { color:#fff; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }
.site-footer a { color:#cbd5e1; font-size:.9rem; } .site-footer a:hover { color:#fff; }

/* ----- Prose (article/service body) ----- */
.prose h2 { font-size: clamp(1.5rem,2.4vw,2rem); margin-top:2.5rem; margin-bottom:1rem; }
.prose h3 { font-size:1.25rem; margin-top:1.75rem; margin-bottom:.75rem; }
.prose p { margin-bottom:1.1rem; }
.prose ul { margin:0 0 1.1rem 1.1rem; list-style: none; }
.prose ul li { position:relative; padding-left:1.5rem; margin-bottom:.55rem; }
.prose ul li::before { content:""; position:absolute; left:0; top:.55em; width:.55rem; height:.55rem;
  border-radius:2px; background: var(--accent-500); transform: rotate(45deg); }
.prose a { color: var(--steel-600); text-decoration: underline; text-underline-offset:3px; }
.prose strong { color: var(--navy-800); }

/* ----- Utilities ----- */
/* Reveal is no-JS-safe: visible by default; only hidden once JS opts in via
   .js-anim on <html>, so content never depends on JavaScript to display. */
.reveal { opacity:1; transform:none; }
.js-anim .reveal { opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js-anim .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .js-anim .reveal { opacity:1; transform:none; transition:none; } }
.hairline { height:1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
[hidden] { display:none !important; }

/* ----- References logo wall ----- */
.logo-wall { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:1rem; }
.logo-tile { display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:12px;
  height:104px; padding:1rem; transition: box-shadow .2s ease, transform .2s ease; }
.logo-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.logo-tile img { max-width:100%; max-height:64px; width:auto; object-fit:contain;
  filter: grayscale(100%); opacity:.72; transition: filter .25s ease, opacity .25s ease; }
.logo-tile:hover img { filter: grayscale(0); opacity:1; }

/* ----- Certificates gallery ----- */
.cert-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:1.25rem; }
.cert-card { margin:0; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; }
.cert-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cert-thumb { position:relative; display:block; aspect-ratio: 3/4; background:#f4f6f9; overflow:hidden; }
.cert-thumb img { width:100%; height:100%; object-fit:contain; object-position:top; padding:.5rem; }
.cert-thumb .cert-zoom { position:absolute; inset:0; display:grid; place-items:center; background:rgba(11,42,69,.55);
  color:#fff; opacity:0; transition:opacity .2s ease; font-size:1.4rem; }
.cert-thumb:hover .cert-zoom, .cert-thumb:focus-visible .cert-zoom { opacity:1; }
.cert-card figcaption { padding:.85rem 1rem; }
.cert-card figcaption strong { display:block; color:var(--navy-800); font:600 .9rem "Sora",sans-serif; }
.cert-card figcaption span { display:block; font-size:.8rem; color:var(--slate-500); margin-top:.15rem; }

/* lightbox */
.lightbox { position:fixed; inset:0; z-index:80; background:rgba(7,30,51,.92); display:grid; place-items:center; padding:2.5rem; }
.lightbox img { max-width:min(900px,92vw); max-height:90vh; border-radius:8px; box-shadow: var(--shadow-lg); background:#fff; }
.lightbox-close { position:absolute; top:1rem; right:1.5rem; background:none; border:none; color:#fff; font-size:2.4rem; line-height:1; cursor:pointer; }

.container-fluid { width:100%; }

/* ----- Contact map with floating address card ----- */
.map-section { position:relative; }
.map-frame { height:clamp(380px,52vh,520px); background:var(--bg-soft); }
.map-overlay-wrap { position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; }
.map-card { pointer-events:auto; width:min(340px,100%); background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow: var(--shadow-lg); padding:1.4rem; }
@media (max-width: 640px) {
  .map-section { display:flex; flex-direction:column-reverse; }
  .map-overlay-wrap { position:static; padding-block:1.25rem; }
  .map-card { width:100%; box-shadow: var(--shadow-md); }
}

/* mobile drawer */
.drawer { position:fixed; inset:0 0 0 auto; width:min(86%,360px); background:#fff; z-index:60;
  transform: translateX(100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); overflow-y:auto; }
.drawer.open { transform:none; }
.scrim { position:fixed; inset:0; background:rgba(7,30,51,.5); z-index:55; opacity:0; visibility:hidden; transition:.2s; }
.scrim.open { opacity:1; visibility:visible; }