/* ==========================================================
   CALICO IIM - Corporate Website Styles
   Brand: Modern AI palette (violet, cyan, magenta)
   ========================================================== */

:root {
    /* Primary brand — Modern AI palette */
    --calico-violet: #8B5CF6;       /* Primary accent */
    --calico-cyan: #06B6D4;         /* Secondary */
    --calico-magenta: #EC4899;      /* Tertiary */
    --calico-violet-light: #A78BFA; /* Hover / lighter tint */
    --calico-violet-dark: #7C3AED;  /* Pressed / deeper tint */

    /* Legacy aliases — kept so existing selectors (e.g. .btn-calico, .text-calico-orange) keep working */
    --calico-orange: var(--calico-violet);
    --calico-amber: var(--calico-violet-light);
    --calico-burnt: var(--calico-violet-dark);

    /* Neutrals */
    --calico-dark: #0F1116;
    --calico-charcoal: #1F2232;
    --calico-cream: #FAF7FF;        /* Violet-tinted off-white */
    --calico-light: #F5F3FF;        /* Lighter violet-tint */
    --calico-white: #FFFFFF;
    --calico-text: #111827;
    --calico-muted: #6B7280;
    --section-padding: 6rem;
}

/* ==========================================================
   BASE
   ========================================================== */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--calico-text);
    background: var(--calico-white);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--calico-orange);
    color: white;
}

/* ==========================================================
   UTILITIES
   ========================================================== */
.text-calico-orange {
    color: var(--calico-orange) !important;
}

/* Logo-matched brand utility colors (violet = primary dot, cyan = top dot, magenta = bottom dot). */
.text-calico-violet  { color: var(--calico-violet)  !important; }
.text-calico-cyan    { color: var(--calico-cyan)    !important; }
.text-calico-magenta { color: var(--calico-magenta) !important; }

/* ==========================================================
   SCROLL RAIL (fil d'Ariane) — fixed left-side progress indicator.
   9 dots, one per section, colored to match each section theme.
   Hidden on small screens to avoid visual clutter.
   ========================================================== */
.scroll-rail {
    position: fixed;
    left: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 0.5rem;
}

/* Subtle connecting line behind the dots */
.scroll-rail::before {
    content: '';
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(148, 163, 184, 0.25) 10%,
        rgba(148, 163, 184, 0.25) 90%,
        transparent
    );
    transform: translateX(-0.5px);
    z-index: -1;
}

.rail-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.35);
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
    display: block;
}

.rail-dot:hover {
    transform: scale(1.4);
    background: rgba(148, 163, 184, 0.7);
}

/* Tooltip label on hover */
.rail-dot::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: rgba(15, 17, 22, 0.92);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.rail-dot:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Active state — grows + glows in its theme color */
.rail-dot.active {
    width: 14px;
    height: 14px;
}
.rail-dot[data-rail-color="violet"].active  { background: var(--calico-violet);  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.25), 0 0 16px rgba(139, 92, 246, 0.6); }
.rail-dot[data-rail-color="cyan"].active    { background: var(--calico-cyan);    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.25), 0 0 16px rgba(6, 182, 212, 0.6); }
.rail-dot[data-rail-color="magenta"].active { background: var(--calico-magenta); box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.25), 0 0 16px rgba(236, 72, 153, 0.6); }

/* Hide the rail whenever horizontal real-estate is tight. The 1200px
   threshold catches phones and tablets in portrait (iPad 11" at 834px,
   iPad Pro 12.9" at 1024px) without killing it on landscape desktop
   monitors between 1200 and 1399px. */
