/* =====================================================================
   Global IT Systems — app.css
   Fresh, self-contained design system. Background-image driven, no flat
   blue hero. Swap any section image by changing the --img-* tokens below.
   ===================================================================== */

:root {
    /* Brand */
    --brand: #0E2595;
    --brand-600: #1430c4;
    --brand-300: #4f6dff;
    --ink: #0a1330;
    --paper: #ffffff;
    --soft: #f4f6fb;
    --line: #e7e9f2;
    --muted: #5b6173;
    --text: #141726;

    /* Type */
    --display: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: 'Space Mono', ui-monospace, monospace;

    /* Shape */
    --r-lg: 28px;
    --r-md: 18px;
    --r-sm: 12px;
    --shadow: 0 18px 50px rgba(13, 23, 75, 0.10);
    --shadow-lg: 0 30px 70px rgba(13, 23, 75, 0.18);

    /* Swappable background images — change these to taste */
    --img-hero: url('./imgs/cyber.jpg');
    --img-mission: url('./imgs/audit.jpeg');
    --img-band: url('./imgs/footer-cta.jpg');
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
    margin: 0;
    font-family: var(--sans);
    color: var(--text);
    background: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; }

.container { width: min(1200px, 100% - 3rem); margin-inline: auto; }
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section--soft { background: var(--soft); }
.section--ink { background: var(--ink); color: #fff; }

/* ---- Shared bits ---- */
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--brand);
}
.eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-300); box-shadow: 0 0 0 4px rgba(79, 109, 255, 0.18);
}
.section--ink .eyebrow, .hero .eyebrow { color: rgba(255, 255, 255, 0.85); }

