@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,600&display=swap");

/* ==========================================================================
   LINCOSCI GLOBAL DESIGN SYSTEM
   ========================================================================== */

:root {
    --primary-color: #03045e;
    --secondary-color: #FFD166;
    --dark-neutral: #03045e;
    --light-neutral: #03045e;
    --white: #FFFFFF;
    --text-dark: #1a1a2e;
    --bg-light: #f0f4ff;
    --border-color: rgba(255, 255, 255, 0.15);
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

h1, h2, h3, h4 {
    margin-bottom: 0.75rem;
    font-weight: 700;
}

p, span, h1, h2, h3, a {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   THE ADAPTIVE FRAME ENGINE (Fixes Inner Page Layout Multi-Sizes)
   ========================================================================== */
.adaptive-flex-container {
    display: flex;
    flex-direction: row; /* Horizontal side-by-side on computers */
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

.adaptive-flex-container > div {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   HEADER NAVIGATION Framework
   ========================================================================== */

header {
    background-color: #03045e;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo-container {
    order: 1;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    order: 2;
}

.header-controls-row {
    display: flex;
    align-items: center;
    gap: 12px;
    order: 3; /* Sits after the menu links on desktop */
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 25px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-menu a, .dropdown-trigger {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
    cursor: pointer;
}

.nav-menu a:hover, .dropdown-trigger:hover {
    color: var(--secondary-color);
}

/* LinkedIn Global Style (Fixes Violet Bug) */
.linkedin-header-icon {
    color: #ffffff !important;
    background-color: rgba(255,255,255,0.08);
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 600;
}

.linkedin-header-icon:hover {
    background-color: rgba(255,255,255,0.15);
    color: #FFD166 !important;
    border-color: #FFD166;
}

/* Desktop Nested Menus */
.dropdown-parent { position: relative; }
.dropdown-parent::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 15px; /* Creates a 15px invisible safety blanket your cursor can cross safely */
    display: block;
}
.dropdown-menu-level1 {
    position: absolute;
    top: 100%;
    left: 0;
    background: #03045e;
    min-width: 280px;
    list-style: none;
    padding: 10px 0;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    display: none;
    margin-top: 0;
    border: 1px solid rgba(255,255,255,0.1);
}

.submenu-parent { position: relative; }

.dropdown-menu-level2 {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: -5px !important;     
    padding-left: 5px;
    background: #020242;
    min-width: 260px;
    list-style: none;
    padding: 10px 0;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    display: none;
    border: 1px solid rgba(255,255,255,0.1);
}

.dropdown-menu-level1 li a, 
.dropdown-menu-level2 li a {
    display: block;
    padding: 10px 20px;
    color: #ffffff;
    font-size: 13px;
    text-align: left;
}

.dropdown-menu-level1 li a:hover,
.dropdown-menu-level2 li a:hover {
    background: rgba(255,255,255,0.08);
    color: var(--secondary-color);
}

@media (min-width: 769px) {
    .dropdown-parent:hover > .dropdown-menu-level1 { display: block; }
    .submenu-parent:hover > .dropdown-menu-level2 { display: block; }
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
}

/* ==========================================================================
   PAGE STRUCTURAL COMPONENTS
   ========================================================================== */

.serve-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
    align-items: stretch;
}

.serve-card {
    background-color: #03045e;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.serve-card:hover {
    border-color: #FFD166;
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.card {
    background: #03045e;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    color: #ffffff;
}

/* Footer Section Rules */
footer {
    background-color: #03045e;
    color: #94A3B8;
    padding: 40px 0 24px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    width: 100%;
}

footer h3 { color: var(--white); }
footer a { color: #CBD5E1; text-decoration: none; }
footer a:hover { color: var(--secondary-color); }

/* ==========================================================================
   RESPONSIVE DYNAMIC BREAKPOINTS
   ========================================================================== */

/* Zoom / Tablet Adjustments */
@media (max-width: 1024px) {
    .serve-grid { grid-template-columns: 1fr 1fr; }
    .adaptive-flex-container {
        flex-direction: column !important; /* Stack columns on zoom */
    }
}

@media (max-width: 992px) {
    /* Kept clean */
}

/* Smartphone Adjustments (Max 768px) */
@media (max-width: 1024px) {
    .serve-grid { grid-template-columns: 1fr 1fr; }
    .adaptive-flex-container {
        flex-direction: column !important;
    }
}

/* Smartphone Adjustments (Max 768px) & High-Zoom Layouts */
@media (max-width: 768px) {
    .mobile-menu-toggle { display: block !important; }
    .section { padding: 36px 0; }
    .serve-grid { grid-template-columns: 1fr !important; }
    .serve-card { padding: 18px; }

    h1 { font-size: 22px !important; line-height: 1.4 !important; }
    h2 { font-size: 20px !important; }

    /* Layout aligner for right side header buttons */
    .header-controls-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* The Mobile Drawer Navigation Container */
    @media (max-width: 768px) {
    
    .nav-wrapper {
        /* FIX 1: Change position to fixed so it locks to the viewport, 
           and use a scroll container so long menus can be scrolled safely on tiny phones */
        position: fixed; 
        top: 80px; /* Aligns perfectly right below your header bar */
        left: 0;
        width: 100%;
        height: calc(100vh - 80px); /* Spans the entire remaining screen space */
        overflow-y: auto; /* Allows scrolling inside the menu if items stretch too long */
        background-color: #03045e;
        flex-direction: column;
        gap: 24px;
        padding: 30px 25px;
        border-top: 1px solid rgba(255,255,255,0.1);
        z-index: 999;

        /* FIX 2: Hidden state uses both display none AND opacity for the fade animation */
        display: none;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* FIX 3: When active, display as flex and fade in beautifully */
    .nav-wrapper.active {
        display: flex !important;
        opacity: 1 !important;
        transform: translateY(0);
    }

    .nav-menu { 
        display: flex !important; 
        flex-direction: column !important; 
        width: 100%; 
        gap: 20px; 
    }
    
    .nav-menu li { 
        width: 100%; 
        text-align: center;
    }

    /* Dropdown overlays */
    .dropdown-menu-level1, 
    .dropdown-menu-level2 {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        background: rgba(0,0,0,0.25) !important;
        box-shadow: none !important;
        width: 100%;
        display: none !important;
        margin-top: 5px;
    }

    .dropdown-parent.open > .dropdown-menu-level1,
    .submenu-parent.open > .dropdown-menu-level2 {
        display: block !important;
    }

    /* FIXED: Mobile links are now clean White (#ffffff) by default */
    .dropdown-menu-level1 li a,
    .dropdown-menu-level2 li a {
        text-align: center !important;
        color: #ffffff !important; 
        padding: 10px;
    }

    /* FIXED: Mobile text changes to secondary Yellow on hover, focus, or tap */
    .dropdown-menu-level1 li a:hover,
    .dropdown-menu-level1 li a:active,
    .dropdown-menu-level2 li a:hover,
    .dropdown-menu-level2 li a:active {
        color: var(--secondary-color) !important;
        background-color: rgba(255,255,255,0.05);
    }

    /* Keep header action area clean and tightly aligned outside the drawer */
    .header-actions {
        width: auto !important;
        display: flex !important;
        justify-content: center !important;
        border-top: none !important;
        padding-top: 0 !important;
    }

    .linkedin-header-icon {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
}
}  /* closes the outer @media (max-width: 768px) that was left open */


/* ==========================================================================
   NEW HOME PAGE: hero with Europe radar + partner strip
   ========================================================================== */
:root{
  /* colors */
  --bg:#F1F4FE;          /* page background (light blue) */
  --navy:#010A5A;        /* brand navy: header, headings, buttons */
  --navy-hover:#1B2788;
  --navy-deep:#01063C;   /* footer */
  --gold:#F8D277;        /* accent on navy, hubs */
  --gold-hover:#FFE19A;
  --gold-line:#E2A71F;   /* pulses, rings, small icons */
  --gold-badge:#F0B429;  /* border of the center logo */
  --gold-sweep:#F0A800;  /* dots lit by the radar sweep */
  --blue-dot:#2F44E0;    /* twinkling map dots */
  --text:#3B4272;        /* body text */
  --text-soft:#4A5080;   /* small labels */
  --line:#C9D0F0;
  --line-soft:#DDE2F7;
  --tint:#E1E6FA;
  --white:#FFFFFF;
  --on-navy:#E4E8FF;
  --on-navy-soft:#D5DAF5;
  --on-footer:#C5CBEE;
  /* fonts */
  --font-body:'Manrope',system-ui,sans-serif;
  --font-display:'Fraunces',Georgia,serif;
  /* layout */
  /* the radar core (center logo) in % of the radar box */
  --core-x:45.5%;
  --core-y:54.6%;
}

/* ---------- buttons ---------- */
.hero .btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease;text-align:center;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-weight:700;box-sizing:border-box}
.hero .btn--navy{background:var(--navy);color:var(--white)}
.hero .btn--navy:hover{background:var(--secondary-color);color:var(--navy)}
.hero .btn--outline{border:2px solid var(--navy);color:var(--navy)}
.hero .btn--outline:hover{background:var(--secondary-color);border-color:var(--secondary-color)}
.hero .btn--gold{background:var(--gold);color:var(--navy)}
.hero .btn--gold:hover{background:var(--gold-hover)}
.hero .btn--ghost{border:2px solid var(--white);color:var(--white)}
.hero .btn--ghost:hover{background:rgba(255,255,255,0.14)}
.hero .btn--lg{min-height:52px;padding:0 28px;font-size:17px}
.hero .btn--md{min-height:44px;padding:0 20px;font-size:16px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero .container{position:relative;padding-top:48px;padding-bottom:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:40px}
.hero-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text)}
.hero h1{margin:0;font-family:var(--font-display);font-size:clamp(34px,4.2vw,54px);line-height:1.1;font-weight:600;letter-spacing:-0.015em;color:var(--navy)}
.lead{margin:0;max-width:520px;font-size:20px;line-height:1.55;color:var(--text)}
.hero-actions{display:flex;flex-wrap:nowrap;gap:12px;width:100%;margin-top:8px}
.hero .hero-actions .btn{flex:1 1 0;min-width:0;padding:0 14px;font-size:15px;line-height:1.25}
@media (max-width:420px){.hero .hero-actions{flex-direction:column}.hero .hero-actions .btn{flex:0 0 auto;width:100%;padding:12px 14px}}
.hero-visual{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:40px}

/* ---------- radar graphic ----------
   Everything inside .radar is positioned in % so it scales with the box.
   The SVG layers share one coordinate system: viewBox 0 0 560 480.
   Text sizes use container units (cqw) so labels shrink with the box. */
.radar{container-type:inline-size;position:relative;width:100%;max-width:620px;aspect-ratio:560/480}
.radar svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}

.radar-orb{position:absolute;left:var(--core-x);top:var(--core-y);width:90%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(248,210,119,0.65) 0%,rgba(248,210,119,0.22) 42%,rgba(248,210,119,0) 70%);
  transform:translate(-50%,-50%);animation:breathe 9s ease-in-out infinite}
.radar-glow{position:absolute;aspect-ratio:1;border-radius:50%}
.radar-glow--tr{right:-8%;top:-10%;width:56%;background:radial-gradient(circle,rgba(140,158,255,0.5) 0%,rgba(140,158,255,0) 68%)}
.radar-glow--bl{left:-6%;bottom:-8%;width:45.5%;background:radial-gradient(circle,rgba(140,158,255,0.32) 0%,rgba(140,158,255,0) 68%)}

/* the map fades out toward its edges */
.radar-map{position:absolute;left:0;top:0;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 58%,transparent 100%);
          mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 58%,transparent 100%)}

/* map dots (the path data is filled in by the script at the bottom of the page) */
.dots{fill:none;stroke-linecap:round;stroke-width:4.6}
.dots--far{stroke:var(--navy);stroke-opacity:0.24}
.dots--mid,.dots--near{stroke:var(--navy-hover);stroke-opacity:0.46}
.dots--twinkle{stroke:var(--blue-dot);opacity:0;animation:twinkle 4.5s ease-in-out infinite}

/* gold layer, only visible inside the rotating wedge = the radar sweep */
.radar-sweep{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:var(--core-x) var(--core-y);animation:spin 9s linear infinite;
  -webkit-mask-image:conic-gradient(from 0deg at var(--core-x) var(--core-y),transparent 0deg,transparent 235deg,#000 360deg);
          mask-image:conic-gradient(from 0deg at var(--core-x) var(--core-y),transparent 0deg,transparent 235deg,#000 360deg)}
.radar-sweep svg{transform-origin:var(--core-x) var(--core-y);animation:spin-reverse 9s linear infinite}
.dots--lit{stroke:var(--gold-sweep);stroke-width:5.6}
.radar-sweepline{position:absolute;left:calc(var(--core-x) - 1px);bottom:calc(100% - var(--core-y));width:2px;height:50%;transform-origin:50% 100%;
  background:linear-gradient(to top,rgba(226,167,31,0.95),rgba(226,167,31,0));animation:spin 9s linear infinite}

/* sonar rings, connection arcs, traveling pulses, city hubs */
.sonar{fill:none;stroke:var(--gold-line);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:sonar 7s ease-out infinite}
.arcs path{fill:none;stroke:var(--navy);stroke-opacity:0.35;stroke-width:1.5}
.pulses path{fill:none;stroke:var(--gold-line);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:6 94;animation:travel 3.6s ease-in-out infinite}
.hub-rings circle{fill:none;stroke:var(--gold-line);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:hub-pulse 3.2s ease-out infinite}
.hubs circle{fill:var(--gold);stroke:var(--navy);stroke-width:2}

/* city names: the modifier says where the name sits next to its dot */
.city{position:absolute;left:var(--x);top:var(--y);font-size:clamp(10px,2.1cqw,12px);font-weight:700;letter-spacing:0.02em;color:var(--navy);white-space:nowrap;
  text-shadow:0 0 6px var(--bg),0 0 6px var(--bg),0 0 10px var(--bg)}
.city--right{transform:translate(10px,-50%)}
.city--left{transform:translate(calc(-100% - 10px),-50%)}
.city--above{transform:translate(-50%,calc(-100% - 10px))}
.city--below{transform:translate(-50%,10px)}

/* center badge with the logo */
.radar-ring{position:absolute;left:var(--core-x);top:var(--core-y);width:clamp(48px,16.5cqw,104px);height:clamp(48px,16.5cqw,104px);border-radius:25%;
  border:1px solid var(--gold-line);transform:translate(-50%,-50%);opacity:0}
.radar-badge{position:absolute;left:var(--core-x);top:var(--core-y);transform:translate(-50%,-50%);width:clamp(48px,16.5cqw,104px);height:clamp(48px,16.5cqw,104px);
  box-sizing:border-box;border-radius:50%;border:clamp(2px,0.7cqw,4px) solid var(--gold-badge);background:var(--navy);overflow:hidden}
.radar-badge img{position:absolute;left:50%;top:50%;width:90%;height:90%;object-fit:contain;transform:translate(-50%,-50%);display:block}

/* floating audience labels */
.pill{position:absolute;left:var(--x);top:var(--y);animation:float 5s ease-in-out infinite;animation-delay:var(--d);transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--white);color:var(--navy);
  font-size:clamp(10px,2.3cqw,13px);font-weight:700;line-height:1.2;white-space:nowrap;box-shadow:0 8px 24px rgba(1,10,90,0.16)}
.pill-icon{flex:0 0 auto;width:clamp(22px,5.2cqw,28px);height:clamp(22px,5.2cqw,28px);border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center}
.pill-icon svg{position:static;width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the four services under the graphic */
.services-line{width:100%;max-width:620px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.services-line li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy)}
.services-line svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--gold-line);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- partner strip ---------- */
.partners{background:var(--white);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:32px 0 40px;display:flex;flex-direction:column;gap:28px}
.partners h2{margin:0;padding:0 var(--gutter);text-align:center;font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-soft)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-track.is-looping{animation:scroll 92s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex}
.marquee-item{display:flex;align-items:center;flex:0 0 auto;margin-right:80px}
.marquee-item img{display:block;width:auto;max-width:none}

/* ---------- animations ---------- */
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes travel{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes sonar{0%{transform:scale(0.13);opacity:0.6}100%{transform:scale(1);opacity:0}}
@keyframes hub-pulse{0%{transform:scale(1);opacity:0.85}100%{transform:scale(3.4);opacity:0}}
@keyframes twinkle{0%,100%{opacity:0}45%,55%{opacity:0.95}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-reverse{to{transform:rotate(-360deg)}}
@keyframes float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
@keyframes ring{0%{transform:translate(-50%,-50%) scale(1);opacity:0.1}50%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}

/* people who ask for less motion get a still picture */
@media (prefers-reduced-motion:reduce){
  .marquee-track.is-looping,.pulses path,.sonar,.hub-rings circle,.dots--twinkle,.radar-sweep,.radar-sweep svg,.radar-sweepline,.pill,.radar-ring,.radar-orb{animation:none}
  .pulses,.radar-sweep,.radar-sweepline{display:none}
}

/* ---------- base for the new sections (scoped, so the rest of the site is untouched) ---------- */
.hero,.partners{font-family:var(--font-body);line-height:normal;color:var(--text)}
.hero a,.partners a{text-decoration:none}
.hero a:focus-visible{outline:3px solid var(--blue-dot);outline-offset:3px}
.hero ul,.partners ul{margin:0;padding:0;list-style:none}

/* ---------- keep the new text sizes: the old global h1/h2 mobile rules use !important ---------- */
.hero h1{font-size:clamp(34px,4.2vw,54px) !important;line-height:1.1 !important}
.partners h2{font-size:14px !important}
/* the old global "span {white-space:normal !important}" must not wrap the map labels */
.radar .pill span,.radar .city{white-space:nowrap !important}