@media (max-width: 1199.98px) {
    .scroll-rail {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ==========================================================
   SCROLL REVEAL ANIMATIONS
   Any element with .reveal starts hidden + offset; when it enters
   the viewport, JS adds .reveal-in to play the entrance animation.
   Variants add a second class (.reveal-scale, .reveal-left, ...) to
   pick a different entrance curve, assigned by site.js based on the
   element's role on the page (cards scale, headings slide up, media
   slides in from the side).
   ========================================================== */
.reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.85s cubic-bezier(0.16, 0.84, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 0.84, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.reveal-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* --- Variants --- */
.reveal.reveal-scale     { transform: translate3d(0, 18px, 0) scale(0.965); }
.reveal.reveal-scale.reveal-in { transform: translate3d(0, 0, 0) scale(1); }

.reveal.reveal-left      { transform: translate3d(-36px, 0, 0); }
.reveal.reveal-left.reveal-in  { transform: translate3d(0, 0, 0); }

.reveal.reveal-right     { transform: translate3d(36px, 0, 0); }
.reveal.reveal-right.reveal-in { transform: translate3d(0, 0, 0); }

.reveal.reveal-blur      { filter: blur(6px); }
.reveal.reveal-blur.reveal-in  { filter: blur(0); }

/* Stagger — each successive sibling delays a little. Enough steps to
   cover tile grids (4x2 stat bento, 6-card value grid, etc.). */
.reveal[data-reveal-delay="1"]  { transition-delay: 0.06s; }
.reveal[data-reveal-delay="2"]  { transition-delay: 0.12s; }
.reveal[data-reveal-delay="3"]  { transition-delay: 0.18s; }
.reveal[data-reveal-delay="4"]  { transition-delay: 0.24s; }
.reveal[data-reveal-delay="5"]  { transition-delay: 0.30s; }
.reveal[data-reveal-delay="6"]  { transition-delay: 0.36s; }
.reveal[data-reveal-delay="7"]  { transition-delay: 0.42s; }
.reveal[data-reveal-delay="8"]  { transition-delay: 0.48s; }

/* Parallax: decorative elements gently drift as the page scrolls.
   The translateY value is driven by site.js via a CSS custom property
   so the effect remains GPU-only and respects reduced-motion. */
.parallax {
    will-change: transform;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
    transition: transform 0.08s linear;
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.reveal-scale,
    .reveal.reveal-left,
    .reveal.reveal-right,
    .reveal.reveal-blur { opacity: 1; transform: none; filter: none; transition: none; }
    .parallax { transform: none !important; }
}

/* ==========================================================
   PHOSPHOR DUOTONE ICONS
   Replaces generic stroke SVGs with a polished duotone icon set.
   Colors inherit from `color` — each themed section colors its icons.
   ========================================================== */
.ph-duotone {
    font-style: normal;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tech-icon    .ph-duotone,
.promise-icon .ph-duotone,
.approach-icon .ph-duotone { font-size: 1.75rem; color: inherit; }

.sector-card   .ph-duotone { font-size: 2rem; margin-bottom: .5rem; color: inherit; display: block; }
.contact-card  .ph-duotone { font-size: 2.5rem; margin-bottom: .25rem; color: inherit; }

/* Theme sections override the icon color */
.theme-violet  .ph-duotone,
.theme-cyan    .ph-duotone,
.theme-magenta .ph-duotone { color: var(--theme); }

/* ==========================================================
   SECTION THEMES — unified brand color per section.
   Add .theme-violet / .theme-cyan / .theme-magenta to a <section>
   and every primary accent inside (label, stat numbers, etc.) adopts it.
   ========================================================== */
.theme-violet  { --theme: #8B5CF6; --theme-rgb: 139, 92, 246; }
.theme-cyan    { --theme: #06B6D4; --theme-rgb: 6, 182, 212; }
.theme-magenta { --theme: #EC4899; --theme-rgb: 236, 72, 153; }

/* Section labels no longer take the theme color — the 3 dots carry
   the brand signature; the text stays neutral for a unified look. */

.theme-violet  .stat-number,
.theme-cyan    .stat-number,
.theme-magenta .stat-number { color: var(--theme); }

/* All other card types (promise / value / approach / sector) also adopt the
   section theme so every tile within a section shares one accent color. */
.theme-violet  .promise-icon,
.theme-cyan    .promise-icon,
.theme-magenta .promise-icon,
.theme-violet  .approach-icon,
.theme-cyan    .approach-icon,
.theme-magenta .approach-icon { background: rgba(var(--theme-rgb), 0.12); }

.theme-violet  .promise-card svg,
.theme-cyan    .promise-card svg,
.theme-magenta .promise-card svg,
.theme-violet  .approach-card svg,
.theme-cyan    .approach-card svg,
.theme-magenta .approach-card svg,
.theme-violet  .sector-card svg,
.theme-cyan    .sector-card svg,
.theme-magenta .sector-card svg { stroke: var(--theme); }

.theme-violet  .value-card,
.theme-cyan    .value-card,
.theme-magenta .value-card,
.theme-violet  .value-card-dark,
.theme-cyan    .value-card-dark,
.theme-magenta .value-card-dark { border-left-color: var(--theme); }

.theme-violet  .value-card-dark:hover,
.theme-cyan    .value-card-dark:hover,
.theme-magenta .value-card-dark:hover {
    background: rgba(var(--theme-rgb), 0.06);
    border-color: rgba(var(--theme-rgb), 0.25);
    border-left-color: var(--theme);
}

.theme-violet  .promise-card:hover,
.theme-cyan    .promise-card:hover,
.theme-magenta .promise-card:hover,
.theme-violet  .approach-card:hover,
.theme-cyan    .approach-card:hover,
.theme-magenta .approach-card:hover,
.theme-violet  .sector-card:hover,
.theme-cyan    .sector-card:hover,
.theme-magenta .sector-card:hover { border-color: rgba(var(--theme-rgb), 0.3); }

/* "Highlighter pen" effect on emphasized words inside page titles.
   Scoped to hero/section titles only — doesn't affect navbar brand or footer links.
   Three color variants matching the logo dots (violet / cyan / magenta) so consecutive
   titles can alternate for a playful, on-brand rhythm. */
/* Hero title highlight — brand-gradient text fill in the same weight
   and typeface as the rest of the title. Gradient alone carries the
   emphasis; no additional serif. */
.hero-title .text-calico-violet,
.hero-title .text-calico-cyan,
.hero-title .text-calico-magenta,
.hero-title .text-calico-orange {
    background-image: linear-gradient(135deg, #A78BFA 0%, #22D3EE 50%, #F472B6 100%) !important;
    background-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Section title highlights — subtler highlighter-pen marker in theme color */
.section-title .text-calico-orange,
.section-title .text-calico-violet {
    background: linear-gradient(transparent 64%, rgba(139, 92, 246, 0.16) 64%);
    padding: 0 4px;
    border-radius: 2px;
}
.section-title .text-calico-cyan {
    background: linear-gradient(transparent 64%, rgba(6, 182, 212, 0.16) 64%);
    padding: 0 4px;
    border-radius: 2px;
}
.section-title .text-calico-magenta {
    background: linear-gradient(transparent 64%, rgba(236, 72, 153, 0.18) 64%);
    padding: 0 4px;
    border-radius: 2px;
}

/* On dark sections, slightly more alpha so the highlight stays legible. */
.bg-dark-section .section-title .text-calico-orange,
.bg-dark-section .section-title .text-calico-violet {
    background: linear-gradient(transparent 62%, rgba(167, 139, 250, 0.32) 62%);
}
.bg-dark-section .section-title .text-calico-cyan {
    background: linear-gradient(transparent 62%, rgba(34, 211, 238, 0.32) 62%);
}
.bg-dark-section .section-title .text-calico-magenta {
    background: linear-gradient(transparent 62%, rgba(244, 114, 182, 0.32) 62%);
}

.bg-cream {
    background-color: var(--calico-cream) !important;
}

.bg-dark-section {
    background-color: var(--calico-dark) !important;
}

.section-padding {
    padding: var(--section-padding) 0;
}

/* Section label — unified brand-signature treatment.
   The 3 logo dots (rendered via a single ::before pseudo-element) appear
   inline with monospace uppercase text. Same visual motif as the
   .brand-marker used on the hero tile, propagated across the whole site. */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--calico-text);
    margin-bottom: 1.1rem;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.section-label::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 28px;
    height: 6px;
    background:
        radial-gradient(circle at 3px 3px, var(--calico-violet) 3px, transparent 3.5px),
        radial-gradient(circle at 14px 3px, var(--calico-cyan) 3px, transparent 3.5px),
        radial-gradient(circle at 25px 3px, var(--calico-magenta) 3px, transparent 3.5px);
}

/* On dark sections, the text flips to light for legibility — the
   3 brand dots stay the same so the signature reads identically. */
.bg-dark-section .section-label,
.section-label-light {
    color: rgba(255, 255, 255, 0.85);
}

.section-title {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--calico-dark);
}

.bg-dark-section .section-title {
    color: var(--calico-white);
}

/* ==========================================================
   NAVBAR
   ========================================================== */
#mainNav {
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.8rem 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

#mainNav.scrolled {
    padding: 0.5rem 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.navbar-brand {
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}

.navbar-brand:hover {
    opacity: 0.9;
}

#mainNav .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: color 0.2s ease;
    position: relative;
}

#mainNav .nav-link:hover,
#mainNav .nav-link.active {
    color: var(--calico-orange) !important;
}

#mainNav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--calico-orange);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

#mainNav .nav-link:hover::after,
#mainNav .nav-link.active::after {
    transform: scaleX(1);
}

/* Each nav link's hover + underline matches the target section's theme color. */
#mainNav .nav-link[href$="#about"]:hover,
#mainNav .nav-link[href$="#about"].active { color: var(--calico-cyan) !important; }
#mainNav .nav-link[href$="#about"]::after { background: var(--calico-cyan); }

#mainNav .nav-link[href$="#companies"]:hover,
#mainNav .nav-link[href$="#companies"].active { color: var(--calico-violet) !important; }
#mainNav .nav-link[href$="#companies"]::after { background: var(--calico-violet); }

#mainNav .nav-link[href$="#technology"]:hover,
#mainNav .nav-link[href$="#technology"].active { color: var(--calico-magenta) !important; }
#mainNav .nav-link[href$="#technology"]::after { background: var(--calico-magenta); }

#mainNav .nav-link[href$="#join"]:hover,
#mainNav .nav-link[href$="#join"].active { color: var(--calico-violet) !important; }
#mainNav .nav-link[href$="#join"]::after { background: var(--calico-violet); }

#mainNav .nav-link[href$="#values"]:hover,
#mainNav .nav-link[href$="#values"].active { color: var(--calico-magenta) !important; }
#mainNav .nav-link[href$="#values"]::after { background: var(--calico-magenta); }

#mainNav .nav-link[href$="#sectors"]:hover,
#mainNav .nav-link[href$="#sectors"].active { color: var(--calico-cyan) !important; }
#mainNav .nav-link[href$="#sectors"]::after { background: var(--calico-cyan); }

/* Contact is now a real page (/{culture}/Contact), so target it by the
   dedicated class we add on the link, not by an anchor URL match. */
#mainNav .nav-link-contact:hover,
#mainNav .nav-link-contact.active { color: var(--calico-magenta) !important; }
#mainNav .nav-link-contact::after { background: var(--calico-magenta); }

.calico-logo {
    flex-shrink: 0;
}

/* ==========================================================
   CUSTOM HAMBURGER TOGGLER — 3 brand dots that morph into an X.
   ========================================================== */
.custom-toggler {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    z-index: 1100;
    cursor: pointer;
}
.custom-toggler:focus { outline: none !important; box-shadow: none !important; }

/* Three horizontal lines — standard hamburger, morphs into X when open.
   Lines are monochrome white so they never read as the brand logo. */
.custom-toggler .toggler-dot {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: top 0.3s cubic-bezier(0.2, 0, 0, 1) 0.1s,
                transform 0.3s cubic-bezier(0.2, 0, 0, 1),
                opacity 0.2s ease;
    will-change: top, transform, opacity;
}
.custom-toggler .toggler-dot-1 { top: 14px; }
.custom-toggler .toggler-dot-2 { top: 21px; }
.custom-toggler .toggler-dot-3 { top: 28px; }

/* Open state: morph into an X */
.custom-toggler[aria-expanded="true"] .toggler-dot {
    transition: top 0.3s cubic-bezier(0.2, 0, 0, 1),
                transform 0.3s cubic-bezier(0.2, 0, 0, 1) 0.1s,
                opacity 0.2s ease;
}
.custom-toggler[aria-expanded="true"] .toggler-dot-1 { top: 21px; transform: rotate(45deg); }
.custom-toggler[aria-expanded="true"] .toggler-dot-2 { opacity: 0; transform: scaleX(0); }
.custom-toggler[aria-expanded="true"] .toggler-dot-3 { top: 21px; transform: rotate(-45deg); }

/* ==========================================================
   FULL-SCREEN MOBILE MENU — takes over the viewport on mobile/tablet.
   Large numbered links, each item carries one of the 3 brand colors,
   staggered entrance animation, animated gradient mesh backdrop.
   ========================================================== */
@media (max-width: 991.98px) {
    body.menu-open { overflow: hidden; }
    /* Keep the navbar opaque on mobile so the brand bar is always readable
       and never looks "see-through". */

    #mainNav .navbar-collapse {
        position: fixed !important;
        inset: 0;
        height: 100dvh;
        min-height: 100vh;
        width: 100vw;
        background:
            radial-gradient(ellipse at 80% 10%, rgba(139, 92, 246, 0.22), transparent 55%),
            radial-gradient(ellipse at 10% 90%, rgba(236, 72, 153, 0.18), transparent 55%),
            radial-gradient(ellipse at 90% 90%, rgba(6, 182, 212, 0.15), transparent 55%),
            linear-gradient(160deg, #0B0C10 0%, #141028 60%, #0B0C10 100%);
        display: flex !important;
        flex-direction: column !important;
        justify-content: center;
        align-items: flex-start;
        padding: 5.5rem 2rem 2rem;
        z-index: 1050;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.35s cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 0.35s;
        overflow-y: auto;
    }

    /* Bootstrap's "collapsing" in-progress + "show" both mean: open */
    #mainNav .navbar-collapse.show,
    #mainNav .navbar-collapse.collapsing {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        height: 100dvh !important;
        transition: opacity 0.35s cubic-bezier(0.2, 0, 0, 1);
    }

    /* Subtle grid texture for depth */
    #mainNav .navbar-collapse::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        background-size: 64px 64px;
        pointer-events: none;
    }

    #mainNav .navbar-nav {
        counter-reset: menu-counter;
        width: 100%;
        gap: 0.25rem;
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 1;
    }

    #mainNav .nav-item {
        counter-increment: menu-counter;
        opacity: 0;
        transform: translateX(-30px);
        transition: opacity 0.5s cubic-bezier(0.2, 0, 0, 1), transform 0.5s cubic-bezier(0.2, 0, 0, 1);
    }

    /* Staggered entrance */
    #mainNav .navbar-collapse.show .nav-item:nth-child(1) { transition-delay: 0.12s; }
    #mainNav .navbar-collapse.show .nav-item:nth-child(2) { transition-delay: 0.18s; }
    #mainNav .navbar-collapse.show .nav-item:nth-child(3) { transition-delay: 0.24s; }
    #mainNav .navbar-collapse.show .nav-item:nth-child(4) { transition-delay: 0.30s; }
    #mainNav .navbar-collapse.show .nav-item:nth-child(5) { transition-delay: 0.36s; }
    #mainNav .navbar-collapse.show .nav-item:nth-child(6) { transition-delay: 0.42s; }
    #mainNav .navbar-collapse.show .nav-item:nth-child(7) { transition-delay: 0.48s; }

    #mainNav .navbar-collapse.show .nav-item {
        opacity: 1;
        transform: translateX(0);
    }

    #mainNav .nav-link {
        display: flex !important;
        align-items: baseline;
        gap: 1rem;
        font-size: 2.5rem !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        padding: 0.5rem 0 !important;
        color: #fff !important;
        letter-spacing: -0.02em;
        transition: transform 0.25s ease, color 0.25s ease;
    }

    #mainNav .nav-link::before {
        content: counter(menu-counter, decimal-leading-zero);
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        color: rgba(255, 255, 255, 0.3);
        font-family: 'JetBrains Mono', 'Consolas', monospace;
        min-width: 1.75rem;
    }

    #mainNav .nav-link::after { display: none !important; }

    #mainNav .nav-link:active,
    #mainNav .nav-link:hover {
        transform: translateX(6px);
    }

    /* Each item rotates through the 3 brand colors on tap/hover,
       matching the theme of its target section on the page. */
    #mainNav .nav-item:nth-child(1) .nav-link:hover,
    #mainNav .nav-item:nth-child(1) .nav-link:active,
    #mainNav .nav-item:nth-child(1) .nav-link.active { color: var(--calico-cyan) !important; }     /* About */
    #mainNav .nav-item:nth-child(2) .nav-link:hover,
    #mainNav .nav-item:nth-child(2) .nav-link:active,
    #mainNav .nav-item:nth-child(2) .nav-link.active { color: var(--calico-violet) !important; }  /* Companies */
    #mainNav .nav-item:nth-child(3) .nav-link:hover,
    #mainNav .nav-item:nth-child(3) .nav-link:active,
    #mainNav .nav-item:nth-child(3) .nav-link.active { color: var(--calico-magenta) !important; } /* Our Approach */
    #mainNav .nav-item:nth-child(4) .nav-link:hover,
    #mainNav .nav-item:nth-child(4) .nav-link:active,
    #mainNav .nav-item:nth-child(4) .nav-link.active { color: var(--calico-violet) !important; }  /* Join Us */
    #mainNav .nav-item:nth-child(5) .nav-link:hover,
    #mainNav .nav-item:nth-child(5) .nav-link:active,
    #mainNav .nav-item:nth-child(5) .nav-link.active { color: var(--calico-magenta) !important; } /* Values */
    #mainNav .nav-item:nth-child(6) .nav-link:hover,
    #mainNav .nav-item:nth-child(6) .nav-link:active,
    #mainNav .nav-item:nth-child(6) .nav-link.active { color: var(--calico-cyan) !important; }    /* Sectors */
    #mainNav .nav-item:nth-child(7) .nav-link:hover,
    #mainNav .nav-item:nth-child(7) .nav-link:active,
    #mainNav .nav-item:nth-child(7) .nav-link.active { color: var(--calico-magenta) !important; } /* Contact */

    /* Language trigger (inside the mobile overlay) — fade in with the
       other nav items so it lands at the bottom of the stack. The
       dropdown-panel styling is handled by the main .lang-panel rules. */
    #mainNav .lang-trigger {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.5s cubic-bezier(0.2, 0, 0, 1) 0.5s,
                    transform 0.5s cubic-bezier(0.2, 0, 0, 1) 0.5s,
                    border-color 0.2s ease,
                    color 0.2s ease,
                    background 0.2s ease,
                    box-shadow 0.2s ease;
    }
    #mainNav .navbar-collapse.show .lang-trigger {
        opacity: 1;
        transform: translateY(0);
    }

    /* Brand signature at the bottom of the overlay */
    #mainNav .navbar-collapse::after {
        content: 'CALICO IIM · Toulouse → London';
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        color: rgba(255, 255, 255, 0.25);
        z-index: 1;
    }
}