/* Brand wordmark label (hero/sub-hero) — styled like the logo, more visible */
.eyebrow.brandmark {
    font-family: var(--sans);
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    gap: 0.55rem;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.eyebrow.brandmark .dot { width: 9px; height: 9px; }
.eyebrow.brandmark .bm-1 { color: #ffffff; }
.eyebrow.brandmark .bm-2 { color: var(--brand-300); }

.h-display { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head h2 {
    font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
    font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 0.8rem 0 0;
}
.section-head p { color: var(--muted); margin: 1rem 0 0; font-size: 1.05rem; }
.section--ink .section-head p { color: rgba(255, 255, 255, 0.7); }
.text-center { text-align: center; }
.center-head { margin-inline: auto; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-weight: 600; font-size: 0.97rem; cursor: pointer;
    padding: 0.85rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
    white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 12px 30px rgba(14, 37, 149, 0.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(14, 37, 149, 0.38); }
.btn-light { background: #fff; color: var(--brand); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }
.btn-light:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); }
.btn .ico-circle {
    width: 34px; height: 34px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18);
}
.btn-primary .ico-circle, .btn-dark .ico-circle { background: rgba(255, 255, 255, 0.2); }
.btn-light .ico-circle { background: var(--brand); color: #fff; }

/* =====================================================================
   NAV — transparent over the hero, solid frosted on scroll
   ===================================================================== */
.site-nav {
    position: fixed; inset: 0 0 auto 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; padding: 0.8rem clamp(1.25rem, 4vw, 3rem);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.3s ease, padding 0.3s ease;
}
.site-nav .brand { display: flex; align-items: center; gap: 0.6rem; }
.site-nav .brand img { height: 38px; width: auto; }
.site-nav .brand b { font-weight: 700; letter-spacing: -0.01em; color: var(--ink); transition: color 0.3s ease; }
.nav-menu { display: flex; align-items: center; gap: 2rem; }
.nav-menu a {
    position: relative; font-weight: 600; font-size: 0.97rem; color: var(--text);
    padding: 0.3rem 0; transition: color 0.25s ease;
}
.nav-menu a::after {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
    background: var(--brand-300); transform: scaleX(0); transform-origin: left; transition: transform 0.28s ease;
}
.nav-menu a:hover::after, .nav-menu a.active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.nav-toggle {
    display: none; width: 44px; height: 44px; border: 0; border-radius: 12px;
    background: var(--soft); color: var(--ink); cursor: pointer; font-size: 1.4rem; align-items: center; justify-content: center;
}

.site-nav.scrolled {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 10px 34px rgba(15, 23, 42, 0.10); padding-block: 0.75rem;
}
.site-nav.scrolled .brand b { color: var(--ink); }
.site-nav.scrolled .nav-menu a { color: var(--text); }
.site-nav.scrolled .nav-toggle { background: var(--soft); color: var(--ink); }

/* =====================================================================
   HERO — full-bleed background image
   ===================================================================== */
.hero {
    position: relative; isolation: isolate; color: #fff;
    min-height: 100svh; display: flex; align-items: center;
    padding: clamp(7rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 5rem);
    background-image:
        linear-gradient(180deg, rgba(7, 12, 35, 0.55) 0%, rgba(7, 12, 35, 0.72) 55%, rgba(7, 12, 35, 0.92) 100%),
        var(--img-hero);
    background-size: cover; background-position: center; background-attachment: fixed;
}
.hero-inner { max-width: 820px; }
.hero h1 {
    font-family: var(--display); font-weight: 600; letter-spacing: -0.025em;
    font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: 1.0; margin: 1.4rem 0 0;
}
.hero h1 .accent {
    background: linear-gradient(120deg, #8aa0ff, #ffffff); -webkit-background-clip: text;
    background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p {
    margin: 1.5rem 0 0; max-width: 560px; font-size: clamp(1rem, 1.4vw, 1.18rem);
    color: rgba(255, 255, 255, 0.82); line-height: 1.7;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* Stats strip pinned to the bottom of the hero */
.hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
    margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-stats .num { font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 600; }
.hero-stats .lbl { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin-top: 0.25rem; }

/* =====================================================================
   SERVICES
   ===================================================================== */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.svc-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 2rem; display: flex; flex-direction: column; gap: 1rem;
    transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-icon {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-300)); color: #fff; font-size: 1.5rem;
}
.svc-card h3 { font-size: 1.2rem; font-weight: 700; }
.svc-card p { color: var(--muted); font-size: 0.96rem; margin: 0; }
.svc-card .more {
    margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem;
    font-weight: 600; color: var(--brand); font-size: 0.92rem;
}
.svc-card .more i { transition: transform 0.25s ease; }
.svc-card:hover .more i { transform: translateX(4px); }

/* =====================================================================
   MISSION (image split)
   ===================================================================== */
.mission { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mission-media {
    position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 460px;
    background-image: linear-gradient(160deg, rgba(14, 37, 149, 0.35), rgba(10, 19, 48, 0.55)), var(--img-mission);
    background-size: cover; background-position: center; box-shadow: var(--shadow-lg);
}
.mission-media .float-card {
    position: absolute; left: 1.5rem; bottom: 1.5rem; right: 1.5rem;
    background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--r-md); padding: 1.25rem 1.5rem; color: #fff;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.mission-media .float-card .num { font-family: var(--display); font-size: 1.7rem; font-weight: 600; }
.mission-media .float-card .lbl { font-size: 0.8rem; opacity: 0.82; }
.mission p { color: var(--muted); font-size: 1.06rem; margin: 1.2rem 0 0; }
.mission .stat-row { display: flex; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
.mission .stat-row .num { font-family: var(--display); font-size: 2.2rem; font-weight: 600; color: var(--brand); }
.mission .stat-row .lbl { color: var(--muted); font-size: 0.9rem; }

/* =====================================================================
   PRODUCTS
   ===================================================================== */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.prod-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden; transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.35s ease;
}
.prod-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.prod-card .pic {
    aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 1.5rem;
    background: radial-gradient(120% 120% at 50% 0%, #eef1fb 0%, #f8f9fe 70%);
}
.prod-card .pic img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(13, 23, 75, 0.18)); }
.prod-card .body { padding: 1.4rem 1.5rem 1.7rem; }
.prod-card h3 { font-size: 1.1rem; font-weight: 700; text-transform: capitalize; }
.prod-card p { color: var(--muted); font-size: 0.92rem; margin: 0.6rem 0 0; }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.t-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.t-nav { display: flex; gap: 0.75rem; }
.t-nav button {
    width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center;
    transition: background 0.25s ease, transform 0.2s ease;
}
.t-nav button:hover { background: rgba(255, 255, 255, 0.14); }
.t-viewport { overflow: hidden; margin-top: 2.5rem; }
.t-track { display: flex; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.t-slide { min-width: 100%; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.t-slide .pic { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); }
.t-slide .pic img { width: 100%; height: 100%; object-fit: cover; }
.t-slide blockquote {
    font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    line-height: 1.35; margin: 0;
}
.t-slide .who { margin-top: 1.6rem; }
.t-slide .who h4 { font-size: 1.1rem; font-weight: 700; }
.t-slide .who span { color: rgba(255, 255, 255, 0.65); font-size: 0.92rem; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.faq-intro h2 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4vw, 2.9rem); margin: 0.8rem 0 0; }
.faq-intro p { color: var(--muted); margin: 1.1rem 0 1.8rem; }
.acc-item { border-top: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 1px solid var(--line); }
.acc-head {
    width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.4rem 0; font-size: 1.05rem; font-weight: 600; color: var(--text); font-family: var(--sans);
}
.acc-head .pm {
    flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
    display: grid; place-items: center; font-size: 1.2rem; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.acc-item.open .acc-head .pm { background: var(--brand); color: #fff; border-color: var(--brand); transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.acc-body p { color: var(--muted); margin: 0 0 1.4rem; max-width: 60ch; }

/* =====================================================================
   CTA band (image)
   ===================================================================== */
.cta-band {
    position: relative; isolation: isolate; color: #fff; text-align: center;
    border-radius: var(--r-lg); overflow: hidden; padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
    background-image: linear-gradient(rgba(8, 17, 50, 0.7), rgba(8, 17, 50, 0.82)), var(--img-band);
    background-size: cover; background-position: center;
}
.cta-band h2 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 5vw, 3.4rem); max-width: 760px; margin: 0 auto; }
.cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 560px; margin: 1.2rem auto 2rem; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background: var(--ink); color: #fff; padding: clamp(3.5rem, 7vw, 5.5rem) 0 2.5rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
.foot-brand img { height: 46px; margin-bottom: 1rem; }
.foot-brand p { color: rgba(255, 255, 255, 0.6); font-size: 0.92rem; max-width: 32ch; }
.foot-col h4 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 1.1rem; }
.foot-col a, .foot-col p { color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; display: block; margin-bottom: 0.6rem; transition: color 0.2s ease; }
.foot-col a:hover { color: #fff; }
.foot-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55); font-size: 0.85rem;
}
.foot-social { display: flex; gap: 0.75rem; }
.foot-social a {
    width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.08); transition: background 0.25s ease, transform 0.2s ease;
}
.foot-social a:hover { background: var(--brand); transform: translateY(-2px); }
.foot-social svg { width: 20px; height: 20px; }

/* =====================================================================
   Reveal motion (self-contained so it works without styles.css)
   ===================================================================== */
.js-motion [data-reveal] {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.16, 0.84, 0.44, 1);
    transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform;
}
.js-motion [data-reveal="left"] { transform: translateX(-36px); }
.js-motion [data-reveal="right"] { transform: translateX(36px); }
.js-motion [data-reveal="zoom"] { transform: scale(0.93); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 992px) {
    .svc-grid, .prod-grid { grid-template-columns: repeat(2, 1fr); }
    .mission, .faq { grid-template-columns: 1fr; }
    .mission-media { min-height: 360px; }
    .t-slide { grid-template-columns: 1fr; }
    .t-slide .pic { aspect-ratio: 16 / 10; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .nav-menu {
        position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw);
        flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.5rem;
        padding: 2rem; background: var(--ink); transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1); z-index: 1001;
    }
    .nav-menu.open { transform: translateX(0); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4); }
    .nav-menu a { color: #fff; font-size: 1.2rem; }
    .nav-toggle { display: inline-flex; }
    .nav-actions .btn { display: none; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; }
    .svc-grid, .prod-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero { background-attachment: scroll; }
}
@media (hover: none) {
    .hero { background-attachment: scroll; }
}

