/* Together Initiatives: site styles. Bootstrap 5.3 is self-hosted and re-themed
   here through custom properties; there is no Sass build. */

/* Fonts (self-hosted woff2, SIL OFL: see LICENSE-*.txt in /assets/fonts) */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/figtree-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/newsreader-latin-500-normal.woff2') format('woff2'); }

:root {
    /* Brand tokens (design spec section 6) */
    --til-navy: #0B2545;
    --til-blue: #4A7CBC;        /* logo, icons, indicators; never behind white text */
    --til-action: #3A6BAA;      /* buttons, links */
    --til-action-dark: #2D5A93;
    --til-cyan: #13A8C2;        /* on navy only; use --til-cyan-text on light backgrounds */
    --til-cyan-text: #0A7487;   /* cyan for text on white/mist, AA */
    --til-amber: #F5B23D;
    --til-mist: #EDF2F9;
    --til-navy-2: #123A66;
    --til-navy-3: #1F4C7E;
    --til-sky: #A9C1DB;
    --til-muted: #50606F;
    --til-line: #E1E8EE;
    --til-paper: #F7FAFC;
    --til-ink: #1E2A36;
    --til-steel: #B8C6D3;       /* indicators, connectors */
    --til-edge: #DCE3EA;        /* card borders on light */
    --til-pale: #C4D5E8;        /* body text on navy-2 */
    --til-rim: #2B5687;         /* chip borders on navy */
    --til-wash: #E6EEF8;

    --font-body: 'Figtree', sans-serif;
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-quote: 'Newsreader', Georgia, serif;

    /* Bootstrap overrides */
    --bs-primary: #3A6BAA;
    --bs-primary-rgb: 58, 107, 170;
    --bs-link-color: #3A6BAA;
    --bs-link-color-rgb: 58, 107, 170;
    --bs-link-hover-color: #2D5A93;
    --bs-link-hover-color-rgb: 45, 90, 147;
    --bs-body-font-family: 'Figtree', sans-serif;
    --bs-body-color: #1E2A36;
    --bs-body-color-rgb: 30, 42, 54;
    --bs-heading-color: #0B2545;
    --bs-border-color: #E1E8EE;
    --bs-focus-ring-color: rgba(58, 107, 170, .35);
}

body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--til-ink); background: #fff; }
h1, h2, h3, .display-font { font-family: var(--font-display); font-weight: 700; line-height: 1.1; }

/* Keyboard focus: a visible outline on every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--til-action);
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: none;
}
.site-footer a:focus-visible, .dark-surface a:focus-visible,
.dark-surface button:focus-visible { outline-color: var(--til-amber); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--til-navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* Buttons */
.btn { font-weight: 600; }
.btn-primary {
    --bs-btn-bg: #3A6BAA; --bs-btn-border-color: #3A6BAA; --bs-btn-color: #fff;
    --bs-btn-hover-bg: #2D5A93; --bs-btn-hover-border-color: #2D5A93; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #264E81; --bs-btn-active-border-color: #264E81; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #3A6BAA; --bs-btn-disabled-border-color: #3A6BAA;
}
.btn-outline-primary {
    --bs-btn-color: #3A6BAA; --bs-btn-border-color: #3A6BAA;
    --bs-btn-hover-bg: #3A6BAA; --bs-btn-hover-border-color: #3A6BAA; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2D5A93; --bs-btn-active-border-color: #2D5A93; --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #3A6BAA; --bs-btn-disabled-border-color: #3A6BAA;
    border-width: 1.5px;
}
.btn-light { --bs-btn-color: #0B2545; --bs-btn-hover-color: #0B2545; --bs-btn-active-color: #0B2545; }

/* Icons (Lucide sprite) */
.icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.icon-lg { width: 1.6rem; height: 1.6rem; vertical-align: middle; }

/* Header and navigation */
.site-header { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid var(--til-line); }
.site-header .container { min-height: 72px; }
.brand { display: inline-flex; }
.brand img { height: 44px; width: auto; }
.nav-toggle { color: var(--til-navy); padding: .4rem; line-height: 1; }
.nav-link-site { display: block; padding: .75rem 0; color: var(--til-ink); font-weight: 600; text-decoration: none; }
.nav-link-site:hover, .nav-link-site[aria-current="page"] { color: var(--til-action); }
.nav-link-site[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: var(--til-amber); }
.offcanvas-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--til-navy); }
@media (min-width: 992px) {
    .nav-link-site { padding: .5rem 0; }
    #site-nav .offcanvas-body { display: flex; padding: 0; }
}