/* ==========================================================
   BUTTONS
   ========================================================== */
/* ---------- Unified button system with Calico arrow-slide ----------
   Every primary/secondary button gets a CSS-drawn arrow that slides
   right on hover. Signature micro-interaction. */
.btn-calico,
.btn-outline-calico,
.btn-outline-light,
.company-card .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.005em;
    padding: 0.65rem 1.35rem;
    border-radius: 8px;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1),
                background 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                gap 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.btn-calico::after,
.btn-outline-calico::after,
.btn-outline-light::after,
.company-card .btn::after {
    content: '→';
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
    font-weight: 500;
    font-size: 0.95em;
    line-height: 1;
}

.btn-calico:hover::after,
.btn-outline-calico:hover::after,
.btn-outline-light:hover::after,
.company-card .btn:hover::after {
    transform: translateX(4px);
}

.btn-calico {
    background: var(--calico-violet);
    color: #fff;
    border: 1px solid var(--calico-violet);
}

.btn-calico:hover {
    background: var(--calico-violet-dark);
    border-color: var(--calico-violet-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(139, 92, 246, 0.28);
}

.btn-outline-calico {
    background: transparent;
    color: var(--calico-violet);
    border: 1px solid rgba(139, 92, 246, 0.35);
}

.btn-outline-calico:hover {
    background: var(--calico-violet);
    border-color: var(--calico-violet);
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
    transform: translateY(-1px);
}

/* ==========================================================
   HERO
   ========================================================== */
.hero-section {
    background: linear-gradient(135deg, var(--calico-dark) 0%, #12121F 50%, #1E1A2E 100%);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding-top: 5.5rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
}

.hero-section .min-vh-100 {
    min-height: calc(100vh - 7.5rem) !important;
}

/* Animated gradient mesh — violet / cyan / magenta blobs drifting
   behind the hero content. The Stripe/Anthropic signature. */
.hero-bg-pattern {
    position: absolute;
    inset: -10%;
    background-image:
        radial-gradient(ellipse 600px 420px at 18% 22%, rgba(139, 92, 246, 0.32) 0%, transparent 65%),
        radial-gradient(ellipse 520px 380px at 82% 68%, rgba(236, 72, 153, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 680px 460px at 65% 15%, rgba(6, 182, 212, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 450px 350px at 10% 90%, rgba(167, 139, 250, 0.18) 0%, transparent 60%);
    filter: blur(10px);
    animation: meshDrift 38s cubic-bezier(0.4, 0.0, 0.6, 1.0) infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes meshDrift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(-2%, 1.5%) scale(1.04); }
    66%  { transform: translate(2%, -1.5%) scale(1.02); }
    100% { transform: translate(0, 2%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg-pattern { animation: none; }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: var(--calico-amber);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--calico-orange);
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--calico-white);
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

/* Hero photo — animated, alternates between Toulouse and London,
   with a brand-gradient accent line on the left, soft left-edge blend
   into the dark background, and a "live" caption chip. */
.hero-photo {
    position: relative;
    padding-left: 1.5rem;
}

/* Vertical brand-gradient accent bar (full height, fading top + bottom) */
.hero-photo::before {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--calico-violet) 25%,
        var(--calico-cyan) 60%,
        var(--calico-magenta) 90%,
        transparent 100%
    );
    border-radius: 2px;
    opacity: 0.85;
}

/* Small tick marks along the accent bar */
.hero-photo::after {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: -2px;
    width: 6px;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1.5px);
    background-size: 6px 24px;
    background-repeat: repeat-y;
    opacity: 0.6;
    pointer-events: none;
}

.hero-photo-frame {
    position: relative;
    border-radius: 24px 80px 24px 80px;
    overflow: hidden;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-photo-frame img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.2);
    object-fit: cover;
    transition: opacity 0.5s cubic-bezier(0.2, 0, 0, 1),
                filter 0.5s cubic-bezier(0.2, 0, 0, 1);
    /* Subtle soft blend on the very left edge into the dark bg */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 100%);
}