/* =====================================================================
   INNER PAGES — sub-hero, values, split, contact
   ===================================================================== */
.subhero {
    position: relative; isolation: isolate; color: #fff;
    display: flex; align-items: flex-end; min-height: 56vh;
    padding: clamp(7rem, 14vw, 11rem) 0 clamp(2.5rem, 5vw, 4rem);
    background-size: cover; background-position: center; background-attachment: fixed;
}
.subhero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, rgba(8, 17, 50, 0.9) 0%, rgba(8, 17, 50, 0.62) 68%, rgba(8, 17, 50, 0.5) 100%);
}
.subhero h1 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1; margin: 1.1rem 0 0; }
.subhero p { color: rgba(255, 255, 255, 0.82); max-width: 640px; margin: 1.2rem 0 0; font-size: 1.06rem; }
.subhero--about { background-image: url('./imgs/audit.jpeg'); }
.subhero--services { background-image: url('./imgs/alan-j-hendry-KNt4zd8HPb0-unsplash.jpg'); }
.subhero--solutions { background-image: url('./imgs/cyber.jpg'); }
.subhero--contact { background-image: url('./imgs/remote.jpg'); }

/* Values grid */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.value-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2rem;
    transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.value-card .vnum { font-family: var(--mono); color: var(--brand); font-size: 0.78rem; letter-spacing: 0.2em; }
.value-card h3 { font-family: var(--display); font-size: 1.35rem; font-weight: 600; margin: 0.7rem 0 0.8rem; }
.value-card p { color: var(--muted); font-size: 0.94rem; margin: 0; }