/* Page sections */
.section { padding: 4rem 0; }
.section-mist { background: var(--til-mist); }
.section-paper { background: var(--til-paper); }
.section-navy { background: var(--til-navy); color: #fff; }
.section-navy h2, .section-navy h3 { color: #fff; }
.dark-surface { background: var(--til-navy); color: #fff; }
.eyebrow { display: block; font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--til-cyan-text); margin-bottom: .6rem; }
.section-navy .eyebrow, .dark-surface .eyebrow { color: var(--til-cyan); }
.h-accent::after { content: ''; display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--til-amber); margin-top: .9rem; }
.text-center .h-accent::after { margin-left: auto; margin-right: auto; }
.lead-muted { color: var(--til-muted); font-size: 1.1875rem; }
.section-navy .lead-muted { color: var(--til-sky); }

/* Draft marker (CMS rows with status = draft) */
.badge-draft { display: inline-block; background: var(--til-amber); color: var(--til-navy); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: .3rem .55rem; }

/* Logo marquee: paused for visitors who prefer reduced motion */
.logo-marquee { overflow: hidden; }
.logo-marquee-track { display: flex; gap: 4rem; align-items: center; width: max-content; animation: logo-scroll 40s linear infinite; }
.logo-marquee-track img { height: 44px; max-width: 140px; width: auto; object-fit: contain; }
.logo-marquee.is-paused .logo-marquee-track,
.logo-marquee:hover .logo-marquee-track,
.logo-marquee:focus-within .logo-marquee-track { animation-play-state: paused; }
@keyframes logo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .logo-marquee-track { animation: none; }
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}


/* Home page */
.icon-cyan { color: var(--til-cyan-text); }
.dark-surface .icon-cyan, .section-navy .icon-cyan, .hero-s2 .icon-cyan { color: var(--til-cyan); }
.icon-amber { color: var(--til-amber); }
.icon-feature { width: 34px; height: 34px; color: var(--til-blue); stroke-width: 1.8; flex: none; }
.lead-narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.section h2 { font-size: clamp(1.9rem, 3.4vw, 2.375rem); margin-bottom: .9rem; }
.section .lead-muted { margin-bottom: 2.25rem; }