.hero-photo-frame img.hero-img-fading {
    opacity: 0;
    filter: blur(6px);
}

/* Bottom-left "live" caption chip overlaid on the image */
.hero-photo-caption {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.85rem;
    background: rgba(11, 12, 16, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2;
}

.hero-photo-caption-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--calico-magenta);
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.6);
    animation: chipPulse 2s cubic-bezier(0.2, 0, 0, 1) infinite;
}

/* Small decorative corner accent (top-right) — 3 brand dots */
.hero-photo-corner {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 6px;
    z-index: 2;
}
.hero-photo-corner::before,
.hero-photo-corner::after,
.hero-photo-corner {
    /* use nth-child-ish trick via direct children won't work on empty;
       so set up as 3 spans via box-shadow on pseudo */
}
.hero-photo-corner::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--calico-violet);
    box-shadow:
        12px 0 0 var(--calico-cyan),
        24px 0 0 var(--calico-magenta);
    opacity: 0.9;
}

/* Hero trust strip */
.hero-trust {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.25rem;
    margin-bottom: 0;
}

/* ---------- Trust strip ----------
   Real brand SVG logos in greyscale, unified sizing. Each logo's
   natural aspect ratio is respected via max-height + auto width.
   Subtle opacity bump on hover. */
.trust-strip {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.trust-strip-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.trust-wordmarks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    color: rgba(255, 255, 255, 0.55);
    max-width: 620px;
}

/* All 5 logos share the exact same box: 200x48 viewBox, height 30px.
   SVG text uses fill="#FFFFFF"; CSS opacity controls visible weight. */
.trust-logo {
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    opacity: 0.55;
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: block;
}

.trust-logo:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

@media (min-width: 992px) and (max-width: 1399px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }
}

/* Hero formula visual */
.hero-visual {
    display: flex;
    justify-content: center;
}

.formula-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    backdrop-filter: blur(10px);
}

.formula-item {
    text-align: center;
    color: white;
    padding: 1rem;
}

.formula-item span {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 0.5rem;
}

.formula-item small {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.formula-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(139, 92, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.formula-operator {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--calico-orange);
}

.formula-result {
    position: relative;
}

.formula-result .formula-icon {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
}

/* ==========================================================
   STAT CARDS
   ========================================================== */
/* ---------- Editorial prose block ----------
   Used for long-form paragraphs. Lead paragraph is larger + darker
   (signature move from The New Yorker / Stripe / Medium), followed by
   a gradient divider, then body paragraph. A vertical gradient accent
   line runs along the left edge to tie the block to the brand. */
.prose-block {
    position: relative;
    padding-left: 1.25rem;
    max-width: 42rem;
}

.prose-block::before {
    content: '';
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 0;
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--calico-cyan) 0%,
        var(--calico-violet) 50%,
        var(--calico-magenta) 100%
    );
    opacity: 0.55;
    border-radius: 2px;
}

.prose-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--calico-text);
    font-weight: 500;
    margin: 0 0 1.1rem 0;
    letter-spacing: -0.005em;
}

.prose-lead::first-letter {
    font-weight: 700;
    color: var(--calico-violet);
}

.prose-divider {
    width: 3rem;
    height: 1px;
    margin: 1.1rem 0;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.5), transparent);
}

.prose-body {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--calico-muted);
    margin: 0;
}

/* On dark sections, invert prose colors */
.bg-dark-section .prose-lead { color: rgba(255, 255, 255, 0.92); }
.bg-dark-section .prose-body { color: rgba(255, 255, 255, 0.62); }
.bg-dark-section .prose-block::before { opacity: 0.7; }

/* ---------- Bento-style stats grid (About section) ----------
   Asymmetric layout: one featured hero tile (double-height) +
   3 supporting tiles. Gradient numbers, colored glow shadows,
   icons for personality, subtle grid texture for depth. */

.stats-bento {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.9rem;
    height: 100%;
    min-height: 420px;
}

.stat-tile {
    position: relative;
    background:
        linear-gradient(135deg, #FFFFFF 0%, #F8FAFF 100%);
    border: 1px solid rgba(6, 182, 212, 0.14);
    border-radius: 20px;
    padding: 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.35s cubic-bezier(0.2, 0, 0, 1),
                border-color 0.25s ease;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(6, 182, 212, 0.06);
}

.stat-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(6, 182, 212, 0.25);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 14px 36px rgba(15, 23, 42, 0.07);
}

/* Subtle grid texture on every tile */
.stat-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(6, 182, 212, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    opacity: 0.5;
}

/* Featured hero tile — spans two rows, bigger typography, colored wash */
.stat-tile-hero {
    grid-row: span 2;
    padding: 2rem 2rem 1.5rem;
    background:
        linear-gradient(135deg, #F5FEFF 0%, #EEF4FF 60%, #FFF0F8 100%);
    border-color: rgba(6, 182, 212, 0.22);
}

.stat-tile-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -35%;
    width: 85%;
    height: 120%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.22), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.stat-tile-hero > * { position: relative; z-index: 1; }

.stat-icon {
    font-size: 1.6rem !important;
    color: var(--calico-cyan) !important;
    opacity: 0.92;
}
.stat-tile-hero .stat-icon { font-size: 2rem !important; }