/* Generic image split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split h2 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 0.8rem 0 0; }
.split p { color: var(--muted); margin: 1.1rem 0 0; font-size: 1.05rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.contact-info {
    position: relative; isolation: isolate; color: #fff;
    border-radius: var(--r-lg); overflow: hidden;
    padding: clamp(2rem, 4vw, 3rem);
    display: flex; flex-direction: column; justify-content: center;
    background-image: linear-gradient(160deg, rgba(10, 14, 25, 0.45), rgba(10, 14, 25, 0.68)), url('./imgs/feature.jpg');
    background-size: cover; background-position: center;
    box-shadow: var(--shadow-lg);
}
.contact-info .info-row { margin-bottom: 1.8rem; }
.contact-info .info-row:last-child { margin-bottom: 0; }
.contact-info h4 { font-family: var(--mono); font-size: 0.92rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 0.6rem; }
.contact-info p, .contact-info a { color: #fff; display: block; line-height: 1.75; font-size: 1.15rem; }
.contact-info a:hover { color: var(--brand-300); }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow); }
.field { margin-bottom: 1.2rem; }
.field > label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.45rem; }
.field input, .field select {
    width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 12px;
    font: inherit; color: var(--text); background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input::placeholder { color: #9aa0b4; }
.field input:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14, 37, 149, 0.12); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.check { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.92rem; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }
.big-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.big-links a { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.4rem); color: var(--ink); transition: color 0.2s ease; }
.big-links a:hover { color: var(--brand); }
.big-links .right { text-align: right; }

@media (max-width: 992px) {
    .value-grid { grid-template-columns: repeat(2, 1fr); }
    .split { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .value-grid { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .big-links { grid-template-columns: 1fr; }
    .big-links .right { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .subhero { background-attachment: scroll; } }
@media (hover: none) { .subhero { background-attachment: scroll; } }

/* =====================================================================
   IMAGE CARDS (homepage services) — real product imagery, no icons
   ===================================================================== */
.icard {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}
.icard:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.icard .media {
    aspect-ratio: 16 / 11; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(120% 120% at 50% 0%, #eef1fb 0%, #f8f9fe 70%);
}
.icard .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.icard:hover .media img { transform: scale(1.05); }
.icard .media.tall { aspect-ratio: 3 / 4; }
/* Services page: every card image uniform 3:4 cover-fill (overrides .contain/.tall),
   scoped to the page so it survives the marquee re-layout and leaves the home page alone */
body.page-services .icard .media { aspect-ratio: 3 / 4; padding: 0; }
body.page-services .icard .media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; filter: none; }
.icard .media.contain { padding: 1.4rem; }
.icard .media.contain img {
    width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain;
    filter: drop-shadow(0 16px 26px rgba(13, 23, 75, 0.2));
}
.icard .body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.icard .body h3 { font-size: 1.15rem; font-weight: 700; }
.icard .body p { color: var(--muted); font-size: 0.94rem; margin: 0; }
.icard .more { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--brand); font-size: 0.92rem; }
.icard .more i { transition: transform 0.25s ease; }
.icard:hover .more i { transform: translateX(4px); }

/* Contact form-card heading */
.contact-card .form-title { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin-bottom: 0.4rem; }
.contact-card .form-sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.6rem; }

/* Office showcase image */
.office-shot { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.office-shot img { width: 100%; height: auto; display: block; }

/* =====================================================================
   SERVICES MARQUEE — rows scroll horizontally, alternating direction
   ===================================================================== */
.marquee { display: flex; flex-direction: column; gap: 1.5rem; overflow: hidden; width: calc(100vw - 8rem); margin-inline: calc(50% - 50vw + 4rem); }
.mrow {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}
.mtrack { display: flex; width: max-content; will-change: transform; }
/* Row 1 (odd) → right, row 2 (even) → left, row 3 (odd) → right, ... */
.mrow:nth-child(odd)  .mtrack { animation: marq-right 52s linear infinite; }
.mrow:nth-child(even) .mtrack { animation: marq-left  46s linear infinite; }
.mtrack:hover { animation-play-state: paused; }
/* Per-card margin (not grid gap) so translateX(-50%) loops seamlessly. */
.marquee .icard { flex: 0 0 340px; width: 340px; margin-right: 1.5rem; }
@keyframes marq-left  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes marq-right { from { transform: translateX(-50%); }   to { transform: translateX(0); } }
@media (max-width: 560px) { .marquee .icard { flex-basis: 270px; width: 270px; } }
@media (prefers-reduced-motion: reduce) {
    .mtrack { animation: none; transform: none; }
    .mrow { overflow-x: auto; }
}