/* Hero carousel */
.hero { position: relative; }
.hero-slide { min-height: 564px; padding: 3.75rem 0 4.5rem; }
.hero-slide .container { min-height: 446px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.hero-title { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.02; margin: 0 0 1.1rem; }
.hero-slide p { font-size: 1.25rem; margin: 0 0 1.6rem; }
/* Faint line art behind the text slides: the AI agent and its tools, the world map from Dhaka, the industries street */
.hero-s1 { background: #fff url('../img/hero/hero-ai.svg') center / cover no-repeat; }
.hero-s1 p { color: var(--til-muted); }
.hero-s2 { background: var(--til-navy) url('../img/hero/hero-map.svg') center / cover no-repeat; color: #fff; }
.hero-s2 .hero-title { color: #fff; }
.hero-s2 p { color: var(--til-sky); }
.hero-s3 { background: var(--til-mist) url('../img/hero/hero-industries.svg') center bottom / auto 100% no-repeat; color: var(--til-navy); }
.hero-s3 p { color: #46607A; }
/* News slide: a full-bleed image, as tall as the text slides (container + padding) */
.hero-news { position: relative; min-height: calc(446px + 8.25rem); background: #0071C4; }
.hero-news img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; } /* keeps the "together" text (left of the photo) in view on narrow screens */
.hero:has(.hero-news.active) .hero-indicators .active { background-color: #fff; }
/* "16+ years" pill on the news slide: lower left, lined up with the indicators */
.hero-news .hero-news-tag { position: absolute; left: 0; right: 0; bottom: 3.5rem; min-height: 0; margin: 0 auto; padding: 0 12px; max-width: 1140px; z-index: 4; }
.hero-years { display: inline-block; padding: .5rem 1.1rem; border-radius: 999px; background: #fff; color: var(--til-navy); font-size: .8125rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 40, 90, .28); }
.hero-indicators { position: absolute; left: 0; right: 0; bottom: .75rem; margin: 0 auto; padding: 0 12px; justify-content: flex-start; max-width: 1140px; z-index: 5; }
.hero-indicators [data-bs-target] { width: 36px; height: 6px; border: 0; border-radius: 3px; background-color: var(--til-steel); opacity: 1; margin: 0 8px 0 0; padding: 0; box-sizing: content-box; background-clip: content-box; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.hero-indicators .active { background-color: var(--til-blue); }
.flow { display: flex; flex-direction: column; }
.node { display: flex; gap: .9rem; align-items: center; border: 1px solid var(--til-edge); border-radius: 12px; padding: 1rem 1.1rem; font-size: 1.0625rem; background: var(--til-paper); box-shadow: 0 6px 18px rgba(11, 37, 69, .06); color: var(--til-ink); }
.node-agent { border-color: var(--til-action); background: var(--til-wash); }
.node small { margin-left: auto; color: var(--til-muted); font-size: .875rem; }
.icon-flow { width: 34px; height: 34px; color: var(--til-blue); stroke-width: 1.8; flex: none; }
.flow-line { margin-left: 34px; width: 2px; height: 18px; background: var(--til-steel); }
.clocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.clk { background: var(--til-navy-2); border-radius: 14px; padding: 1.1rem; text-align: center; }
.clk b { display: block; font-family: var(--font-display); font-size: 2.375rem; line-height: 1.2; color: #fff; }
.clk span { color: var(--til-sky); font-size: .9375rem; }
.clk-own { background: var(--til-amber); }
.clk-own b, .clk-own span { color: var(--til-navy); }
.igrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.itile { background: #fff; border-radius: 14px; padding: 1.25rem .6rem; text-align: center; font-size: .9375rem; font-weight: 600; box-shadow: 0 6px 18px rgba(11, 37, 69, .06); }
.icon-tile { display: block; margin: 0 auto .6rem; width: 34px; height: 34px; color: var(--til-blue); stroke-width: 1.8; }

/* Facts and logos */
.facts { border-top: 1px solid var(--til-line); border-bottom: 1px solid var(--til-line); padding: 2.5rem 0; }
.facts-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem 1rem; text-align: center; margin: 0; }
.facts dt { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.875rem); line-height: 1.15; color: var(--til-navy); }
.facts dd { margin: 0; color: var(--til-muted); }
.logo-strip { padding: 1.9rem 0; }
.logo-copy { display: contents; }
.logo-item { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; }

/* Selected work */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.work-card { background: var(--til-navy-2); border-radius: 18px; padding: 1.75rem 1.9rem; display: flex; flex-direction: column; }
.work-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.4rem; }
.work-logo { background: #fff; border-radius: 10px; height: 46px; min-width: 46px; padding: 0 .9rem; display: flex; align-items: center; justify-content: center; color: var(--til-blue); }
.work-logo img { height: 28px; width: auto; max-width: 120px; object-fit: contain; }
.work-chip { font-size: .8125rem; font-weight: 600; color: var(--til-sky); border: 1px solid var(--til-rim); border-radius: 999px; padding: .3rem .7rem; }
.work-result { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1; color: var(--til-amber); margin: 0; overflow-wrap: anywhere; }
.work-what { font-size: 1.1875rem; font-weight: 600; margin: .4rem 0 .75rem; }
.work-body { color: var(--til-pale); line-height: 1.5; margin: 0 0 1.1rem; flex: 1; }
.work-more { color: #fff; font-weight: 600; align-self: flex-start; }
.work-more:hover { color: var(--til-amber); }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-top: 2.25rem; }
.chip-label { color: var(--til-sky); margin-right: .4rem; }
.ichip { display: inline-flex; align-items: center; gap: .5rem; background: var(--til-navy-2); border-radius: 999px; padding: .5rem .95rem .5rem .7rem; font-size: .9375rem; font-weight: 600; color: #fff; text-decoration: none; }
.ichip .icon { color: var(--til-cyan); }
.ichip:hover { background: var(--til-navy-3); color: #fff; }
.chip-row-light .chip-label { color: var(--til-muted); }
.mchip { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border-radius: 999px; padding: .55rem 1rem .55rem .75rem; font-weight: 600; color: var(--til-navy); text-decoration: none; box-shadow: 0 4px 14px rgba(11, 37, 69, .06); }
.mchip .icon { color: var(--til-blue); }
.mchip:hover { color: var(--til-action); }

/* AI */
.ai-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.ai-grid .lead-muted { margin-bottom: 1.6rem; }
.cap { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 0; border-top: 1px solid #D6E0EB; }
.cap b { display: block; font-size: 1.125rem; }
.cap span { color: var(--til-muted); }
.how-card { background: #fff; border-radius: 20px; padding: 2.1rem; box-shadow: 0 12px 32px rgba(11, 37, 69, .08); }
.how-q { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.15; color: var(--til-navy); margin: 0 0 1.4rem; }
.tick { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.0625rem; margin: 0 0 .9rem; }
.tick .icon { width: 22px; height: 22px; margin-top: .15rem; }

/* Services and technologies */
.service-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; margin-top: 1.5rem; }
.service-row { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--til-line); text-decoration: none; color: var(--til-ink); }
.service-text b { display: block; font-size: 1.1875rem; color: var(--til-navy); }
.service-text span { color: var(--til-muted); }
.service-arrow { margin-left: auto; width: 22px; height: 22px; color: var(--til-action); transition: transform .2s; }
.service-row:hover .service-arrow { transform: translateX(4px); }
.service-row:hover b { color: var(--til-action); }
.stack { margin-top: 2.5rem; background: var(--til-paper); border: 1px solid var(--til-line); border-radius: 18px; padding: 1.6rem 1.75rem; }
.stack h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.125rem; margin: 0 0 1.1rem; }
/* One row per group: the label, then a tile per technology (brand-colour logo over its name) */
.stack-row { display: grid; grid-template-columns: 11rem 1fr; gap: .6rem 1.5rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--til-line); }
.stack-row:first-of-type { border-top: 0; padding-top: 0; }
.stack em { display: block; font-style: normal; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--til-muted); }
.tech-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .6rem; }
.tech { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 5.75rem; padding: .85rem .5rem .75rem; background: #fff; border: 1px solid var(--til-edge); border-radius: 12px; text-align: center; font-size: .8125rem; font-weight: 600; line-height: 1.2; color: var(--til-navy); }
.tech img { width: 2rem; height: 2rem; object-fit: contain; }

/* Products */
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; }
.product-card { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--til-line); background: #fff; text-decoration: none; color: var(--til-ink); }
.product-card:hover { border-color: var(--til-cyan); }
.product-shot { display: block; width: 100%; height: 136px; object-fit: cover; object-position: top; }
.ui { height: 136px; background: var(--til-navy); padding: .9rem; display: grid; gap: .5rem; }
.ui-bar { height: 10px; border-radius: 5px; background: var(--til-navy-3); }
.ui-row { display: flex; gap: .5rem; }
.ui-row i { flex: 1; height: 34px; border-radius: 6px; background: var(--til-navy-2); }
.ui-chart { display: flex; align-items: flex-end; gap: 6px; height: 48px; }
.ui-chart i { flex: 1; background: var(--til-action); border-radius: 3px 3px 0 0; }
.ui-hospitalsuit .ui-chart i { background: var(--til-cyan); }
.ui-jer { place-items: center; }
.ui-phone { width: 66px; height: 112px; border: 3px solid var(--til-navy-3); border-radius: 14px; background: var(--til-navy-2); padding: 9px 7px; display: grid; gap: 6px; align-content: start; }
.ui-phone i { height: 11px; border-radius: 3px; background: var(--til-navy-3); }
.ui-phone i.b { background: var(--til-amber); height: 20px; }
.ui-flow { display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%; }
.ui-flow i { width: 30px; height: 30px; border-radius: 8px; background: var(--til-navy-2); border: 2px solid var(--til-action); }
.ui-flow i.end { border-color: var(--til-amber); }
.ui-flow em { width: 14px; height: 2px; background: var(--til-sky); }
.ui-list { display: grid; gap: 7px; align-content: center; }
.ui-list i { height: 14px; border-radius: 4px; background: var(--til-navy-2); display: flex; }
.ui-list i::before { content: ''; width: 30%; background: var(--til-cyan); border-radius: 4px; }
.product-body { display: block; padding: 1rem 1.1rem; }
.product-body b { display: block; font-size: 1.25rem; color: var(--til-navy); }
.product-body span { color: var(--til-muted); font-size: .9375rem; }

/* How we work */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; position: relative; margin: .6rem 0 0; }
.steps::before { content: ''; position: absolute; top: 24px; left: 12%; right: 12%; height: 2px; background: var(--til-steel); }
.st { text-align: center; position: relative; }
.st b { display: block; font-size: 1.1875rem; margin-bottom: .4rem; }
.st > span:last-child { color: var(--til-muted); }
.st-n { width: 50px; height: 50px; border-radius: 50%; background: var(--til-action); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 0 0 6px var(--til-mist); }
.ipnda { text-align: center; color: var(--til-muted); font-size: .9375rem; margin: 1.1rem 0 0; }

/* Team photo band */
.team-band { position: relative; min-height: 380px; display: flex; align-items: center; background-size: cover; background-position: center 30%; color: #fff; }
.team-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 37, 69, .88) 0%, rgba(11, 37, 69, .55) 45%, rgba(11, 37, 69, 0) 75%); }
.team-band .container { position: relative; z-index: 1; }
.team-band-text { max-width: 420px; }
.team-band h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.05; margin: 0 0 .9rem; }
.team-band p { font-size: 1.1875rem; color: #D3E2F1; margin: 0 0 1.4rem; }

/* Reviews */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
.review-card { border: 1px solid var(--til-line); border-radius: 18px; padding: 1.75rem; display: flex; flex-direction: column; margin: 0; }
.review-logo { height: 30px; width: auto; max-width: 140px; object-fit: contain; align-self: flex-start; margin-bottom: 1.1rem; }
.review-card blockquote { flex: 1; margin: 0; }
.review-card blockquote p { font-family: var(--font-quote); font-size: 1.375rem; line-height: 1.4; color: var(--til-navy); margin: 0; }
.who { display: flex; gap: .75rem; align-items: center; margin-top: 1.4rem; }
.who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.who span span { display: block; color: var(--til-muted); font-size: .9375rem; }

@media (max-width: 1199.98px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .product-card:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
    .hero-grid, .ai-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hero-slide { padding: 2.5rem 0 4rem; }
    .hero-slide .container { min-height: 0; }
    /* Stacked slides: keep the line art in the lower part, behind the cards and tiles, clear of the headline */
    .hero-s1 { background-size: auto 60%; background-position: right bottom; }
    .hero-s2 { background-size: auto 60%; background-position: 70% bottom; }
    .facts-grid { grid-template-columns: repeat(3, 1fr); }
    .stack-row { grid-template-columns: 1fr; }
    .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .steps::before { display: none; }
    .review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .section { padding: 3rem 0; }
    .work-grid, .service-list { grid-template-columns: 1fr; }
    .work-card { padding: 1.4rem; }
    .product-grid { grid-template-columns: 1fr; }
    .product-card, .product-card:nth-child(4), .product-card:nth-child(5) { grid-column: auto; }
    .facts-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: 1fr; }
    .tech-list { grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); }
    .clk b { font-size: 1.75rem; }
    .igrid { gap: .6rem; }
    .team-band { min-height: 340px; }
    .team-band::after { background: linear-gradient(90deg, rgba(11, 37, 69, .88) 0%, rgba(11, 37, 69, .6) 100%); }
}

/* Footer */
.site-footer { background: var(--til-navy); color: var(--til-sky); padding: 3rem 0 1.5rem; font-size: .9375rem; }
.footer-logo { height: 40px; width: auto; margin-bottom: .75rem; }
.footer-name { color: #fff; font-weight: 800; margin: 0 0 .25rem; }
.site-footer address { font-style: normal; }
.footer-head { font-family: var(--font-body); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 .6rem; }
.site-footer li { margin-bottom: .35rem; }
.footer-link { color: var(--til-sky); text-decoration: none; }
.footer-link:hover { color: #fff; text-decoration: underline; }
.footer-badges { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--til-navy-3); }
.footer-badge { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #2B5687; border-radius: 10px; padding: .5rem .9rem; color: #fff; font-weight: 600; margin: 0; }
.footer-badge .icon { color: var(--til-amber); }
.footer-badge-link { color: inherit; text-decoration: none; }
.footer-badge-img { display: block; height: 56px; width: auto; background: #fff; padding: .35rem .6rem; border-radius: 8px; box-sizing: content-box; }
.footer-copy { margin: 1.5rem 0 0; font-size: .875rem; }

/* Flash messages */
.alert { border-radius: 10px; }

/* Products page */
.page-hero { background: var(--til-navy); color: #fff; padding: 3.5rem 0 3rem; }
.page-hero .eyebrow { color: var(--til-cyan); }
.page-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 3.2rem); color: #fff; margin: 0 0 .6rem; }
.page-hero .lead-muted { color: var(--til-sky); margin: 0; }
.product-tabs { border-bottom: 2px solid var(--til-mist); gap: .25rem; flex-wrap: wrap; }
.product-tabs .nav-link { color: var(--til-navy); font-weight: 600; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: .8rem 1.2rem; }
.product-tabs .nav-link:hover { color: #3A6BAA; }
.product-tabs .nav-link.active { color: var(--til-navy); background: transparent; border-bottom-color: var(--til-amber); }
.product-panes { padding-top: 2.25rem; }
.product-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.product-head h2 { margin: 0; }
.product-tagline { margin: 0; font-size: 1.1875rem; color: var(--til-muted); }
.product-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.product-shots img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--til-mist); }
.product-desc { max-width: 46rem; font-size: 1.125rem; line-height: 1.6; }
.product-sub { font-size: 1.125rem; margin: 1.5rem 0 .6rem; }
.product-features { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; max-width: 46rem; }
.product-features li { display: flex; gap: .6rem; align-items: flex-start; }
.product-projects { background: var(--til-navy); color: #fff; border-radius: 18px; padding: 1.75rem; margin-top: 2rem; }
.product-projects h3 { color: #fff; margin-bottom: 1.1rem; font-size: 1.375rem; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.more-card { background: #fff; border-radius: 14px; padding: 1.4rem 1.5rem; }
.more-card h3 { font-size: 1.25rem; margin-bottom: .3rem; }
.more-card p { margin: 0; color: var(--til-muted); }
@media (max-width: 991.98px) { .more-grid, .product-projects .work-grid { grid-template-columns: 1fr; } }
.service-body { max-width: 52rem; }
.service-intro { font-size: 1.1875rem; line-height: 1.6; }
.service-sub { font-size: 1.25rem; margin: 1.75rem 0 .8rem; }
.page-hero .eyebrow a { color: inherit; text-decoration: none; }

/* AI & automation, Industries, Work with us */
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.info-card { background: #fff; border-radius: 14px; padding: 1.5rem; box-shadow: 0 4px 14px rgba(11, 37, 69, .06); scroll-margin-top: 6rem; }
.info-card h3 { font-size: 1.25rem; margin: .8rem 0 .4rem; }
.info-card p { margin: 0; color: var(--til-muted); }
.lead-readable { max-width: 46rem; margin-bottom: 0; }
.industry-title { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.industry-title::after { flex-basis: 100%; }
.industry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.25rem; }
.industry-grid h3 { font-size: 1.125rem; margin-bottom: .4rem; }
.industry-grid p { margin: 0; max-width: 34rem; }
.industry-projects { background: var(--til-navy); color: #fff; border-radius: 18px; padding: 1.75rem; margin-top: 2rem; }
.ipnda-left { text-align: left; color: var(--til-sky); }
section[id] { scroll-margin-top: 5rem; }
@media (max-width: 991.98px) {
    .info-grid { grid-template-columns: 1fr 1fr; }
    .industry-grid, .industry-projects .work-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) { .info-grid { grid-template-columns: 1fr; } }

/* About */
.about-story { display: block; }
.about-story p { font-size: 1.125rem; max-width: 40rem; }
.leader-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.leader { background: #fff; border-radius: 16px; padding: 1.5rem; text-align: center; box-shadow: 0 6px 18px rgba(11, 37, 69, .06); }
.leader img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; }
.leader h3 { font-size: 1.25rem; margin: 0 0 .25rem; }
.leader-title { color: var(--til-muted); margin: 0; }
.leader-bio { margin: .8rem 0 0; text-align: left; }
.leader-link { display: inline-block; margin-top: .8rem; font-weight: 600; }
.client-grid { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.client-grid li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 84px; border: 1px solid var(--til-line); border-radius: 12px; padding: .8rem; }
.client-grid img { height: 44px; width: auto; max-width: 130px; object-fit: contain; }
.about-work { margin-top: 1rem; }
@media (max-width: 991px) {
    .leader-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .leader-grid { grid-template-columns: 1fr; }
    .about-work { grid-template-columns: 1fr; }
}
.about-work .work-card { color: #fff; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; align-items: start; }
.contact-form .form-label { font-weight: 600; color: var(--til-navy); }
.contact-form .form-control { border-color: var(--til-edge); border-radius: 10px; padding: .7rem .9rem; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-details address { font-style: normal; color: var(--til-muted); margin-bottom: 1rem; }
.contact-details li { margin-bottom: .5rem; }
.contact-details .icon { color: var(--til-blue); margin-right: .25rem; }
.contact-map iframe { width: 100%; height: 360px; border: 0; border-radius: 14px; }
@media (max-width: 991.98px) { .contact-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Careers */
.career-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.career-card { display: flex; flex-direction: column; gap: 1rem; }
.career-card .btn { align-self: flex-start; margin-top: auto; }
.career-context { color: var(--til-muted); }
.career-facts { margin: 0; }
.career-facts > div { display: flex; gap: .75rem; padding: .4rem 0; border-top: 1px solid var(--til-line); }
.career-facts dt { flex: 0 0 9rem; font-weight: 600; color: var(--til-navy); }
.career-facts dd { margin: 0; color: var(--til-muted); }
.career-detail { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: start; }
.career-heading { margin-top: 1.75rem; color: var(--til-navy); }
.career-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.career-aside .career-facts dt { flex-basis: 7rem; }
.career-empty { max-width: 640px; }
@media (max-width: 991.98px) { .career-grid, .career-detail { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Careers redesign */
.job-list { display: grid; gap: 1.25rem; max-width: 880px; margin: 0 auto; }
.job-card { border: 1px solid var(--til-line); border-radius: 16px; }
.job-card:hover { border-color: var(--til-cyan); }
.job-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; padding: 0; }
.job-chips li { display: inline-flex; align-items: center; gap: .4rem; background: var(--til-mist); color: var(--til-navy); border-radius: 999px; padding: .3rem .8rem .3rem .6rem; font-size: .875rem; font-weight: 600; }
.job-chips .icon { width: 16px; height: 16px; color: var(--til-action); }
.job-chips-on-dark .job-chips { margin-bottom: 0; }
.job-excerpt { color: var(--til-muted); }
.job-empty { max-width: 560px; border-radius: 16px; border: 1px solid var(--til-line); }
.job-breadcrumb { --bs-breadcrumb-divider-color: var(--til-sky); --bs-breadcrumb-item-active-color: var(--til-sky); font-size: .875rem; }
.job-breadcrumb a { color: #fff; }
.job-detail-section .card, .apply-card { border: 1px solid var(--til-line); border-radius: 16px; }
.job-body h2 { color: var(--til-navy); margin-top: 1.75rem; }
.job-body h2:first-child { margin-top: 0; }
.job-summary { position: sticky; top: 6rem; }
.job-facts { margin: 0 0 1.25rem; }
.job-facts > div { padding: .55rem 0; border-top: 1px solid var(--til-line); }
.job-facts dt { font-size: .8125rem; font-weight: 600; color: var(--til-muted); }
.job-facts dd { margin: 0; color: var(--til-navy); font-weight: 600; }
.job-apply-bar { position: sticky; bottom: 0; z-index: 1020; background: #fff; border-top: 1px solid var(--til-line); padding: .75rem 1rem; }
.apply-card { max-width: 640px; }
.apply-legend { font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--til-cyan-text); margin-bottom: .75rem; }
.apply-ref { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; color: var(--til-navy); margin: .5rem 0; }
.apply-done .icon-feature { width: 48px; height: 48px; color: var(--til-action); }
.career-form .form-control:focus { border-color: var(--til-action); box-shadow: 0 0 0 .2rem rgba(58, 107, 170, .3); }
.job-body h2, .job-summary h2, .job-empty h2 { font-size: 1.25rem; }
.job-card h2 { font-size: 1.5rem; }

/* Multi-line CMS text rendered by paragraphs() */
.work-body p, .leader-bio p, .product-desc p, .lead-readable p { margin: 0 0 .6rem; }
.work-body p:last-child, .leader-bio p:last-child, .product-desc p:last-child, .lead-readable p:last-child { margin-bottom: 0; }
.review-card blockquote p + p { margin-top: .6rem; }