/* Numbers — big, bold, with brand gradient clip */
.stat-number {
    display: block;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    margin-bottom: 0.45rem;
    background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.stat-tile-hero .stat-number {
    font-size: 4.75rem;
    background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 55%, #EC4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--calico-muted);
    line-height: 1.4;
    font-weight: 500;
}

.stat-tile-hero .stat-label {
    font-size: 1rem;
    color: var(--calico-text);
    font-weight: 600;
    line-height: 1.45;
    max-width: 22ch;
}

.stat-accent-line {
    width: 100%;
    height: 12px;
    opacity: 0.6;
    margin-top: auto;
}

@media (max-width: 767.98px) {
    .stats-bento {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        min-height: 0;
    }
    .stat-tile-hero {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .stat-tile-hero .stat-number { font-size: 3.5rem; }
    .stat-number { font-size: 2.25rem; }
}

/* ==========================================================
   COMPANY CARDS
   ========================================================== */
.company-card {
    background: var(--calico-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.company-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--calico-orange);
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.company-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.company-card:hover::before {
    transform: scaleX(1);
}

/* Company logos */
.company-logo {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    height: 28px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}

/* ---------- Unified company card system ----------
   All 4 cards share the same white/light base, differing only in the
   accent color (top border + badge + button). This is the Stripe
   "all products look like siblings" pattern. */

/* Brand accent driver — set per variant */
.company-card-lmkit      { --brand: #7C3AED; --brand-rgb: 124, 58, 237; --brand-deep: #6D28D9; }
.company-card-calicofr   { --brand: #2563EB; --brand-rgb: 37, 99, 235; --brand-deep: #1D4ED8; }
.company-card-filestream { --brand: #64BC00; --brand-rgb: 100, 188, 0; --brand-deep: #4A8C00; }
.company-card-gedzilla   { --brand: #E9323C; --brand-rgb: 233, 50, 60; --brand-deep: #B01E26; }

.company-card-lmkit,
.company-card-calicofr,
.company-card-filestream,
.company-card-gedzilla {
    background: #FFFFFF;
    border-color: rgba(var(--brand-rgb), 0.15);
}

.company-card-lmkit::before,
.company-card-calicofr::before,
.company-card-filestream::before,
.company-card-gedzilla::before {
    background: var(--brand);
    transform: scaleX(1);
}

.company-card-lmkit .company-card-badge,
.company-card-calicofr .company-card-badge,
.company-card-filestream .company-card-badge,
.company-card-gedzilla .company-card-badge {
    color: var(--brand-deep);
    background: rgba(var(--brand-rgb), 0.1);
}

.company-card-lmkit .tag,
.company-card-calicofr .tag,
.company-card-filestream .tag,
.company-card-gedzilla .tag {
    color: var(--brand-deep);
    background: rgba(var(--brand-rgb), 0.08);
}

.company-card-lmkit .btn,
.company-card-calicofr .btn,
.company-card-filestream .btn,
.company-card-gedzilla .btn {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-weight: 600;
}
.company-card-lmkit .btn:hover,
.company-card-calicofr .btn:hover,
.company-card-filestream .btn:hover,
.company-card-gedzilla .btn:hover {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
    color: #fff;
}

.company-card-lmkit:hover,
.company-card-calicofr:hover,
.company-card-filestream:hover,
.company-card-gedzilla:hover {
    border-color: rgba(var(--brand-rgb), 0.28);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 32px rgba(15, 23, 42, 0.08);
}

/* Calico France "highlighter pen" effect inside the card (signature nod to jlbinfo.com) */
.company-card-calicofr em {
    font-style: normal;
    color: #2563EB;
    background: linear-gradient(transparent 60%, rgba(37, 99, 235, 0.14) 60%);
    padding: 0 2px;
}

.company-card-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--calico-orange);
    background: rgba(139, 92, 246, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.company-card-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--calico-dark);
    margin-bottom: 0.25rem;
}

.company-card-tagline {
    font-size: 0.9rem;
    color: var(--calico-muted);
    margin-bottom: 1rem;
}

.company-card-desc {
    font-size: 0.9rem;
    color: var(--calico-text);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.company-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.tag {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--calico-orange);
    background: rgba(139, 92, 246, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.company-card-featured .tag {
    background: rgba(139, 92, 246, 0.15);
}

.company-card-market {
    font-size: 0.78rem;
    color: var(--calico-muted);
    font-weight: 500;
}

/* ==========================================================
   TECHNOLOGY GRID
   ========================================================== */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* ---------- Bento layout for the Tech section ----------
   Hero tile on the left (spans all 3 rows) featuring the key
   differentiator, 3 supporting tiles stacked on the right. */
.tech-bento {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 0.9rem;
    min-height: 460px;
}

.tech-card {
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 1.3rem 1.4rem;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 4px 16px rgba(15, 23, 42, 0.04);
}

.tech-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 16px 40px rgba(15, 23, 42, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
}

/* Hero tile — takes full left column, richer styling, decorative halo */
/* ---------- Light editorial hero tile (Stay Sovereign) ----------
   White card with a real photo on top and clean typography below.
   No dark overlay, no heavy pictograms. Enterprise SaaS feel. */
.tech-card-hero {
    grid-column: 1;
    grid-row: 1 / span 3;
    padding: 0 !important;
    gap: 0;
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 32px rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
}

.tech-card-hero:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 16px 40px rgba(15, 23, 42, 0.08);
}

.tech-card-hero .tech-card-photo {
    position: relative;
    width: 100%;
    height: 55%;
    min-height: 200px;
    overflow: hidden;
    flex-shrink: 0;
}

.tech-card-hero .tech-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.2, 0, 0, 1);
}

.tech-card-hero:hover .tech-card-photo img {
    transform: scale(1.04);
}

.tech-card-hero .tech-card-body {
    padding: 1.5rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.tech-card-hero h5 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    color: var(--calico-text) !important;
    margin-bottom: 0.5rem !important;
}

.tech-card-hero p {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    color: var(--calico-muted) !important;
    margin-bottom: 1rem !important;
}

/* ---------- Compact satellite tile — small thumb on the left ---------- */
.tech-card-compact {
    padding: 1rem !important;
    flex-direction: row !important;
    align-items: center;
    gap: 1.1rem !important;
}

.tech-card-photo-thumb {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
}

.tech-card-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1);
}

.tech-card-compact:hover .tech-card-photo-thumb img {
    transform: scale(1.08);
}

.tech-card-compact .tech-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.tech-card-compact h5 {
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
}

.tech-card-compact p {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
}

.tech-card-compact .tech-card-index {
    margin-bottom: 0.35rem;
}

/* ---------- Brand marker ----------
   Calico IIM's signature typographic mark: the 3 brand dots + uppercase
   label, reusable wherever we'd normally drop a generic pill badge.
   Personal to the brand because the dots are the logo. */
.brand-marker {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
    background: transparent;
    border: none;
    padding: 0;
}

.brand-marker-dots {
    display: inline-flex;
    gap: 4px;
}

.brand-marker-dots i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.brand-marker-dots i:nth-child(1) { background: var(--calico-violet); }
.brand-marker-dots i:nth-child(2) { background: var(--calico-cyan); }
.brand-marker-dots i:nth-child(3) { background: var(--calico-magenta); }

.brand-marker-text {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--calico-text);
    text-transform: uppercase;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* On dark sections, flip the text color */
.bg-dark-section .brand-marker-text { color: rgba(255, 255, 255, 0.85); }

/* Compliance meta pills at the bottom — signals enterprise credibility */
.tech-card-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.85rem;
    margin-top: auto;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.tech-card-hero-meta span {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--calico-muted);
    padding: 0.25rem 0.6rem;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

/* Responsive: bento collapses on narrower screens */
@media (max-width: 991.98px) {
    .tech-bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: 0;
    }
    .tech-card-hero {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Tech cards inherit the section theme — single color for all tiles in the section. */
.theme-violet  .tech-card h5,
.theme-cyan    .tech-card h5,
.theme-magenta .tech-card h5 { color: var(--theme); }

.theme-violet  .tech-card .tech-icon,
.theme-cyan    .tech-card .tech-icon,
.theme-magenta .tech-card .tech-icon { background: rgba(var(--theme-rgb), 0.14); }

.theme-violet  .tech-card svg,
.theme-cyan    .tech-card svg,
.theme-magenta .tech-card svg { stroke: var(--theme); }

.theme-violet  .tech-card:hover,
.theme-cyan    .tech-card:hover,
.theme-magenta .tech-card:hover {
    background: rgba(var(--theme-rgb), 0.06);
    border-color: rgba(var(--theme-rgb), 0.25);
}

/* ==========================================================
   VALUE CARDS (Who We Are)
   ========================================================== */
.value-card {
    background: var(--calico-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    transition: all 0.2s ease;
    border-left: 3px solid var(--calico-orange);
}

.value-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.value-card h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--calico-dark);
    margin-bottom: 0.5rem;
}

.value-card p {
    font-size: 0.85rem;
    color: var(--calico-muted);
    line-height: 1.5;
    margin: 0;
}

/* Dark variant for value cards on dark backgrounds */
.value-card-dark {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: var(--calico-orange);
}

.value-card-dark:hover {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.2);
    border-left-color: var(--calico-orange);
    box-shadow: none;
}

.value-card-dark h5 {
    color: var(--calico-white);
}

.value-card-dark p {
    color: rgba(255, 255, 255, 0.55);
}

.tech-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.tech-card h5 {
    color: var(--calico-text);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
    letter-spacing: -0.01em;
}

.tech-card-index {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--calico-magenta);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    margin-bottom: 0.85rem;
}

.tech-card p {
    color: var(--calico-muted);
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0;
}


/* ==========================================================
   PROMISE CARDS (What Stays)
   ========================================================== */
/* ---------- Promise cards — editorial, icon-free ----------
   Number-first typography instead of icons. Left text alignment,
   subtle top border accent, colored glow on hover. */
.promise-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.5rem 1.75rem;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1),
                border-color 0.25s ease;
    height: 100%;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 4px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.promise-card::before {
    content: '';
    position: absolute;
    top: 1.2rem;
    bottom: 1.2rem;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--calico-cyan), var(--calico-violet));
    transform: scaleY(0.3);
    transform-origin: top;
    transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
    border-radius: 0 2px 2px 0;
    opacity: 0.8;
}

.promise-card:hover {
    transform: translateY(-4px);
    border-color: rgba(6, 182, 212, 0.22);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 12px 32px rgba(15, 23, 42, 0.06);
}

.promise-card:hover::before { transform: scaleY(1); }

.promise-index {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--calico-cyan);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    margin-bottom: 0.85rem;
}

.promise-card h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--calico-text);
    margin-bottom: 0.55rem;
    letter-spacing: -0.01em;
}

.promise-card p {
    font-size: 0.88rem;
    color: var(--calico-muted);
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================
   APPROACH CARDS (Our Approach / Technology - light bg)
   ========================================================== */
.approach-card {
    background: var(--calico-cream);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s ease;
    height: 100%;
}

.approach-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(139, 92, 246, 0.2);
}

.approach-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(139, 92, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.approach-card h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--calico-dark);
    margin-bottom: 0.4rem;
}

.approach-card p {
    font-size: 0.8rem;
    color: var(--calico-muted);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================
   SYNERGY LIST — numbered editorial list (Join section)
   Each row has a big gradient number, a left gradient accent bar
   that grows on hover, and a colored drop shadow.
   ========================================================== */
.synergy-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.synergy-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
    background: #FFFFFF;
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: 16px;
    padding: 1.35rem 1.6rem 1.35rem 1.75rem;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1),
                border-color 0.25s ease;
    overflow: hidden;
}

/* Left accent bar (grows from short to full height on hover) */
.synergy-item::before {
    content: '';
    position: absolute;
    top: 1.35rem;
    bottom: 1.35rem;
    left: 0;
    width: 3px;
    background: linear-gradient(
        180deg,
        var(--calico-violet) 0%,
        var(--calico-cyan) 50%,
        var(--calico-magenta) 100%
    );
    transform: scaleY(0.35);
    transform-origin: top;
    transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
    border-radius: 0 2px 2px 0;
}

.synergy-item:hover {
    transform: translateX(4px);
    border-color: rgba(139, 92, 246, 0.22);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 12px 32px rgba(15, 23, 42, 0.06);
}

.synergy-item:hover::before {
    transform: scaleY(1);
}

/* Dark variant for synergy list on dark backgrounds */
.synergy-list-dark .synergy-item,
.bg-dark-section .synergy-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.synergy-list-dark .synergy-item:hover,
.bg-dark-section .synergy-item:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.28);
}

.synergy-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    min-width: 2.5rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--calico-violet) 0%, var(--calico-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0.85;
    transition: opacity 0.25s ease;
}

.synergy-item:hover .synergy-number { opacity: 1; }

.synergy-body h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--calico-text);
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.01em;
}

.bg-dark-section .synergy-body h5 { color: #fff; }

.synergy-body p {
    font-size: 0.88rem;
    color: var(--calico-muted);
    line-height: 1.6;
    margin: 0;
}

.bg-dark-section .synergy-body p { color: rgba(255, 255, 255, 0.65); }

/* ==========================================================
   SECTOR CARDS
   ========================================================== */
/* ==========================================================
   SECTOR CARDS — editorial, photo-forward.
   Portrait cards with vivid imagery, glass icon chip, running
   index counter (01 / 06), and a rich bottom-gradient for
   readable type. Strong hover with colored glow.
   ========================================================== */
.row-sectors { counter-reset: sec; }

.sector-card {
    counter-increment: sec;
    position: relative;
    aspect-ratio: 4 / 5;
    min-height: 360px;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.4s cubic-bezier(0.2, 0, 0, 1);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.06),
        0 18px 48px rgba(15, 23, 42, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Photo layer — vivid, not murky */
.sector-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--sector-bg);
    background-size: cover;
    background-position: center;
    filter: saturate(1.08) contrast(1.05);
    transform: scale(1.02);
    transition: transform 0.8s cubic-bezier(0.2, 0, 0, 1),
                filter 0.5s cubic-bezier(0.2, 0, 0, 1);
    z-index: -2;
}

/* Dual overlay: bottom-heavy dark gradient for text legibility +
   subtle cyan duotone wash to tie into section theme */
.sector-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(11, 12, 16, 0) 0%,
            rgba(11, 12, 16, 0) 35%,
            rgba(11, 12, 16, 0.55) 70%,
            rgba(11, 12, 16, 0.95) 100%),
        linear-gradient(135deg, rgba(6, 182, 212, 0.18) 0%, rgba(139, 92, 246, 0.08) 50%, transparent 80%);
    z-index: -1;
    transition: opacity 0.4s ease;
}

.sector-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 4px 8px rgba(15, 23, 42, 0.1),
        0 24px 48px rgba(15, 23, 42, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.sector-card:hover::before {
    transform: scale(1.1);
    filter: saturate(1.2) contrast(1.08) brightness(1.05);
}

/* Icon as a glass chip — top right */
.sector-card .ph-duotone {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 46px;
    height: 46px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.sector-card:hover .ph-duotone {
    background: var(--calico-cyan);
    border-color: transparent;
    transform: scale(1.06);
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.55);
}

/* Running index "01 / 06" in the top-left */
.sector-card-num {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-style: normal;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.sector-card-num::before {
    content: counter(sec, decimal-leading-zero) ' / 06';
}

/* Title pinned to the bottom with animated accent bar on hover */
.sector-card span {
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    padding-bottom: 0.5rem;
}
.sector-card span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--calico-cyan), var(--calico-violet));
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
}
.sector-card:hover span::after {
    transform: scaleX(5);
}

@media (max-width: 575.98px) {
    .sector-card { min-height: 200px; aspect-ratio: 4 / 5; }
    .sector-card span { font-size: 0.95rem; }
}

/* ==========================================================
   CONTACT CARDS
   ========================================================== */
/* ---------- Contact cards — light, typography-forward ----------
   Matches the rest of the (now light) page. Small uppercase label,
   big title, subtle magenta link with arrow slide. */
.contact-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 1.75rem 1.75rem;
    text-align: left;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 4px 16px rgba(15, 23, 42, 0.04);
}

/* When the whole card is a link, keep it looking like the card while
   still giving the caret a subtle slide on hover. */
a.contact-card-link {
    text-decoration: none;
    color: inherit;
}
a.contact-card-link:hover .contact-link { gap: 0.55rem; }
a.contact-card-link:hover .contact-link span { transform: translateX(3px); }

/* Portrait-tablet tweak: allow long titles (e.g. "Rejoindre le groupe"
   in French) to wrap cleanly and prevent the email CTA from overflowing
   horizontally in the narrow card width. */
.contact-card h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.contact-card .contact-link {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 1.75rem;
    bottom: 1.75rem;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--calico-magenta), var(--calico-violet));
    transform: scaleY(0.3);
    transform-origin: top;
    transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
    border-radius: 0 2px 2px 0;
    opacity: 0.9;
}

.contact-card:hover {
    transform: translateY(-3px);
    border-color: rgba(236, 72, 153, 0.22);
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.04),
        0 12px 32px rgba(15, 23, 42, 0.06);
}
.contact-card:hover::before { transform: scaleY(1); }

.contact-card-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--calico-muted);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    text-transform: uppercase;
}

.contact-card h6 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--calico-text);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.92rem;
    color: var(--calico-magenta);
    font-weight: 500;
    text-decoration: none;
    margin-top: auto;
    letter-spacing: -0.005em;
    transition: gap 0.25s cubic-bezier(0.2, 0, 0, 1),
                color 0.25s ease;
}

.contact-link span {
    transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
    display: inline-block;
}

.contact-link:hover {
    color: var(--calico-violet-dark);
    text-decoration: none;
    gap: 0.55rem;
}
.contact-link:hover span {
    transform: translateX(3px);
}

.contact-link-static {
    color: var(--calico-text);
    cursor: default;
    font-weight: 600;
}

/* Contact cards adopt the section theme (single unified color). */
.theme-violet  .contact-card svg,
.theme-cyan    .contact-card svg,
.theme-magenta .contact-card svg { stroke: var(--theme); }

.theme-violet  .contact-card h6,
.theme-cyan    .contact-card h6,
.theme-magenta .contact-card h6 { color: var(--theme) !important; }

.theme-violet  .contact-card .contact-link,
.theme-cyan    .contact-card .contact-link,
.theme-magenta .contact-card .contact-link { color: var(--theme); }

.theme-violet  .contact-card:hover,
.theme-cyan    .contact-card:hover,
.theme-magenta .contact-card:hover {
    background: rgba(var(--theme-rgb), 0.08);
    border-color: rgba(var(--theme-rgb), 0.3);
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
    background: var(--calico-dark);
    padding: 3rem 0 1.5rem;
}

.site-footer .row.g-4 {
    row-gap: 1.5rem !important;
}

@media (max-width: 991px) {
    .site-footer .col-lg-4 {
        margin-bottom: 0.5rem;
    }

    .site-footer .col-lg-2,
    .site-footer .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.footer-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--calico-orange);
}

.footer-companies .footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-company-logo {
    height: 16px;
    width: auto;
    opacity: 0.6;
    filter: brightness(1.5);
    flex-shrink: 0;
}

/* ==========================================================
   ANIMATIONS
   ========================================================== */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
   LANGUAGE SWITCHER
   ========================================================== */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.lang-switch svg {
    vertical-align: middle;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ==========================================================
   LANGUAGE MENU — premium editorial treatment
   A compact pill trigger (flag + ISO code + caret) that opens
   a roomy panel with an eyebrow label, native/English name pairs,
   and an on-brand active state. Keep this looking closer to a
   brand settings sheet than to a generic OS menu.
   ========================================================== */
.lang-dropdown { list-style: none; }

/* Flag SVG common treatment — subtle rounding + hairline outline so
   the colored blocks read as a polished asset rather than a raw graphic. */
.lang-flag {
    display: block;
    border-radius: 3px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 1px 2px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

/* --- Trigger (closed state) --- */
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.4rem 0.55rem !important;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease;
}

.lang-trigger:hover,
.lang-trigger[aria-expanded="true"] {
    color: var(--calico-white) !important;
    border-color: rgba(139, 92, 246, 0.45);
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.08);
}

.lang-trigger-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lang-trigger-flag .lang-flag {
    width: 18px;
    height: 12px;
}

.lang-trigger-code { line-height: 1; }

.lang-trigger-caret {
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1),
                color 0.22s ease;
}

.lang-trigger:hover .lang-trigger-caret,
.lang-trigger[aria-expanded="true"] .lang-trigger-caret {
    color: rgba(255, 255, 255, 0.85);
}

.lang-trigger[aria-expanded="true"] .lang-trigger-caret {
    transform: rotate(-180deg);
}

/* --- Panel (open state) --- */
.lang-panel {
    --panel-bg: rgba(15, 17, 22, 0.96);
    min-width: 280px;
    margin-top: 0.6rem !important;
    padding: 0.75rem 0.55rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(139, 92, 246, 0.12), transparent 60%),
        radial-gradient(120% 80% at 100% 100%, rgba(236, 72, 153, 0.08), transparent 60%),
        var(--panel-bg);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 48px -12px rgba(0, 0, 0, 0.6),
        0 2px 6px rgba(0, 0, 0, 0.35);
    animation: lang-panel-in 0.24s cubic-bezier(0.2, 0, 0, 1);
}

@keyframes lang-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lang-panel-eyebrow {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.25rem 0.85rem 0.6rem;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

.lang-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* --- Option row --- */
.lang-option {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    position: relative;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.lang-option:hover,
.lang-option:focus-visible {
    background: linear-gradient(
        90deg,
        rgba(139, 92, 246, 0.14) 0%,
        rgba(236, 72, 153, 0.08) 100%
    );
    color: var(--calico-white);
    outline: none;
}

.lang-option:focus-visible {
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.45);
}

.lang-option-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lang-option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lang-option-native {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.25;
    color: inherit;
}

.lang-option-english {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.3;
    margin-top: 1px;
}

.lang-option-code {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    color: rgba(255, 255, 255, 0.32);
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.lang-option:hover .lang-option-code,
.lang-option:focus-visible .lang-option-code {
    color: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.18);
}

.lang-option-check {
    position: absolute;
    right: 0.85rem;
    color: var(--calico-violet-light);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Active (current language) — replaces the ISO-code chip with the
   check glyph, and tints the native name in brand violet. */
.lang-option.is-active {
    background: linear-gradient(
        90deg,
        rgba(139, 92, 246, 0.18) 0%,
        rgba(139, 92, 246, 0.05) 100%
    );
    color: var(--calico-white);
}

.lang-option.is-active .lang-option-native {
    background: linear-gradient(90deg, var(--calico-violet-light), var(--calico-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lang-option.is-active .lang-option-code { display: none; }

.lang-option.is-active .lang-option-check {
    opacity: 1;
    transform: scale(1);
}

/* --- Mobile-overlay nav: the collapsed menu treats the dropdown as
   an inline section. We flatten the panel so it looks consistent with
   the rest of the overlay links. --- */
@media (max-width: 991.98px) {
    .lang-dropdown {
        margin-top: 2.5rem !important;
        margin-left: 0 !important;
        align-self: flex-start;
        width: 100%;
    }
    .lang-trigger {
        align-self: flex-start;
    }
    .lang-panel {
        position: static !important;
        transform: none !important;
        margin-top: 0.8rem !important;
        padding: 0.35rem 0;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        min-width: 0;
        width: 100%;
        animation: none;
    }
    .lang-panel-eyebrow {
        padding-left: 0.35rem;
    }
    .lang-option { padding-left: 0.35rem; padding-right: 0.35rem; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1199px) {
    :root {
        --section-padding: 4rem;
    }

    .hero-section {
        min-height: auto;
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    .hero-section .min-vh-100 {
        min-height: auto !important;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        max-width: 100%;
        font-size: 1rem;
    }

    .hero-trust {
        white-space: normal;
        font-size: 0.78rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .tech-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    :root {
        --section-padding: 3rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.7rem;
    }

    .tech-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   CONTACT PAGE
   Standalone /Contact page. Dark hero then cream body with an
   info column on the left and a form card on the right. Matches
   the section-label / section-title / btn-calico language of the
   homepage so navigation feels continuous.
   ========================================================== */
.contact-hero {
    background: linear-gradient(135deg, var(--calico-dark) 0%, #12121F 50%, #1E1A2E 100%);
    color: var(--calico-white);
    padding: 9rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(236, 72, 153, 0.18), transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(139, 92, 246, 0.15), transparent 60%);
    pointer-events: none;
}

.contact-hero > .container { position: relative; }

.contact-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
    color: var(--calico-white);
}

.contact-hero-subtitle {
    font-size: 1.1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    max-width: 620px;
    margin: 0 auto;
}

.contact-body-section {
    padding-top: 4rem;
    padding-bottom: 5rem;
}

/* ---- Left column info cards ---- */
.contact-info-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.4rem;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    margin-bottom: 0.85rem;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.contact-info-card:hover {
    border-color: rgba(236, 72, 153, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.contact-info-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(236, 72, 153, 0.1);
    color: var(--calico-magenta);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.contact-info-icon-linkedin {
    background: rgba(10, 102, 194, 0.1);
    color: #0A66C2;
}

.contact-info-card h4 {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0 0 0.15rem;
    color: var(--calico-text);
}

.contact-info-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--calico-muted);
    line-height: 1.45;
}

.contact-info-card a {
    color: var(--calico-magenta);
    text-decoration: none;
    font-weight: 500;
}

.contact-info-card a:hover {
    color: var(--calico-violet-dark);
    text-decoration: underline;
}

/* ---- Right column form card ---- */
.contact-form-card {
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    padding: 2.25rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03),
        0 8px 32px rgba(15, 23, 42, 0.05);
}

.contact-form-title {
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
    letter-spacing: -0.015em;
    color: var(--calico-text);
}

.contact-form-subtitle {
    color: var(--calico-muted);
    font-size: 0.92rem;
    margin-bottom: 1.6rem;
}

.contact-form-privacy {
    font-size: 0.78rem;
    color: var(--calico-muted);
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    line-height: 1.55;
}

.contact-form-privacy a {
    color: var(--calico-magenta);
    text-decoration: none;
    font-weight: 500;
}

.contact-form-privacy a:hover { text-decoration: underline; }

/* ---- Inputs / labels / errors ---- */
.contact-form .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--calico-text);
    margin-bottom: 0.4rem;
    letter-spacing: -0.005em;
}

.contact-form .form-control {
    border: 1.5px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    padding: 0.72rem 0.9rem;
    font-size: 0.94rem;
    color: var(--calico-text);
    background: #FFFFFF;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form .form-control::placeholder {
    color: rgba(15, 23, 42, 0.38);
}

.contact-form .form-control:focus {
    border-color: var(--calico-magenta);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
    outline: none;
}

.contact-form .form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 14px 14px;
    padding-right: 2.25rem;
}

.contact-form .form-error {
    display: block;
    font-size: 0.8rem;
    color: #B91C1C;
    margin-top: 0.35rem;
    min-height: 1em;
}

.contact-form .form-control.input-validation-error,
.contact-form .form-control[aria-invalid="true"] {
    border-color: #B91C1C;
}

.contact-form .form-control.input-validation-error:focus {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}

/* Honeypot: off-screen so humans never see it, bots happily fill it */
.contact-form .hp-field {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Alerts (success / error banners) ---- */
.contact-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    margin-bottom: 1.35rem;
    font-size: 0.94rem;
    line-height: 1.5;
    animation: contact-alert-slide 0.35s cubic-bezier(.4,0,.2,1);
}

.contact-alert i {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.contact-alert-success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
}

.contact-alert-success i { color: #059669; }

.contact-alert-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #7F1D1D;
}

.contact-alert-error i { color: #DC2626; }

.contact-alert-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-alert-body strong {
    font-weight: 700;
    color: inherit;
    font-size: 0.97rem;
}

.contact-alert-body span {
    font-size: 0.9rem;
    opacity: 0.92;
    line-height: 1.5;
}

.contact-alert-close {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 1rem;
    line-height: 1;
    border-radius: 6px;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
    align-self: flex-start;
}

.contact-alert-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

.contact-alert-pulse {
    animation: contact-alert-slide 0.35s cubic-bezier(.4,0,.2,1),
               contact-alert-pulse 1.4s 0.35s ease-out 1;
}

@keyframes contact-alert-slide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes contact-alert-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.25); }
    50%  { box-shadow: 0 0 0 10px rgba(5, 150, 105, 0); }
    100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

/* ---- Submit button loading state ---- */
.btn-calico .btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    margin-left: 10px;
    vertical-align: -4px;
    animation: btn-calico-spin 0.7s linear infinite;
}

.btn-calico.is-loading {
    cursor: wait;
    opacity: 0.88;
}

.btn-calico.is-loading::after {
    display: none;
}

.btn-calico.is-loading .btn-spinner {
    display: inline-block;
}

.btn-calico:disabled,
.btn-calico[disabled] {
    cursor: wait;
    pointer-events: none;
}

@keyframes btn-calico-spin {
    to { transform: rotate(360deg); }
}

/* ---- Responsive tweaks ---- */
@media (max-width: 991.98px) {
    .contact-hero {
        padding: 7rem 0 3.5rem;
    }
    .contact-hero-title {
        font-size: 2.25rem;
    }
    .contact-form-card {
        padding: 1.75rem 1.4rem;
    }
    .contact-body-section {
        padding-top: 3rem;
    }
}

@media (max-width: 575.98px) {
    .contact-hero-title {
        font-size: 1.85rem;
    }
    .contact-hero-subtitle {
        font-size: 1rem;
    }
    .contact-form-title {
        font-size: 1.35rem;
    }
    .contact-form-card {
        padding: 1.5rem 1.2rem;
    }
}

/* ==========================================================
   COOKIE CONSENT BANNER
   A minimal GDPR-friendly banner anchored to the bottom of the
   viewport. Glass background matches the language panel so the
   two "modal-ish" surfaces feel like one design family. Hidden
   by default (via [hidden] + opacity) and revealed by site.js
   when the visitor has no stored choice yet.
   ========================================================== */
.cookie-consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s cubic-bezier(0.2, 0, 0, 1),
                transform 0.35s cubic-bezier(0.2, 0, 0, 1);
    pointer-events: none;
}

.cookie-consent[hidden] { display: none; }

.cookie-consent.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cookie-consent-inner {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(139, 92, 246, 0.10), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(236, 72, 153, 0.08), transparent 55%),
        rgba(15, 17, 22, 0.96);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 24px 48px -12px rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.88);
}

.cookie-consent-text { min-width: 0; }

.cookie-consent-title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--calico-white);
    margin: 0 0 0.2rem;
}

.cookie-consent-body {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.cookie-consent-learn {
    color: var(--calico-violet-light);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 0.3rem;
    border-bottom: 1px solid rgba(167, 139, 250, 0.35);
    transition: color 0.18s ease, border-color 0.18s ease;
}

.cookie-consent-learn:hover {
    color: var(--calico-white);
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

.cookie-consent-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cookie-btn {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.cookie-btn-secondary {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.cookie-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--calico-white);
    border-color: rgba(255, 255, 255, 0.32);
}

.cookie-btn-primary {
    background: linear-gradient(135deg, var(--calico-violet), var(--calico-magenta));
    color: var(--calico-white);
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
}

.cookie-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.42);
}

/* Tight viewports: stack buttons under the text and let them span
   full width so it's all thumb-friendly on mobile. */
@media (max-width: 640px) {
    .cookie-consent-inner {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    .cookie-consent-actions {
        width: 100%;
        justify-content: stretch;
    }
    .cookie-btn {
        flex: 1;
        padding: 0.7rem 1rem;
    }
}