@charset "UTF-8";
/* ==========================================================================
CONQUEST IMPEX — theme.css
Single authored stylesheet layered on top of Bootstrap 5.3.
--------------------------------------------------------------------------
00 Fonts
01 Brand scale (theme-independent)
02 Light theme role tokens + Bootstrap variable map
03 Dark theme role tokens + Bootstrap variable map
04 Inverted band context (scoped token remap)
05 Base, reset, typography
06 Layout: container, section, band, rhythm
06b Background pattern (one grid motif, four surfaces)
07 Buttons
08 Header: utility bar, navbar, dropdowns, offcanvas, theme toggle
09 Footer
10 Heroes: home slider + inner hero-page
11 section-head (eyebrow / title / lead)
12 stat-counter
13 feature-card, icon-list, chips
14 process-steps
15 logo-marquee + logo grid
16 brand-card
17 case-card
18 accordion-faq
19 cta-band
20 back-to-top, whatsapp-float
21 Forms: floating labels, validation, file upload, progress
22 Alerts, badges, toasts
23 Breadcrumb
24 Job list (careers)
24b Detail pages: stretched card links, zoomable media
24c Gallery: section tabs, albums, photo grid, video grid
24d Lightbox + video dialog
25 Reveal + motion
26 Accessibility: focus, skip link, reduced motion, more contrast
27 Print
========================================================================== */
/* ==========================================================================
00 FONTS — local woff2 subsets; the Google Fonts in is only
a fallback if these files are missing. unicode-range keeps the Bengali
subset off English pages.
Paths are relative to this stylesheet (../fonts/), not root-absolute, so
the fonts load whether the site is mounted at a document root or inside
a subdirectory such as http://localhost/sites//.
========================================================================== */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hind-siliguri-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hind-siliguri-400-bengali.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hind-siliguri-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/hind-siliguri-500-bengali.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hind-siliguri-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hind Siliguri";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/hind-siliguri-600-bengali.woff2) format("woff2");unicode-range:U+0951-0952,U+0964-0965,U+0980-09FE,U+1CD0,U+1CD2,U+1CD5-1CD6,U+1CD8,U+1CE1,U+1CEA,U+1CED,U+1CF2,U+1CF5-1CF7,U+200C-200D,U+20B9,U+25CC,U+A8F1}
/* ==========================================================================
01 BRAND SCALE — identical in both themes. Only the theme blocks in 02/03
may consume these; component CSS must never reference them directly.
========================================================================== */
:root{
/* the three fixed logo colours */
--ci-navy:#01152F;
--ci-white:#FCFBFC;
--ci-teal:#249B9C;
/* teal shades (teal -> navy): text + hover on light surfaces */
--ci-teal-800:#166570;
--ci-teal-700:#1A737B;
--ci-teal-600:#1B7A81;
/* teal tints (teal -> white): text + fills on dark surfaces */
--ci-teal-300:#5AB3B4;
--ci-teal-200:#7AC1C2;
--ci-teal-100:#E2EFF0;
/* navy elevation ramp (navy -> white) */
--ci-navy-900:#01152F;
--ci-navy-800:#0E2039;
--ci-navy-700:#182A41;
--ci-navy-600:#24354C;
--ci-navy-500:#3D4C60;
/* neutral ramp (white -> navy) */
--ci-n-50:#F7F6F8;
--ci-n-100:#F3F5F7;
--ci-n-200:#E3E4E8;
--ci-n-300:#D4D6DB;
--ci-n-400:#B6BBC3;
--ci-n-450:#959EAC; /* dark-theme muted text (4.60:1 on navy-600) */
--ci-n-500:#848D9A; /* dark-theme control border */
--ci-n-550:#78818F; /* light-theme control border (3.81:1 on white) */
--ci-n-600:#606C7D;
--ci-n-650:#586374; /* light-theme muted text (4.79:1 on n-200) */
--ci-n-700:#38485C;
/* shape, spacing and motion — theme-independent */
--ci-radius-sm:10px;
--ci-radius:16px;
--ci-radius-lg:24px;
--ci-radius-xl:32px;
--ci-radius-pill:999px;
--ci-container:1220px;
--ci-header-h:84px;
--ci-utility-h:40px;
--ci-section-y:clamp(3.5rem,2.5rem + 4vw,6rem);
--ci-ease:cubic-bezier(.22,.61,.36,1);
--ci-dur:.28s;
--ci-font-sans:"Poppins","Hind Siliguri",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
--ci-font-bn:"Hind Siliguri","Poppins",system-ui,-apple-system,"Noto Sans Bengali",sans-serif;
}
/* ==========================================================================
02 LIGHT THEME (default)
========================================================================== */
:root,
[data-ci-theme="light"]{
color-scheme:light;
/* surfaces */
--ci-bg:var(--ci-white);
--ci-surface:#FFFFFF;
--ci-surface-2:var(--ci-n-100);
--ci-surface-3:var(--ci-n-200);
--ci-surface-hover:#FFFFFF; /* light cards separate by lift, not shade */
--ci-surface-invert:var(--ci-navy);
--ci-surface-accent:var(--ci-teal-100);
/* text */
--ci-text:var(--ci-navy);
--ci-text-secondary:var(--ci-n-700);
--ci-text-muted:var(--ci-n-650);
--ci-text-on-accent:var(--ci-navy);
--ci-text-on-invert:var(--ci-white);
/* lines */
--ci-border:var(--ci-n-200);
--ci-border-strong:var(--ci-n-300);
--ci-border-control:var(--ci-n-550);
--ci-border-accent:var(--ci-teal);
/* accent */
--ci-accent:var(--ci-teal);
--ci-accent-hover:var(--ci-teal-600);
--ci-text-on-accent-hover:var(--ci-white); /* 4.91:1 on teal-600 */
--ci-accent-text:var(--ci-teal-700);
--ci-accent-text-strong:var(--ci-teal-800);
--ci-accent-soft:var(--ci-teal-100);
--ci-accent-on-soft:var(--ci-navy);
/* elevation, scrim, focus */
--ci-shadow-sm:0 6px 18px rgba(1,21,47,.06);
--ci-shadow:0 18px 48px rgba(1,21,47,.10);
--ci-shadow-lg:0 28px 80px rgba(1,21,47,.14);
--ci-shadow-card:var(--ci-shadow-sm);
--ci-shadow-card-hover:var(--ci-shadow);
--ci-card-lift:-4px;
--ci-highlight:transparent;
--ci-overlay:rgba(1,21,47,.55);
--ci-hero-filter:none;
--ci-focus:rgba(36,155,156,.32);
--ci-focus-ring:var(--ci-teal);
/* semantic states */
--ci-success:#177245;
--ci-warning:#8A5300;
--ci-danger:#B42318;
--ci-info:#175CD3;
--ci-success-soft:rgba(23,114,69,.08);
--ci-warning-soft:rgba(138,83,0,.08);
--ci-danger-soft:rgba(180,35,24,.08);
--ci-info-soft:rgba(23,92,211,.08);
/* inverted band (the dark band that appears inside a light page) */
--ci-band-bg:var(--ci-navy);
--ci-band-surface:var(--ci-navy-700);
--ci-band-surface-2:var(--ci-navy-600);
--ci-band-text:var(--ci-white);
--ci-band-text-secondary:var(--ci-n-400);
--ci-band-text-muted:var(--ci-n-450);
--ci-band-border:var(--ci-navy-600);
--ci-band-border-strong:var(--ci-navy-500);
--ci-band-border-control:var(--ci-n-500);
--ci-band-accent-text:var(--ci-teal-300);
--ci-band-accent-soft:rgba(36,155,156,.16);
--ci-band-highlight:rgba(252,251,252,.06);
/* adaptive media treatments
Full-colour client/partner/concern logos ship with their own light
background, so they sit on a light tile in BOTH themes — inverting them
would flatten each one into a solid white block. Only single-colour marks
with real transparency get the silhouette treatment. */
/* background pattern — one motif, four surfaces (see §06b) */
--ci-pattern-ink:rgba(1,21,47,.055);
--ci-logo-tile-bg:#FFFFFF;
--ci-logo-tile-border:var(--ci-n-200);
--ci-logo-mono-filter:none;
--ci-logo-mono-opacity:1;
--ci-map-filter:none;
/* media & scrim tokens — identical in both themes: these sit over a navy
photo scrim, so they must not follow the page theme */
--ci-scrim-hairline:rgba(252,251,252,.14);
--ci-scrim-fill:rgba(252,251,252,.12);
--ci-scrim-border:rgba(252,251,252,.40);
--ci-indicator-idle:rgba(252,251,252,.45);
--ci-wash-accent:rgba(36,155,156,.30);
--ci-wash-cta:rgba(36,155,156,.22);
--ci-overlay-strong:rgba(1,21,47,.82);
/* ---- Bootstrap variable map (light) ---- */
--bs-body-bg:var(--ci-bg);
--bs-body-color:var(--ci-text);
--bs-emphasis-color:var(--ci-text);
--bs-secondary-color:var(--ci-text-secondary);
--bs-tertiary-color:var(--ci-text-muted);
--bs-body-bg-rgb:252,251,252;
--bs-body-color-rgb:1,21,47;
--bs-border-color:var(--ci-border);
--bs-border-color-translucent:var(--ci-border);
--bs-secondary-bg:var(--ci-surface-2);
--bs-tertiary-bg:var(--ci-surface-3);
--bs-primary:var(--ci-accent);
--bs-primary-rgb:36,155,156;
--bs-primary-text-emphasis:var(--ci-accent-text);
--bs-primary-bg-subtle:var(--ci-accent-soft);
--bs-primary-border-subtle:var(--ci-accent);
--bs-link-color:var(--ci-accent-text);
--bs-link-color-rgb:26,115,123;
--bs-link-hover-color:var(--ci-accent-text-strong);
--bs-focus-ring-color:var(--ci-focus);
--bs-heading-color:var(--ci-text);
--bs-code-color:var(--ci-accent-text);
--bs-highlight-bg:var(--ci-accent-soft);
--bs-font-sans-serif:var(--ci-font-sans);
--bs-border-radius:var(--ci-radius-sm);
--bs-border-radius-lg:var(--ci-radius);
}
/* ==========================================================================
03 DARK THEME — an equal design, not an inversion. Cards separate by
elevation instead of shade; hover brightens instead of lifting.
========================================================================== */
[data-ci-theme="dark"]{
color-scheme:dark;
--ci-bg:var(--ci-navy);
--ci-surface:var(--ci-navy-800);
--ci-surface-2:var(--ci-navy-700);
--ci-surface-3:var(--ci-navy-600);
--ci-surface-hover:var(--ci-navy-700); /* dark cards brighten, no lift */
--ci-surface-invert:var(--ci-white);
--ci-surface-accent:rgba(36,155,156,.14);
--ci-text:var(--ci-white);
--ci-text-secondary:var(--ci-n-400);
--ci-text-muted:var(--ci-n-450);
--ci-text-on-accent:var(--ci-navy);
--ci-text-on-invert:var(--ci-navy);
--ci-border:var(--ci-navy-600);
--ci-border-strong:var(--ci-navy-500);
--ci-border-control:var(--ci-n-500);
--ci-border-accent:var(--ci-teal-300);
--ci-accent:var(--ci-teal);
--ci-accent-hover:var(--ci-teal-300);
--ci-text-on-accent-hover:var(--ci-navy); /* 7.43:1 on teal-300 */
--ci-accent-text:var(--ci-teal-300);
--ci-accent-text-strong:var(--ci-teal-200);
--ci-accent-soft:rgba(36,155,156,.16);
--ci-accent-on-soft:var(--ci-teal-300);
--ci-shadow-sm:0 6px 18px rgba(0,0,0,.35);
--ci-shadow:0 18px 48px rgba(0,0,0,.45);
--ci-shadow-lg:0 28px 80px rgba(0,0,0,.55);
--ci-shadow-card:none;
--ci-shadow-card-hover:none;
--ci-card-lift:0px;
--ci-highlight:rgba(252,251,252,.04);
--ci-overlay:rgba(1,21,47,.72);
--ci-hero-filter:brightness(.85) saturate(.9);
--ci-focus:rgba(90,179,180,.42);
--ci-focus-ring:var(--ci-teal-300);
--ci-success:#5EE39A;
--ci-warning:#FBBF24;
--ci-danger:#FF9C90;
--ci-info:#7FB2FF;
--ci-success-soft:rgba(94,227,154,.16);
--ci-warning-soft:rgba(251,191,36,.16);
--ci-danger-soft:rgba(255,156,144,.16);
--ci-info-soft:rgba(127,178,255,.16);
/* on a dark page the rhythm band is teal-tinted, not white */
--ci-band-bg:rgba(36,155,156,.10);
--ci-band-surface:var(--ci-navy-700);
--ci-band-surface-2:var(--ci-navy-600);
--ci-band-text:var(--ci-white);
--ci-band-text-secondary:var(--ci-n-400);
--ci-band-text-muted:var(--ci-n-450);
--ci-band-border:var(--ci-navy-600);
--ci-band-border-strong:var(--ci-navy-500);
--ci-band-border-control:var(--ci-n-500);
--ci-band-accent-text:var(--ci-teal-300);
--ci-band-accent-soft:rgba(36,155,156,.16);
--ci-band-highlight:rgba(252,251,252,.06);
--ci-pattern-ink:rgba(252,251,252,.055);
--ci-logo-tile-bg:var(--ci-white);
--ci-logo-tile-border:var(--ci-navy-600);
--ci-logo-mono-filter:brightness(0) invert(1);
--ci-logo-mono-opacity:.78;
--ci-map-filter:invert(.9) hue-rotate(180deg);
/* media & scrim tokens — identical in both themes: these sit over a navy
photo scrim, so they must not follow the page theme */
--ci-scrim-hairline:rgba(252,251,252,.14);
--ci-scrim-fill:rgba(252,251,252,.12);
--ci-scrim-border:rgba(252,251,252,.40);
--ci-indicator-idle:rgba(252,251,252,.45);
--ci-wash-accent:rgba(36,155,156,.30);
--ci-wash-cta:rgba(36,155,156,.22);
--ci-overlay-strong:rgba(1,21,47,.82);
/* ---- Bootstrap variable map (dark) ---- */
--bs-body-bg:var(--ci-bg);
--bs-body-color:var(--ci-text);
--bs-emphasis-color:var(--ci-text);
--bs-secondary-color:var(--ci-text-secondary);
--bs-tertiary-color:var(--ci-text-muted);
--bs-body-bg-rgb:1,21,47;
--bs-body-color-rgb:252,251,252;
--bs-border-color:var(--ci-border);
--bs-border-color-translucent:var(--ci-border);
--bs-secondary-bg:var(--ci-surface-2);
--bs-tertiary-bg:var(--ci-surface-3);
--bs-primary:var(--ci-accent);
--bs-primary-rgb:36,155,156;
--bs-primary-text-emphasis:var(--ci-accent-text);
--bs-primary-bg-subtle:var(--ci-accent-soft);
--bs-primary-border-subtle:var(--ci-border-accent);
--bs-link-color:var(--ci-accent-text);
--bs-link-color-rgb:90,179,180;
--bs-link-hover-color:var(--ci-accent-text-strong);
--bs-focus-ring-color:var(--ci-focus);
--bs-heading-color:var(--ci-text);
--bs-code-color:var(--ci-accent-text);
--bs-highlight-bg:var(--ci-accent-soft);
--bs-font-sans-serif:var(--ci-font-sans);
--bs-border-radius:var(--ci-radius-sm);
--bs-border-radius-lg:var(--ci-radius);
}
/* ==========================================================================
04 INVERTED BAND CONTEXT
.ci-invert remaps the role tokens to the band tokens, so every
component inside a navy (light) / teal-tinted (dark) band keeps
working without a single extra component rule.
========================================================================== */
.ci-invert{
--ci-bg:var(--ci-band-bg);
--ci-surface:var(--ci-band-surface);
--ci-surface-2:var(--ci-band-surface-2);
--ci-surface-3:var(--ci-band-surface-2);
--ci-surface-hover:var(--ci-band-surface-2);
--ci-surface-accent:var(--ci-band-accent-soft);
--ci-text:var(--ci-band-text);
--ci-text-secondary:var(--ci-band-text-secondary);
--ci-text-muted:var(--ci-band-text-muted);
--ci-border:var(--ci-band-border);
--ci-border-strong:var(--ci-band-border-strong);
--ci-border-control:var(--ci-band-border-control);
--ci-border-accent:var(--ci-teal-300);
--ci-accent-hover:var(--ci-teal-300);
--ci-text-on-accent-hover:var(--ci-navy);
--ci-accent-text:var(--ci-band-accent-text);
--ci-accent-text-strong:var(--ci-teal-200);
--ci-accent-soft:var(--ci-band-accent-soft);
--ci-accent-on-soft:var(--ci-teal-300);
--ci-highlight:var(--ci-band-highlight);
--ci-pattern-ink:rgba(252,251,252,.06);
--ci-shadow-card:none;
--ci-shadow-card-hover:none;
--ci-card-lift:0px;
--ci-focus-ring:var(--ci-teal-300);
--ci-focus:rgba(90,179,180,.42);
--ci-logo-mono-filter:brightness(0) invert(1);
--ci-logo-mono-opacity:.78;
--bs-body-color:var(--ci-text);
--bs-emphasis-color:var(--ci-text);
--bs-secondary-color:var(--ci-text-secondary);
--bs-border-color:var(--ci-border);
--bs-link-color:var(--ci-accent-text);
--bs-link-hover-color:var(--ci-accent-text-strong);
background:var(--ci-band-bg);
color:var(--ci-text);
}
/* .ci-chrome — the always-navy chrome (utility bar, offcanvas, footer, photo
hero). Identical in both themes by design, so it remaps the role tokens once
and every component inside it keeps using plain role tokens. */
.ci-chrome{
--ci-pattern-ink:rgba(252,251,252,.05);
--ci-bg:var(--ci-navy);
--ci-surface:var(--ci-navy-800);
--ci-surface-2:var(--ci-navy-700);
--ci-surface-3:var(--ci-navy-600);
--ci-surface-hover:var(--ci-navy-700);
--ci-surface-accent:rgba(36,155,156,.16);
--ci-text:var(--ci-white);
--ci-text-secondary:var(--ci-n-400);
--ci-text-muted:var(--ci-n-450);
--ci-border:var(--ci-navy-600);
--ci-border-strong:var(--ci-navy-500);
--ci-border-control:var(--ci-n-500);
--ci-border-accent:var(--ci-teal-300);
--ci-accent-hover:var(--ci-teal-300);
--ci-text-on-accent-hover:var(--ci-navy);
--ci-accent-text:var(--ci-teal-300);
--ci-accent-text-strong:var(--ci-teal-200);
--ci-accent-soft:rgba(36,155,156,.16);
--ci-accent-on-soft:var(--ci-teal-300);
--ci-highlight:rgba(252,251,252,.06);
--ci-shadow-card:none;
--ci-shadow-card-hover:none;
--ci-card-lift:0px;
--ci-focus-ring:var(--ci-teal-300);
--ci-focus:rgba(90,179,180,.42);
--ci-logo-mono-filter:brightness(0) invert(1);
--ci-logo-mono-opacity:.78;
--bs-body-color:var(--ci-text);
--bs-emphasis-color:var(--ci-text);
--bs-secondary-color:var(--ci-text-secondary);
--bs-border-color:var(--ci-border);
--bs-link-color:var(--ci-accent-text);
--bs-link-hover-color:var(--ci-accent-text-strong);
background:var(--ci-bg);
color:var(--ci-text);
}
/* ==========================================================================
05 BASE, RESET, TYPOGRAPHY
========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--ci-header-h) + 16px)}
html.ci-no-transition,html.ci-no-transition *{transition:none!important;animation-duration:0s!important}
body{
margin:0;
background:var(--ci-bg);
color:var(--ci-text);
font-family:var(--ci-font-sans);
font-size:1rem;
line-height:1.65;
font-weight:400;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
html[data-ci-page-lang="bn"] body{font-family:var(--ci-font-bn);line-height:1.8}
h1,h2,h3,h4,h5,h6,.ci-title{
font-family:var(--ci-font-sans);
color:var(--ci-text);
font-weight:700;
line-height:1.18;
letter-spacing:-.01em;
margin:0 0 .6rem;
}
html[data-ci-page-lang="bn"] h1,
html[data-ci-page-lang="bn"] h2,
html[data-ci-page-lang="bn"] h3,
html[data-ci-page-lang="bn"] .ci-title{font-family:var(--ci-font-bn);line-height:1.4;letter-spacing:0}
h1,.ci-h1{font-size:clamp(2.15rem,1.5rem + 2.9vw,3.35rem)}
h2,.ci-h2{font-size:clamp(2rem,1.4rem + 2vw,2.9rem)}
h3,.ci-h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem)}
h4{font-size:1.1rem}
p{margin:0 0 1rem;color:inherit}
a{color:var(--ci-accent-text);text-decoration:none;transition:color var(--ci-dur) var(--ci-ease)}
a:hover{color:var(--ci-accent-text-strong);text-decoration:underline;text-underline-offset:3px}
strong,b{font-weight:600}
small,.ci-small{font-size:.85rem}
hr{border:0;border-top:1px solid var(--ci-border);opacity:1;margin:2rem 0}
img,svg,iframe{max-width:100%}
img{height:auto}
::selection{background:var(--ci-accent);color:var(--ci-text-on-accent)}
.ci-text-muted{color:var(--ci-text-muted)!important}
.ci-text-secondary{color:var(--ci-text-secondary)!important}
.ci-text-accent{color:var(--ci-accent-text)!important}
.ci-lead{color:var(--ci-text-secondary);font-size:1.06rem;max-width:68ch;margin:0 0 1rem}
.ci-measure{max-width:68ch}
/* ==========================================================================
06 LAYOUT: container, section, band, rhythm
========================================================================== */
.ci-container{width:100%;max-width:var(--ci-container);margin-inline:auto;padding-inline:1.25rem}
/* Very narrow phones (320px class): 20px of gutter each side costs 12.5% of the
screen. 16px keeps the utility bar on one row and gives every page a little
more measure. */
@media (max-width:359.98px){.ci-container{padding-inline:1rem}}
@media (min-width:992px){.ci-container{padding-inline:2rem}}
.ci-section{padding-block:var(--ci-section-y);position:relative}
.ci-section--tight{padding-block:calc(var(--ci-section-y) * .62)}
.ci-section--flush-top{padding-top:0}
.ci-section--bg{background:var(--ci-bg)}
.ci-section--alt{background:var(--ci-surface-2)}
.ci-section--accent{background:var(--ci-surface-accent)}
.ci-band{background:var(--ci-band-bg);position:relative}
[data-ci-theme="dark"] .ci-band{border-block:1px solid var(--ci-border)}
.ci-divider{border-top:1px solid var(--ci-border)}
.ci-stack>*+*{margin-top:1rem}
.ci-grid{display:grid;gap:1.5rem}
main{display:block}
[id]{scroll-margin-top:calc(var(--ci-header-h) + 24px)}
/* ==========================================================================
06b BACKGROUND PATTERN
One motif — a fine engineering grid — on four surfaces: the inner-page
hero, the alternating section band, the CTA band and the footer. Using
the same motif at the same scale everywhere is what keeps it reading as
texture rather than decoration.
It is drawn on a pseudo-element rather than the element's own
background-image so it can be MASKED: the grid fades out before it
reaches the far edge, which is the difference between texture and tiled
wallpaper. `isolation:isolate` on the surface plus `z-index:-1` on the
layer puts it above the background colour and below every child, so no
content needs a z-index of its own.
Ink comes from --ci-pattern-ink, so navy surfaces get light lines and
light surfaces get navy ones with no per-theme rule here. The CTA band
and the inner hero already carry a radial accent wash on ::before; the
grid rides underneath it on ::after rather than replacing it.
========================================================================== */
/* position:relative as well as isolation — `isolation` makes the stacking
context but NOT the containing block, so without it the layer would position
against the viewport. .ci-section, .ci-hero-page and .ci-cta already have it. */
.ci-pattern,
.ci-section--alt,
.ci-hero-page,
.ci-cta,
.ci-footer{position:relative;isolation:isolate}
.ci-pattern::after,
.ci-section--alt::after,
.ci-hero-page::after,
.ci-cta::after,
.ci-footer::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:
linear-gradient(var(--ci-pattern-ink) 1px,transparent 1px),
linear-gradient(90deg,var(--ci-pattern-ink) 1px,transparent 1px);
background-size:64px 64px;
background-position:center top;
}
/* Per-surface fade, so the grid enters from a different edge on each band and
the page does not read as one repeating field. Mask alpha, not a colour. */
.ci-pattern::after,
.ci-section--alt::after{
-webkit-mask-image:radial-gradient(115% 100% at 50% 0%,#000 15%,transparent 75%);
mask-image:radial-gradient(115% 100% at 50% 0%,#000 15%,transparent 75%);
}
.ci-hero-page::after{
-webkit-mask-image:linear-gradient(#000,transparent 85%);
mask-image:linear-gradient(#000,transparent 85%);
}
.ci-cta::after{
-webkit-mask-image:radial-gradient(90% 140% at 12% 50%,#000 10%,transparent 70%);
mask-image:radial-gradient(90% 140% at 12% 50%,#000 10%,transparent 70%);
}
/* Footer: faintest of the four, because it sits behind the most small text. */
.ci-footer::after{
inset:0 0 auto;height:60%;
-webkit-mask-image:linear-gradient(#000,transparent);
mask-image:linear-gradient(#000,transparent);
}
@media (max-width:575.98px){
.ci-pattern::after,.ci-section--alt::after,.ci-hero-page::after,
.ci-cta::after,.ci-footer::after{background-size:44px 44px}
}
/* ==========================================================================
07 BUTTONS — pill, 48px, weight 600. Every variant is legible on
--ci-bg, --ci-surface and inside .ci-invert.
========================================================================== */
.ci-btn,
.btn-ci-primary,.btn-ci-solid,.btn-ci-outline,.btn-ci-ghost{
--ci-btn-bg:transparent;
--ci-btn-fg:var(--ci-text);
--ci-btn-bd:transparent;
display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
min-height:48px;padding:.6rem 1.6rem;
border-radius:var(--ci-radius-pill);
border:1.5px solid var(--ci-btn-bd);
background:var(--ci-btn-bg);
color:var(--ci-btn-fg);
font-family:var(--ci-font-sans);
font-size:.95rem;font-weight:600;line-height:1.2;
text-align:center;text-decoration:none;
cursor:pointer;
transition:background var(--ci-dur) var(--ci-ease),color var(--ci-dur) var(--ci-ease),
border-color var(--ci-dur) var(--ci-ease),transform var(--ci-dur) var(--ci-ease),
box-shadow var(--ci-dur) var(--ci-ease);
}
html[data-ci-page-lang="bn"] .ci-btn{font-family:var(--ci-font-bn)}
.ci-btn:hover{text-decoration:none}
.ci-btn i{font-size:1.05em;line-height:1}
.ci-btn--sm{min-height:40px;padding:.35rem 1.1rem;font-size:.86rem}
.ci-btn--lg{min-height:54px;padding:.75rem 2rem;font-size:1rem}
.ci-btn--block{width:100%}
.ci-btn:disabled,.ci-btn[aria-busy="true"]{opacity:.62;pointer-events:none}
/* primary: pure teal fill + navy label in BOTH themes (5.43:1) */
.btn-ci-primary{--ci-btn-bg:var(--ci-accent);--ci-btn-fg:var(--ci-text-on-accent);--ci-btn-bd:var(--ci-accent);--ci-focus-ring:var(--ci-text-on-accent)}
.btn-ci-primary:hover,.btn-ci-primary:focus-visible{--ci-btn-bg:var(--ci-accent-hover);--ci-btn-bd:var(--ci-accent-hover);--ci-btn-fg:var(--ci-text-on-accent-hover)}
.btn-ci-primary:active{transform:translateY(1px)}
/* solid: navy button on light, white button on dark */
.btn-ci-solid{--ci-btn-bg:var(--ci-text);--ci-btn-fg:var(--ci-bg);--ci-btn-bd:var(--ci-text)}
.btn-ci-solid:hover,.btn-ci-solid:focus-visible{--ci-btn-bg:var(--ci-accent);--ci-btn-bd:var(--ci-accent);--ci-btn-fg:var(--ci-text-on-accent)}
/* outline */
.btn-ci-outline{--ci-btn-bd:var(--ci-border-control);--ci-btn-fg:var(--ci-text)}
.btn-ci-outline:hover,.btn-ci-outline:focus-visible{--ci-btn-bd:var(--ci-accent);--ci-btn-fg:var(--ci-accent-text);background:var(--ci-accent-soft)}
/* ghost */
.btn-ci-ghost{--ci-btn-fg:var(--ci-accent-text);padding-inline:1.1rem}
.btn-ci-ghost:hover,.btn-ci-ghost:focus-visible{background:var(--ci-accent-soft);--ci-btn-fg:var(--ci-accent-text-strong)}
.ci-btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.ci-btn .spinner-border{width:1rem;height:1rem;border-width:.15em}
/* ==========================================================================
08 HEADER: utility bar, navbar, dropdowns, offcanvas, theme toggle
========================================================================== */
.ci-skip{
position:fixed;top:-100px;left:1rem;z-index:2000;
background:var(--ci-accent);color:var(--ci-text-on-accent);
padding:.7rem 1.2rem;border-radius:var(--ci-radius-pill);font-weight:600;
transition:top var(--ci-dur) var(--ci-ease);
}
.ci-skip:focus{top:.75rem;color:var(--ci-text-on-accent)}
.ci-header{position:sticky;top:0;z-index:1030}
.ci-utility{
font-size:.82rem;min-height:var(--ci-utility-h);
border-bottom:1px solid var(--ci-border);
}
.ci-utility__inner{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;justify-content:space-between;min-height:var(--ci-utility-h);padding-block:.25rem}
.ci-utility a{color:var(--ci-text);display:inline-flex;align-items:center;gap:.4rem}
.ci-utility a:hover{color:var(--ci-accent-text);text-decoration:none}
.ci-utility__group{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.ci-utility i{color:var(--ci-accent-text)}
.ci-lang{display:inline-flex;align-items:center;gap:.35rem;font-weight:600}
/* "EN" is only ~16x21 as a bare inline link, under the 24x24 minimum in WCAG
2.2 SC 2.5.8 — and on a bilingual site this is the control that most needs to
be easy to hit on a phone. The box grows to 24x24; the type does not move. */
.ci-lang a{
display:inline-flex;align-items:center;justify-content:center;
min-width:24px;min-height:24px;
}
.ci-lang__sep{opacity:.45}
.ci-lang a[aria-current="true"]{color:var(--ci-accent-text);text-decoration:underline;text-underline-offset:3px}
@media (max-width:767.98px){.ci-utility__contact .ci-utility__mail{display:none}}
@media (max-width:575.98px){
/* Phone: the bar carries the number, the language switch and the theme
toggle. Tighter type and gaps keep all three on one row — at the desktop
values they wrap onto a second row and the header eats a quarter of the
screen. */
.ci-utility{font-size:.78rem;min-height:34px}
.ci-utility__inner{gap:.35rem .7rem;padding-block:.1rem;min-height:34px}
.ci-utility__group{gap:.7rem}
.ci-theme-switch{padding-inline:0}
.ci-theme-switch__track{width:54px;flex-basis:54px;height:26px}
.ci-theme-switch__thumb{width:22px;height:18px}
[data-ci-theme="dark"] .ci-theme-switch__thumb{transform:translateX(22px)}
}
@media (max-width:359.98px){
.ci-utility__inner{gap:.3rem .5rem}
.ci-utility__group{gap:.55rem}
}
.ci-navbar{
background:var(--ci-bg);
border-bottom:1px solid var(--ci-border);
transition:background var(--ci-dur) var(--ci-ease),box-shadow var(--ci-dur) var(--ci-ease),
border-color var(--ci-dur) var(--ci-ease);
}
.ci-navbar__inner{display:flex;align-items:center;gap:1rem;min-height:var(--ci-header-h);transition:min-height var(--ci-dur) var(--ci-ease)}
@media (max-width:575.98px){
.ci-navbar__inner{gap:.6rem;min-height:64px}
.ci-header.is-stuck .ci-navbar__inner{min-height:58px}
.ci-header__actions{gap:.45rem}
}
.ci-header.is-stuck .ci-navbar{box-shadow:var(--ci-shadow-sm);border-bottom-color:transparent}
.ci-header.is-stuck .ci-navbar__inner{min-height:66px}
.ci-logo{display:inline-flex;align-items:center;flex:0 0 auto}
.ci-logo img{display:block;width:auto;height:40px}
@media (max-width:575.98px){.ci-logo img{height:34px}}
/* The footer takes the compact lockup (no stacked tagline), which is far wider
at the same cap height — hold it back so it does not dominate the column. */
.ci-logo--footer img{height:34px}
@media (max-width:575.98px){.ci-logo--footer img{height:30px}}
/* the swap needs img in the selector so it outranks `.ci-logo img` above */
.ci-logo img.ci-logo__light{display:block}
.ci-logo img.ci-logo__dark{display:none}
[data-ci-theme="dark"] .ci-logo img.ci-logo__light{display:none}
[data-ci-theme="dark"] .ci-logo img.ci-logo__dark{display:block}
/* Desktop nav turns on at 1320px, not at the usual 992px, because the row is
what it is: logo (184) + nine nav items (900) + actions (128) + gaps and the
container's 2rem gutters needs ~1235px to render without the flex row
overflowing. Below that the excess used to be swallowed by
`body{overflow-x:hidden}` — silently clipped rather than scrollable — which
put the Get a Quote CTA off-screen and unclickable from 992px to ~1235px,
iPad landscape included. 1320 rather than 1240 because that is where the CTA
clears the viewport edge by ~35px, matching the container gutter; any lower
and it renders flush against the edge.
Keep this in step with DESKTOP in main.js and with .ci-burger below. */
.ci-nav{display:none}
@media (min-width:1320px){.ci-nav{display:block;margin-inline:auto}}
.ci-nav__list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
/* .55rem rather than .7rem inline padding: across nine links that is ~43px,
which is exactly what the row needs to carry the quote CTA on one line at
1320px. Keep ::after's insets equal to this padding or the active underline
stops matching the label width. */
.ci-nav__link{
position:relative;display:inline-flex;align-items:center;gap:.3rem;
padding:.6rem .55rem;border-radius:var(--ci-radius-sm);
color:var(--ci-text);font-size:.94rem;font-weight:500;white-space:nowrap;
}
.ci-nav__link:hover{color:var(--ci-accent-text);text-decoration:none;background:var(--ci-accent-soft)}
.ci-nav__link::after{
content:"";position:absolute;left:.55rem;right:.55rem;bottom:.15rem;height:3px;border-radius:2px;
background:var(--ci-accent);transform:scaleX(0);transform-origin:left;
transition:transform var(--ci-dur) var(--ci-ease);
}
.ci-nav__link[aria-current="page"]{color:var(--ci-text);font-weight:600}
.ci-nav__link[aria-current="page"]::after{transform:scaleX(1)}
.ci-nav__item{position:relative}
.ci-nav__toggle i{font-size:.75rem;transition:transform var(--ci-dur) var(--ci-ease)}
.ci-nav__item.is-open .ci-nav__toggle i{transform:rotate(180deg)}
.ci-nav__menu{
position:absolute;top:calc(100% + .35rem);left:0;z-index:20;
min-width:290px;padding:.6rem;margin:0;list-style:none;
background:var(--ci-surface);border:1px solid var(--ci-border);
border-radius:var(--ci-radius);box-shadow:var(--ci-shadow);
opacity:0;visibility:hidden;transform:translateY(6px);
transition:opacity var(--ci-dur) var(--ci-ease),transform var(--ci-dur) var(--ci-ease),visibility var(--ci-dur);
}
.ci-nav__item.is-open>.ci-nav__menu{opacity:1;visibility:visible;transform:none}
.ci-nav__menu a{
display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border-radius:var(--ci-radius-sm);
color:var(--ci-text);font-size:.9rem;font-weight:500;
}
.ci-nav__menu a:hover,.ci-nav__menu a:focus-visible{background:var(--ci-accent-soft);color:var(--ci-accent-text);text-decoration:none}
.ci-nav__menu i{color:var(--ci-accent);font-size:1rem}
.ci-header__actions{display:flex;align-items:center;gap:.6rem;margin-left:auto}
@media (min-width:1320px){.ci-header__actions{margin-left:0}}
.ci-burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--ci-radius-sm);border:1.5px solid var(--ci-border-control);background:transparent;color:var(--ci-text);font-size:1.35rem}
@media (min-width:1320px){.ci-burger{display:none}}
/* The quote CTA is the primary conversion on a supplier site, so it stays in
the header at every width instead of being buried in the offcanvas. On a
phone it shortens to "Quote"; below 360px there is genuinely no room and the
utility-bar phone number is the direct action instead. */
/* nowrap: without it flexbox squeezes the CTA below its content width and
"Get a Quote" breaks onto two lines at every desktop width. flex:0 0 auto on
the actions group keeps the squeeze from coming back — if the row ever grows
again the nav gives way rather than the CTA, because a clipped CTA is
invisible (body carries overflow-x:hidden) while a tight nav is merely tight. */
.ci-header__cta{display:inline-flex;padding-inline:1rem;min-height:44px;white-space:nowrap}
.ci-header__actions{flex:0 0 auto}
.ci-header__cta-full{display:none}
.ci-header__cta-mini{display:inline}
@media (max-width:359.98px){.ci-header__cta{display:none}}
@media (min-width:576px){
.ci-header__cta{padding-inline:1.35rem}
.ci-header__cta-full{display:inline}
.ci-header__cta-mini{display:none}
}
/* transparent-over-hero variant — stays fixed so toggling .is-stuck never
reflows the page; the hero reserves the header height as top padding. */
.ci-header--over{position:fixed;left:0;right:0;top:0}
.ci-header--over:not(.is-stuck) .ci-navbar{background:transparent;border-bottom-color:var(--ci-scrim-hairline)}
.ci-header--over:not(.is-stuck) .ci-navbar__inner{
--ci-text:var(--ci-white);
--ci-accent-text:var(--ci-teal-300);
--ci-accent-soft:var(--ci-scrim-fill);
--ci-border-control:var(--ci-scrim-border);
color:var(--ci-text);
}
.ci-header--over:not(.is-stuck) .ci-logo img.ci-logo__light{display:none}
.ci-header--over:not(.is-stuck) .ci-logo img.ci-logo__dark{display:block}
.ci-header--over.is-stuck .ci-navbar{background:var(--ci-bg);border-bottom-color:var(--ci-border)}
/* theme switch — a two-state track that shows BOTH destinations at once, so it
reads as a theme control at a glance instead of a single ambiguous icon. The
teal thumb sits over whichever mode is active. */
.ci-theme-switch{
display:inline-flex;align-items:center;gap:.5rem;
padding:.15rem .2rem .15rem .55rem;
background:transparent;border:0;border-radius:var(--ci-radius-pill);
color:var(--ci-text);font:inherit;cursor:pointer;
}
.ci-theme-switch__label{
font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--ci-text-secondary);white-space:nowrap;
transition:color var(--ci-dur) var(--ci-ease);
}
.ci-theme-switch:hover .ci-theme-switch__label{color:var(--ci-text)}
@media (max-width:575.98px){.ci-theme-switch__label{display:none}}
html[data-ci-page-lang="bn"] .ci-theme-switch__label{letter-spacing:.04em;text-transform:none;font-size:.78rem}
.ci-theme-switch__track{
position:relative;display:inline-flex;align-items:center;
width:62px;height:30px;flex:0 0 62px;padding:3px;
background:var(--ci-surface-2);
border:1px solid var(--ci-border-control);
border-radius:var(--ci-radius-pill);
transition:border-color var(--ci-dur) var(--ci-ease),background var(--ci-dur) var(--ci-ease);
}
.ci-theme-switch:hover .ci-theme-switch__track{border-color:var(--ci-border-accent)}
.ci-theme-switch__thumb{
position:absolute;top:3px;left:3px;
width:26px;height:22px;border-radius:var(--ci-radius-pill);
background:var(--ci-accent);
transition:transform var(--ci-dur) var(--ci-ease),background var(--ci-dur) var(--ci-ease);
}
[data-ci-theme="dark"] .ci-theme-switch__thumb{transform:translateX(26px)}
.ci-theme-switch__track i{
position:relative;z-index:1;flex:1 1 50%;
display:grid;place-items:center;
font-size:.8rem;line-height:1;
color:var(--ci-text-secondary);
transition:color var(--ci-dur) var(--ci-ease);
}
/* the icon sitting on the teal thumb takes the on-accent colour (5.43:1) */
[data-ci-theme="light"] .ci-theme-switch .bi-sun-fill,
:root:not([data-ci-theme="dark"]) .ci-theme-switch .bi-sun-fill{color:var(--ci-text-on-accent)}
[data-ci-theme="dark"] .ci-theme-switch .bi-moon-stars-fill{color:var(--ci-text-on-accent)}
.ci-theme-switch:focus-visible{outline:2px solid var(--ci-focus-ring);outline-offset:2px}
/* offcanvas mobile nav */
.ci-offcanvas{width:min(360px,86vw)}
.ci-offcanvas .offcanvas-header{border-bottom:1px solid var(--ci-border)}
.ci-offcanvas .btn-close{filter:invert(1) grayscale(1) brightness(2)}
.ci-offcanvas .offcanvas-body{display:flex;flex-direction:column;padding:1rem 1.25rem 1.5rem}
.ci-mnav{list-style:none;margin:0;padding:0}
.ci-mnav>li{border-bottom:1px solid var(--ci-border)}
.ci-mnav a,.ci-mnav button{
display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;
padding:.85rem .25rem;background:transparent;border:0;
color:var(--ci-text);font:inherit;font-size:1rem;font-weight:500;text-align:left;
}
.ci-mnav a[aria-current="page"]{color:var(--ci-accent-text);font-weight:600}
.ci-mnav a:hover,.ci-mnav button:hover{color:var(--ci-accent-text);text-decoration:none}
.ci-mnav__sub{list-style:none;margin:0 0 .5rem;padding:0 0 0 .9rem;border-left:2px solid var(--ci-accent)}
.ci-mnav__sub a{padding:.55rem .25rem;font-size:.9rem;color:var(--ci-text-secondary)}
.ci-mnav button i{transition:transform var(--ci-dur) var(--ci-ease);color:var(--ci-accent-text)}
.ci-mnav button[aria-expanded="true"] i{transform:rotate(180deg)}
.ci-offcanvas__footer{margin-top:auto;padding-top:1.5rem;display:grid;gap:.6rem}
.ci-offcanvas__footer .ci-btn{width:100%}
.ci-offcanvas__meta{font-size:.85rem;color:var(--ci-text-secondary);display:grid;gap:.4rem}
.ci-offcanvas__meta a{color:var(--ci-text-secondary)}
.ci-offcanvas__meta a:hover{color:var(--ci-accent-text)}
/* ==========================================================================
09 FOOTER
Below 768px the three link/contact columns collapse into accordions, so
the footer stops being a very long scroll on a phone. From 768px up they
are plain columns again and the toggle buttons are disabled (not
focusable, no chevron). The newsletter sits outside the collapsible body
so it is never hidden behind a closed panel.
========================================================================== */
/* The CTA band directly above the footer is navy too, so without a rule here
the two merge into one very tall slab. */
.ci-footer{
padding-top:clamp(2rem,1.6rem + 1.6vw,3rem);
border-top:1px solid var(--ci-border-strong);
}
.ci-footer a{color:var(--ci-text-secondary)}
.ci-footer a:hover{color:var(--ci-accent-text)}
.ci-footer h2,.ci-footer h3{color:var(--ci-text);font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
.ci-footer__col h2{margin:0}
/* Below 992px the columns stack (or pair up), so they are separated by a rule
above each one. From 992px they sit in a row and are separated by a hairline
in the gutter instead — see the media query below. */
.ci-footer__col{border-top:1px solid var(--ci-border)}
.ci-footer__toggle{
display:flex;align-items:center;justify-content:space-between;gap:.5rem;
width:100%;padding:.85rem 0;
background:transparent;border:0;color:var(--ci-text);
font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
text-align:left;cursor:pointer;
}
.ci-footer__toggle:disabled{color:var(--ci-text);opacity:1;cursor:default}
.ci-footer__toggle i{color:var(--ci-accent-text);font-size:.85rem;transition:transform var(--ci-dur) var(--ci-ease)}
.ci-footer__col.is-open>h2 .ci-footer__toggle i{transform:rotate(180deg)}
.ci-footer__col-body{display:none;padding-bottom:1.1rem}
.ci-footer__col.is-open>.ci-footer__col-body{display:block}
@media (min-width:768px){
.ci-footer__toggle{padding:0 0 .9rem}
.ci-footer__toggle i{display:none}
.ci-footer__col-body{display:block;padding-bottom:0}
}
@media (min-width:992px){
.ci-footer__col{border-top:0}
/* Bootstrap columns carry half the gutter as padding, so a left border on
every cell after the first lands centred in the gap between columns. */
.ci-footer__cell + .ci-footer__cell{border-left:1px solid var(--ci-border-strong)}
}
.ci-footer__blurb{color:var(--ci-text-secondary);font-size:.88rem;line-height:1.6;max-width:38ch;margin-bottom:.5rem}
.ci-footer__blurb--lead{color:var(--ci-text);font-weight:600}
.ci-footer__tagline{color:var(--ci-accent-text);font-weight:600;font-size:.9rem;letter-spacing:.04em}
.ci-footer__list{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.92rem}
.ci-footer__list a{display:inline-flex;align-items:center;gap:.45rem}
.ci-footer__list i{color:var(--ci-accent-text);font-size:.8rem}
.ci-footer__contact{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.9rem;color:var(--ci-text-secondary)}
.ci-footer__contact li{display:flex;gap:.6rem}
.ci-footer__contact i{color:var(--ci-accent-text);margin-top:.25rem}
.ci-social{display:flex;gap:.5rem;margin-top:.9rem}
.ci-social a{
display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
border:1px solid var(--ci-border-control);border-radius:var(--ci-radius-pill);color:var(--ci-text);font-size:1rem;
}
.ci-social a:hover{background:var(--ci-accent);border-color:var(--ci-accent);color:var(--ci-text-on-accent)}
.ci-newsletter{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--ci-border)}
.ci-newsletter .ci-field-row{display:flex;gap:.5rem;flex-wrap:wrap}
.ci-newsletter input{flex:1 1 180px;min-height:48px}
.ci-footer__bottom{
margin-top:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
border-top:1px solid var(--ci-border-strong);
padding-block:.9rem;
font-size:.85rem;color:var(--ci-text-secondary);
display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;justify-content:space-between;
}
.ci-footer__bottom nav{display:flex;gap:1rem;flex-wrap:wrap}
/* The back-to-top and WhatsApp floats are fixed to the viewport's right edge.
The container is centred and capped at 1220px, so below roughly 1300px its
right edge reaches under them and they cover whatever ends this bar. Reserve
their width rather than letting them sit on top of the credit. */
@media (max-width:1299.98px){.ci-footer__bottom{padding-right:calc(48px + 1.25rem)}}
/* Agency credit. --ci-teal rather than a role token is deliberate and is the
one place §01's "component CSS must never touch the brand scale" rule is
waived: this is SHOMVABONA's own mark colour (#249B9C), specified exactly,
not a role that should shift with the theme. It measures 5.43:1 on the navy
footer, so it clears AA without needing the lighter teal-300 the rest of the
dark chrome uses. */
.ci-footer__credit{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.ci-footer__credit-heart{color:var(--ci-teal);font-size:1.05em;line-height:1}
.ci-footer__credit-name{color:var(--ci-teal);font-weight:700;letter-spacing:.04em}
/* ==========================================================================
10 HEROES
========================================================================== */
.ci-hero{position:relative;overflow:hidden}
/* No z-index here on purpose. `position:absolute` + `z-index:0` would make the
slider a stacking context, which traps .carousel-indicators (z-index:3)
inside it at the slider's own level — underneath .ci-hero__inner and
.ci-hero__cards (both z-index:2). The indicators then render on top of the
photo but sit beneath the hero copy, so clicking a slide dot did nothing.
With z-index auto the slider no longer forms a context: .ci-hero__media
(z-index:0) still paints behind the copy, and the indicators reach z-index 3
in .ci-hero's context, above it. */
.ci-hero__slider{position:absolute;inset:0}
.ci-hero__slider,.ci-hero__slider .carousel-inner,.ci-hero__slider .carousel-item{height:100%}
.ci-hero__media{position:absolute;inset:0;z-index:0}
.ci-hero__media img{width:100%;height:100%;object-fit:cover;filter:var(--ci-hero-filter)}
.ci-hero__media::after{content:"";position:absolute;inset:0;background:var(--ci-overlay)}
.ci-hero__wash{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(120% 90% at 12% 8%,var(--ci-wash-accent),transparent 60%);
}
.ci-hero__inner{position:relative;z-index:2;padding-block:clamp(6rem,4rem + 12vw,10.5rem)}
.ci-hero--over .ci-hero__inner{padding-top:calc(clamp(5rem,3.5rem + 10vw,9rem) + var(--ci-header-h) + var(--ci-utility-h))}
.ci-hero h1{max-width:20ch}
.ci-hero__lead{color:var(--ci-text-secondary);max-width:62ch;font-size:1.06rem}
.ci-hero__chips{margin-top:1.75rem}
.ci-hero__cards{position:relative;z-index:2;margin-top:-2.5rem;padding-bottom:var(--ci-section-y)}
.ci-hero-page{background:var(--ci-surface-2);border-bottom:1px solid var(--ci-border);position:relative;overflow:hidden}
.ci-hero-page::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(90% 120% at 88% -10%,var(--ci-accent-soft),transparent 62%);
}
.ci-hero-page__inner{position:relative;padding-block:clamp(2.25rem,1.75rem + 3vw,3.75rem)}
.ci-hero-page h1{max-width:26ch;margin-bottom:.75rem}
.ci-hero-page .ci-lead{margin-bottom:0}
.ci-hero-page .ci-btn-row{margin-top:1.75rem}
/* ==========================================================================
11 SECTION HEAD (eyebrow / title / lead)
========================================================================== */
.ci-eyebrow{
display:inline-flex;align-items:center;gap:.6rem;
color:var(--ci-accent-text);
font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
margin-bottom:.85rem;
}
.ci-eyebrow::before{content:"";width:24px;height:3px;border-radius:2px;background:var(--ci-accent);flex:0 0 24px}
html[data-ci-page-lang="bn"] .ci-eyebrow{letter-spacing:.06em;text-transform:none;font-size:.8rem}
.ci-section-head{max-width:72ch;margin-bottom:clamp(2rem,1.5rem + 1.5vw,3rem)}
.ci-section-head--center{margin-inline:auto;text-align:center}
.ci-section-head--center .ci-lead{margin-inline:auto}
.ci-section-head--split{max-width:none;display:grid;gap:1.25rem}
@media (min-width:992px){
.ci-section-head--split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end;gap:2.5rem}
.ci-section-head--split .ci-lead{margin-bottom:0}
}
.ci-section-head .ci-title{margin-bottom:.75rem}
/* ==========================================================================
12 STAT COUNTER
========================================================================== */
.ci-stats{display:grid;gap:1.25rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:992px){.ci-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ci-stat{
background:var(--ci-surface);border:1px solid var(--ci-border);border-top:3px solid var(--ci-accent);
border-radius:var(--ci-radius-lg);padding:1.5rem 1.35rem;box-shadow:var(--ci-shadow-card);
}
.ci-stat__value{
display:flex;align-items:baseline;gap:.1rem;
font-size:clamp(2rem,1.5rem + 2vw,2.7rem);font-weight:700;line-height:1;
color:var(--ci-text);letter-spacing:-.02em;
}
.ci-stat__suffix{color:var(--ci-accent-text);font-size:.7em}
.ci-stat__label{margin:.6rem 0 .35rem;font-weight:600;font-size:.98rem;color:var(--ci-text)}
.ci-stat__note{margin:0;font-size:.85rem;color:var(--ci-text-muted)}
/* ==========================================================================
13 FEATURE CARD, ICON LIST, CHIPS
========================================================================== */
.ci-card{
position:relative;height:100%;
display:flex;flex-direction:column;
background:var(--ci-surface);
border:1px solid var(--ci-border);
border-radius:var(--ci-radius-lg);
padding:1.6rem 1.5rem;
box-shadow:var(--ci-shadow-card);
transition:transform var(--ci-dur) var(--ci-ease),border-color var(--ci-dur) var(--ci-ease),
background var(--ci-dur) var(--ci-ease),box-shadow var(--ci-dur) var(--ci-ease);
}
.ci-card::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--ci-highlight);border-radius:inherit}
.ci-card:hover,.ci-card:focus-within{
transform:translateY(var(--ci-card-lift));
border-color:var(--ci-border-accent);
background:var(--ci-surface-hover);
box-shadow:var(--ci-shadow-card-hover);
}
.ci-card h3{margin-bottom:.5rem}
.ci-card p{color:var(--ci-text-muted);font-size:.94rem;margin-bottom:0}
.ci-card p+ *{margin-top:1rem}
.ci-card__eyebrow{
display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--ci-accent-text);margin-bottom:.5rem;
}
.ci-card__foot{margin-top:auto;padding-top:1.25rem}
.ci-card--flat{box-shadow:none;background:transparent}
.ci-card--accent{background:var(--ci-surface-accent);border-color:var(--ci-border-accent)}
.ci-card--link:hover{cursor:pointer}
.ci-card__link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.ci-card__link span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ci-icon{
display:inline-flex;align-items:center;justify-content:center;
width:52px;height:52px;margin-bottom:1.1rem;
border-radius:var(--ci-radius);
background:var(--ci-accent-soft);color:var(--ci-accent-on-soft);
font-size:1.5rem;flex:0 0 auto;
}
.ci-icon--sm{width:40px;height:40px;font-size:1.15rem;border-radius:var(--ci-radius-sm);margin-bottom:0}
/* Stand-in where a concern has no genuine logo yet. Same box as .ci-logo-slot
so the cards still line up, and the same theme-independent white tile — which
is why the ink is fixed navy rather than a role token, exactly as the logo
tile itself is (see §02, "adaptive media treatments"). */
.ci-icon--mark{
width:170px;height:96px;flex:0 0 auto;margin-bottom:0;
border-radius:var(--ci-radius);
background:var(--ci-logo-tile-bg);
border:1px solid var(--ci-logo-tile-border);
color:var(--ci-navy);font-size:2rem;
}
.ci-icon--solid{background:var(--ci-accent);color:var(--ci-text-on-accent)}
.ci-checks{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.ci-checks li{position:relative;padding-left:1.9rem;font-size:.93rem;color:var(--ci-text-secondary)}
.ci-checks li::before{
content:"\F26E";font-family:bootstrap-icons!important;
position:absolute;left:0;top:.05rem;
color:var(--ci-accent-text);font-size:1.05rem;line-height:1.4;
}
.ci-checks--tight li{font-size:.9rem}
.ci-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.ci-chip{
display:inline-flex;align-items:center;gap:.35rem;
padding:.32rem .8rem;border-radius:var(--ci-radius-pill);
background:var(--ci-accent-soft);color:var(--ci-accent-on-soft);
border:1px solid transparent;
font-size:.78rem;font-weight:600;line-height:1.5;
}
.ci-chip--outline{background:transparent;border-color:var(--ci-border-control);color:var(--ci-text-secondary)}
.ci-chip--solid{background:var(--ci-accent);color:var(--ci-text-on-accent)}
.ci-hero .ci-chip{background:var(--ci-scrim-fill);color:var(--ci-text);border-color:var(--ci-scrim-hairline)}
.ci-quote{
position:relative;padding-left:1.5rem;margin:0;
border-left:3px solid var(--ci-accent);
font-size:1.08rem;line-height:1.7;color:var(--ci-text-secondary);
}
.ci-quote p:last-child{margin-bottom:0}
.ci-quote cite{display:block;margin-top:.9rem;font-style:normal;font-weight:600;color:var(--ci-text);font-size:.95rem}
.ci-media{border-radius:var(--ci-radius-lg);overflow:hidden;border:1px solid var(--ci-border);background:var(--ci-surface-2)}
.ci-media img{display:block;width:100%;height:100%;object-fit:cover}
.ci-portrait{aspect-ratio:4/5;max-width:340px}
/* Captioned photograph used on the brand, service, concern and product pages.
No fixed aspect ratio: the source's own shape decides, so a 4:1 banner and a
4:3 photo can both sit in the same slot without being cropped twice. */
.ci-media--figure{margin:0}
.ci-media--figure img{width:100%;height:auto;display:block}
.ci-media--figure figcaption{
padding:.9rem 1.15rem;font-size:.88rem;color:var(--ci-text-muted);
background:var(--ci-surface);border-top:1px solid var(--ci-border);
}
/* Band: one consistent height whatever the source ratio, so a 4:1 banner and a
2:1 product shot read as the same component instead of two different blocks.
A source already shorter than the cap is simply left alone. */
.ci-media--band{margin-bottom:clamp(2rem,1.5rem + 1.5vw,3rem)}
.ci-media--band img{max-height:clamp(200px,14vw + 90px,380px);object-fit:cover;object-position:center}
.ci-info-list{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.ci-info-list li{display:flex;gap:.9rem}
.ci-info-list__label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ci-text-muted);margin-bottom:.2rem}
.ci-info-list a{color:var(--ci-text);font-weight:500}
.ci-info-list a:hover{color:var(--ci-accent-text)}
/* Cross-link list — "where this leads" on the service detail pages. Two
columns once there is room, because three or four links in one column
leaves a lot of empty measure beside them. */
.ci-link-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
@media (min-width:576px){.ci-link-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.15rem 1.5rem}}
.ci-link-list a{
display:flex;align-items:center;gap:.6rem;
padding:.7rem .25rem;border-bottom:1px solid var(--ci-border);
color:var(--ci-text);font-weight:500;font-size:.95rem;
}
.ci-link-list a:hover{color:var(--ci-accent-text);text-decoration:none}
.ci-link-list i{color:var(--ci-accent-text);font-size:.8rem;transition:transform var(--ci-dur) var(--ci-ease)}
.ci-link-list a:hover i{transform:translateX(3px)}
/* ==========================================================================
14 PROCESS STEPS (4-step numbered timeline)
========================================================================== */
.ci-process{display:grid;gap:1.5rem;counter-reset:ci-step}
@media (min-width:768px){.ci-process{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:992px){.ci-process{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}}
.ci-step{position:relative;counter-increment:ci-step;padding-top:2.6rem}
.ci-step::before{
content:counter(ci-step,decimal-leading-zero);
position:absolute;top:0;left:0;
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border-radius:var(--ci-radius-pill);
background:var(--ci-accent);color:var(--ci-text-on-accent);
font-size:.9rem;font-weight:700;
}
.ci-step::after{
content:"";position:absolute;top:21px;left:52px;right:-1.25rem;height:2px;
background:linear-gradient(90deg,var(--ci-border-accent),transparent);
}
.ci-step:last-child::after{display:none}
@media (max-width:991.98px){.ci-step::after{display:none}}
.ci-step h3{font-size:1.05rem;margin-bottom:.4rem}
.ci-step p{color:var(--ci-text-muted);font-size:.9rem;margin:0}
/* ==========================================================================
15 LOGO MARQUEE + LOGO GRID
========================================================================== */
.ci-marquee{position:relative;overflow:hidden;padding-block:.5rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)/* mask alpha, not a design colour */}
.ci-marquee__track{display:flex;width:max-content;gap:1rem;animation:ci-marquee 42s linear infinite}
.ci-marquee:hover .ci-marquee__track,
.ci-marquee:focus-within .ci-marquee__track{animation-play-state:paused}
@keyframes ci-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ci-logo-slot{
display:flex;align-items:center;justify-content:center;
width:170px;height:96px;flex:0 0 170px;padding:1rem;
background:var(--ci-logo-tile-bg);
border:1px solid var(--ci-logo-tile-border);
border-radius:var(--ci-radius);
}
.ci-logo-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:576px){.ci-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:992px){.ci-logo-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ci-logo-grid .ci-logo-slot{width:auto;flex:1 1 auto}
.ci-logo--adaptive{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* single-colour marks that really are transparent (the three brand logos):
navy on light, lifted to a white silhouette on dark. */
.ci-logo--mono{
max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
filter:var(--ci-logo-mono-filter);
opacity:var(--ci-logo-mono-opacity);
transition:opacity var(--ci-dur) var(--ci-ease),filter var(--ci-dur) var(--ci-ease);
}
.ci-logo-slot:hover .ci-logo--mono,
.ci-brand-card:hover .ci-logo--mono,
.ci-card:hover .ci-logo--mono{opacity:1}
/* ==========================================================================
16 BRAND CARD
========================================================================== */
.ci-brand-card{
position:relative;height:100%;display:flex;flex-direction:column;
background:var(--ci-surface);border:1px solid var(--ci-border);border-radius:var(--ci-radius-lg);
padding:1.75rem 1.6rem;box-shadow:var(--ci-shadow-card);overflow:hidden;
transition:transform var(--ci-dur) var(--ci-ease),border-color var(--ci-dur) var(--ci-ease),background var(--ci-dur) var(--ci-ease);
}
.ci-brand-card:hover{transform:translateY(var(--ci-card-lift));border-color:var(--ci-border-accent);background:var(--ci-surface-hover)}
.ci-brand-card__mark{
display:flex;align-items:center;justify-content:flex-start;
height:56px;margin-bottom:1.25rem;
}
.ci-brand-card__mark img{max-height:56px;width:auto;object-fit:contain}
.ci-brand-card__badge{
position:absolute;top:1.1rem;right:1.1rem;
display:inline-flex;align-items:center;gap:.3rem;
padding:.25rem .7rem;border-radius:var(--ci-radius-pill);
background:var(--ci-warning-soft);color:var(--ci-warning);border:1px solid var(--ci-warning);
font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.ci-brand-card p{color:var(--ci-text-muted);font-size:.94rem}
/* ==========================================================================
17 CASE CARD (projects)
========================================================================== */
.ci-case{
height:100%;display:flex;flex-direction:column;overflow:hidden;
background:var(--ci-surface);border:1px solid var(--ci-border);border-radius:var(--ci-radius-lg);
box-shadow:var(--ci-shadow-card);
transition:transform var(--ci-dur) var(--ci-ease),border-color var(--ci-dur) var(--ci-ease),background var(--ci-dur) var(--ci-ease);
}
.ci-case:hover{transform:translateY(var(--ci-card-lift));border-color:var(--ci-border-accent);background:var(--ci-surface-hover)}
.ci-case__media{position:relative;aspect-ratio:16/10;background:var(--ci-surface-3);overflow:hidden}
.ci-case__media img{width:100%;height:100%;object-fit:cover;filter:var(--ci-hero-filter)}
.ci-case__body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.ci-case__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.ci-case__body h3{font-size:1.15rem}
.ci-case__body p{color:var(--ci-text-muted);font-size:.93rem;margin-bottom:0}
/* ==========================================================================
18 ACCORDION FAQ
========================================================================== */
.ci-accordion .accordion-item{
background:var(--ci-surface);border:1px solid var(--ci-border);
border-radius:var(--ci-radius)!important;margin-bottom:.75rem;overflow:hidden;
}
.ci-accordion .accordion-button{
background:var(--ci-surface);color:var(--ci-text);
font-weight:600;font-size:1rem;padding:1.1rem 1.35rem;box-shadow:none;
}
.ci-accordion .accordion-button:not(.collapsed){background:var(--ci-accent-soft);color:var(--ci-text)}
.ci-accordion .accordion-button::after{
--bs-accordion-btn-icon:none;
content:"\F282";font-family:bootstrap-icons!important;
background-image:none;width:auto;height:auto;
color:var(--ci-accent-text);font-size:.9rem;
}
.ci-accordion .accordion-body{color:var(--ci-text-muted);font-size:.94rem;padding:0 1.35rem 1.25rem}
/* ==========================================================================
19 CTA BAND
========================================================================== */
.ci-cta{border-radius:0;padding-block:clamp(2.75rem,2rem + 3vw,4rem);position:relative;overflow:hidden}
.ci-cta::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(70% 120% at 85% 20%,var(--ci-wash-cta),transparent 60%);
}
.ci-cta__inner{position:relative;display:grid;gap:1.5rem;align-items:center}
@media (min-width:992px){.ci-cta__inner{grid-template-columns:minmax(0,1.4fr) auto;gap:2.5rem}}
.ci-cta h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.25rem);margin-bottom:.5rem;max-width:34ch}
.ci-cta p{color:var(--ci-text-secondary);margin:0;max-width:60ch}
/* ==========================================================================
20 BACK TO TOP, WHATSAPP FLOAT
========================================================================== */
.ci-to-top,.ci-whatsapp{
position:fixed;right:1rem;z-index:1040;
display:inline-flex;align-items:center;justify-content:center;
width:48px;height:48px;border-radius:var(--ci-radius-pill);
border:1px solid var(--ci-border-control);
background:var(--ci-surface);color:var(--ci-text);
box-shadow:var(--ci-shadow-sm);font-size:1.2rem;
transition:opacity var(--ci-dur) var(--ci-ease),transform var(--ci-dur) var(--ci-ease),background var(--ci-dur) var(--ci-ease);
}
.ci-to-top{bottom:1rem;opacity:0;visibility:hidden;transform:translateY(10px);cursor:pointer}
.ci-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.ci-to-top:hover{background:var(--ci-accent);color:var(--ci-text-on-accent);border-color:var(--ci-accent)}
.ci-whatsapp{bottom:4.5rem;background:var(--ci-accent);color:var(--ci-text-on-accent);border-color:var(--ci-accent)}
.ci-whatsapp:hover{background:var(--ci-accent-hover);color:var(--ci-text-on-accent-hover);border-color:var(--ci-accent-hover)}
@media (min-width:768px){
.ci-to-top,.ci-whatsapp{right:1.5rem}
.ci-to-top{bottom:1.5rem}
.ci-whatsapp{bottom:5rem}
}
/* ==========================================================================
21 FORMS — floating labels, validation, file upload, progress
========================================================================== */
.ci-form-card{
background:var(--ci-surface);border:1px solid var(--ci-border);
border-radius:var(--ci-radius-lg);padding:clamp(1.5rem,1.2rem + 1vw,2.25rem);
box-shadow:var(--ci-shadow-card);
}
.form-control,.form-select,.ci-input{
min-height:52px;
background-color:var(--ci-surface);
color:var(--ci-text);
border:1px solid var(--ci-border-control);
border-radius:var(--ci-radius-sm);
font-family:inherit;font-size:.95rem;
transition:border-color var(--ci-dur) var(--ci-ease),box-shadow var(--ci-dur) var(--ci-ease),background var(--ci-dur) var(--ci-ease);
}
textarea.form-control{min-height:130px}
textarea.ci-message--tall{min-height:170px}
.form-control::placeholder{color:var(--ci-text-muted);opacity:1}
.form-control:focus,.form-select:focus{
background-color:var(--ci-surface);
color:var(--ci-text);
border-color:var(--ci-accent);
box-shadow:0 0 0 3px var(--ci-focus);
}
.form-control:disabled,.form-control[readonly],.form-select:disabled{background-color:var(--ci-surface-3);color:var(--ci-text-muted);opacity:1}
.form-select{background-image:none;padding-right:2.75rem}
.ci-select-wrap{position:relative}
.ci-select-wrap::after{
content:"\F282";font-family:bootstrap-icons!important;
position:absolute;right:1rem;top:50%;transform:translateY(-50%);
color:var(--ci-accent-text);font-size:.8rem;pointer-events:none;
}
.form-label,.ci-label{font-size:.85rem;font-weight:600;color:var(--ci-text-secondary);margin-bottom:.35rem}
.form-floating>label{color:var(--ci-text-muted);padding-left:.9rem}
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label{color:var(--ci-text-muted);opacity:1;background:transparent}
.form-floating>.form-control,.form-floating>.form-select{padding-left:.9rem}
.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.7rem;padding-bottom:.4rem}
.form-check-input{
width:1.15em;height:1.15em;margin-top:.2em;
background-color:var(--ci-surface);border:1px solid var(--ci-border-control);
}
.form-check-input:checked{background-color:var(--ci-accent);border-color:var(--ci-accent)}
.form-check-input:focus{border-color:var(--ci-accent);box-shadow:0 0 0 3px var(--ci-focus)}
.form-check-label{font-size:.9rem;color:var(--ci-text-secondary)}
.ci-field{position:relative}
.ci-char-count{font-size:.8rem;color:var(--ci-text-muted);margin-top:.3rem}
.ci-form-note{font-size:.85rem;color:var(--ci-text-muted)}
.ci-hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* validation states — colour is always paired with an icon */
.form-control.is-invalid,.form-select.is-invalid,.form-check-input.is-invalid{
border-color:var(--ci-danger);background-image:none;
}
.form-control.is-invalid:focus,.form-select.is-invalid:focus{box-shadow:0 0 0 3px var(--ci-danger-soft);border-color:var(--ci-danger)}
.form-control.is-valid,.form-select.is-valid{border-color:var(--ci-success);background-image:none}
.form-control.is-valid:focus,.form-select.is-valid:focus{box-shadow:0 0 0 3px var(--ci-success-soft);border-color:var(--ci-success)}
.invalid-feedback,.ci-error{
display:block;width:100%;margin-top:.4rem;
color:var(--ci-danger);font-size:.83rem;font-weight:500;
}
.invalid-feedback::before{content:"\F33A";font-family:bootstrap-icons!important;margin-right:.35rem}
.valid-feedback{color:var(--ci-success);font-size:.83rem}
.valid-feedback::before{content:"\F26B";font-family:bootstrap-icons!important;margin-right:.35rem}
/* file upload / drop zone */
.ci-drop{
position:relative;display:block;
border:1.5px dashed var(--ci-border-control);border-radius:var(--ci-radius);
background:var(--ci-surface-2);padding:1.4rem 1.25rem;text-align:center;cursor:pointer;
transition:border-color var(--ci-dur) var(--ci-ease),background var(--ci-dur) var(--ci-ease);
}
.ci-drop:hover,.ci-drop.is-dragover{border-color:var(--ci-accent);background:var(--ci-accent-soft)}
.ci-drop.is-invalid{border-color:var(--ci-danger)}
.ci-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ci-drop__icon{font-size:1.6rem;color:var(--ci-accent-text);display:block;margin-bottom:.4rem}
.ci-drop__title{font-weight:600;font-size:.95rem;color:var(--ci-text)}
.ci-drop__hint{font-size:.82rem;color:var(--ci-text-muted);margin:0}
.ci-filepick{
display:flex;align-items:center;gap:.75rem;margin-top:.75rem;
background:var(--ci-surface);border:1px solid var(--ci-border);border-radius:var(--ci-radius-sm);
padding:.6rem .75rem;font-size:.87rem;
}
.ci-filepick__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ci-text)}
.ci-filepick__size{color:var(--ci-text-muted);font-size:.8rem;flex:0 0 auto}
.ci-filepick__remove{
flex:0 0 auto;width:32px;height:32px;border-radius:var(--ci-radius-pill);
border:1px solid var(--ci-border-control);background:transparent;color:var(--ci-text);
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.ci-filepick__remove:hover{border-color:var(--ci-danger);color:var(--ci-danger)}
.ci-thumb{width:56px;height:56px;border-radius:var(--ci-radius-sm);object-fit:cover;border:1px solid var(--ci-border);flex:0 0 auto}
.ci-progress{height:8px;border-radius:var(--ci-radius-pill);background:var(--ci-surface-3);overflow:hidden;margin-top:.85rem}
.ci-progress__bar{height:100%;width:0;background:var(--ci-accent);transition:width .2s linear}
/* ==========================================================================
22 ALERTS, BADGES, TOASTS, MODAL, TABLE, PAGINATION
========================================================================== */
.ci-alert{
display:flex;align-items:flex-start;gap:.75rem;
padding:.9rem 1rem;border-radius:var(--ci-radius-sm);
border:1px solid currentColor;font-size:.92rem;margin-bottom:1rem;
}
.ci-alert i{flex:0 0 auto;font-size:1.1rem;line-height:1.4}
.ci-alert__body{flex:1;min-width:0;color:var(--ci-text)}
.ci-alert__body strong{display:block;margin-bottom:.15rem}
.ci-alert--success{color:var(--ci-success);background:var(--ci-success-soft)}
.ci-alert--danger{color:var(--ci-danger);background:var(--ci-danger-soft)}
.ci-alert--warning{color:var(--ci-warning);background:var(--ci-warning-soft)}
.ci-alert--info{color:var(--ci-info);background:var(--ci-info-soft)}
.ci-alert .btn-close{margin-left:auto;flex:0 0 auto;filter:none;opacity:.7}
[data-ci-theme="dark"] .ci-alert .btn-close{filter:invert(1) grayscale(1) brightness(2)}
.ci-badge{
display:inline-flex;align-items:center;gap:.3rem;
padding:.2rem .6rem;border-radius:var(--ci-radius-pill);
font-size:.72rem;font-weight:700;letter-spacing:.04em;
border:1px solid currentColor;
}
.ci-badge--success{color:var(--ci-success);background:var(--ci-success-soft)}
.ci-badge--warning{color:var(--ci-warning);background:var(--ci-warning-soft)}
.ci-badge--danger{color:var(--ci-danger);background:var(--ci-danger-soft)}
.ci-badge--info{color:var(--ci-info);background:var(--ci-info-soft)}
.ci-badge--accent{color:var(--ci-accent-on-soft);background:var(--ci-accent-soft);border-color:transparent}
.modal-content{background:var(--ci-surface);color:var(--ci-text);border:1px solid var(--ci-border);border-radius:var(--ci-radius-lg)}
.modal-header,.modal-footer{border-color:var(--ci-border)}
.modal-backdrop{--bs-backdrop-bg:var(--ci-overlay);--bs-backdrop-opacity:1}
[data-ci-theme="dark"] .btn-close{filter:invert(1) grayscale(1) brightness(2)}
.dropdown-menu{--bs-dropdown-bg:var(--ci-surface);--bs-dropdown-color:var(--ci-text);--bs-dropdown-border-color:var(--ci-border);--bs-dropdown-link-color:var(--ci-text);--bs-dropdown-link-hover-bg:var(--ci-accent-soft);--bs-dropdown-link-hover-color:var(--ci-accent-text)}
.table{--bs-table-bg:transparent;--bs-table-color:var(--ci-text);--bs-table-border-color:var(--ci-border);--bs-table-striped-bg:var(--ci-surface-2);--bs-table-striped-color:var(--ci-text)}
.pagination{--bs-pagination-bg:var(--ci-surface);--bs-pagination-color:var(--ci-text);--bs-pagination-border-color:var(--ci-border);--bs-pagination-hover-bg:var(--ci-accent-soft);--bs-pagination-hover-color:var(--ci-accent-text);--bs-pagination-active-bg:var(--ci-accent);--bs-pagination-active-border-color:var(--ci-accent);--bs-pagination-active-color:var(--ci-text-on-accent)}
.toast{background:var(--ci-surface);color:var(--ci-text);border:1px solid var(--ci-border)}
.offcanvas{--bs-offcanvas-bg:var(--ci-surface);--bs-offcanvas-color:var(--ci-text);--bs-offcanvas-border-color:var(--ci-border)}
.ci-map{
position:relative;border-radius:var(--ci-radius-lg);overflow:hidden;
border:1px solid var(--ci-border);background:var(--ci-surface-2);
}
.ci-map iframe{display:block;width:100%;border:0;filter:var(--ci-map-filter)}
/* ==========================================================================
23 BREADCRUMB
========================================================================== */
.ci-breadcrumb{margin-bottom:1.1rem}
.ci-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;list-style:none;margin:0;padding:0;font-size:.84rem}
.ci-breadcrumb li{display:inline-flex;align-items:center;gap:.4rem;color:var(--ci-text-muted)}
.ci-breadcrumb li+li::before{content:"\F285";font-family:bootstrap-icons!important;font-size:.7rem;color:var(--ci-text-muted)}
.ci-breadcrumb a{color:var(--ci-text-muted)}
.ci-breadcrumb a:hover{color:var(--ci-accent-text)}
.ci-breadcrumb [aria-current="page"]{color:var(--ci-text);font-weight:600}
/* ==========================================================================
24 JOB LIST (careers)
========================================================================== */
.ci-jobs__toolbar{
display:grid;gap:.75rem;margin-bottom:1.5rem;
background:var(--ci-surface);border:1px solid var(--ci-border);
border-radius:var(--ci-radius);padding:1rem;
}
@media (min-width:768px){.ci-jobs__toolbar{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;align-items:end}}
.ci-job{
display:grid;gap:1rem;align-items:start;
background:var(--ci-surface);border:1px solid var(--ci-border);border-radius:var(--ci-radius-lg);
padding:1.4rem 1.5rem;margin-bottom:1rem;
transition:border-color var(--ci-dur) var(--ci-ease),background var(--ci-dur) var(--ci-ease);
}
@media (min-width:768px){.ci-job{grid-template-columns:minmax(0,1fr) auto}}
.ci-job:hover{border-color:var(--ci-border-accent);background:var(--ci-surface-hover)}
.ci-job h3{font-size:1.12rem;margin-bottom:.5rem}
.ci-job__meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.83rem;color:var(--ci-text-muted);margin-bottom:.6rem}
.ci-job__meta span{display:inline-flex;align-items:center;gap:.35rem}
.ci-job__meta i{color:var(--ci-accent-text)}
.ci-job p{color:var(--ci-text-muted);font-size:.92rem;margin:0}
.ci-job__action{display:flex;align-items:center}
.ci-jobs__empty{
padding:2.5rem 1.5rem;text-align:center;color:var(--ci-text-muted);
border:1px dashed var(--ci-border-strong);border-radius:var(--ci-radius-lg);
}
.ci-jobs__skeleton{
height:118px;border-radius:var(--ci-radius-lg);margin-bottom:1rem;
background:var(--ci-surface-2);border:1px solid var(--ci-border);
animation:ci-pulse 1.4s var(--ci-ease) infinite;
}
@keyframes ci-pulse{0%,100%{opacity:1}50%{opacity:.55}}
/* ==========================================================================
24b DETAIL PAGES: stretched card links, zoomable media
========================================================================== */
/* One link covers the whole card. The heading keeps the accessible name, so
the card stays a single tab stop instead of two. */
.ci-stretch{color:inherit;text-decoration:none}
.ci-stretch::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.ci-stretch:hover,.ci-stretch:focus-visible{color:var(--ci-accent-text)}
.ci-case--link,.ci-album{position:relative}
.ci-case--link .ci-stretch:focus-visible::after{outline:2px solid var(--ci-focus-ring);outline-offset:4px}
.ci-case__more,.ci-album__more{
margin-top:auto;padding-top:1.1rem;
display:inline-flex;align-items:center;gap:.4rem;
font-size:.85rem;font-weight:600;color:var(--ci-accent-text);
}
.ci-case__more i,.ci-album__more i{transition:transform var(--ci-dur) var(--ci-ease)}
.ci-case--link:hover .ci-case__more i,.ci-album:hover .ci-album__more i{transform:translateX(4px)}
.ci-card__foot--split{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.ci-inline-link{
display:inline-flex;align-items:center;gap:.35rem;
font-size:.85rem;font-weight:600;color:var(--ci-text-muted);
}
.ci-inline-link:hover{color:var(--ci-accent-text)}
/* Project photo: the whole frame is the lightbox trigger. */
.ci-media--zoom{padding:0;background:var(--ci-surface-3)}
.ci-media__btn{
display:block;position:relative;width:100%;padding:0;border:0;background:none;
cursor:zoom-in;border-radius:inherit;overflow:hidden;
}
.ci-media__btn img{display:block;width:100%;height:auto;transition:transform .6s var(--ci-ease)}
.ci-media__btn:hover img{transform:scale(1.03)}
.ci-media__zoom{
position:absolute;left:1rem;bottom:1rem;
display:inline-flex;align-items:center;gap:.45rem;
padding:.4rem .85rem;border-radius:var(--ci-radius-pill);
background:var(--ci-overlay-strong);color:var(--ci-white);
border:1px solid var(--ci-scrim-border);
font-size:.78rem;font-weight:600;
}
.ci-media--zoom figcaption{padding:.9rem 1.1rem;font-size:.85rem;color:var(--ci-text-muted)}
/* ==========================================================================
24c GALLERY: section tabs, albums, photo grid, video grid
========================================================================== */
.ci-tabs{
display:flex;flex-wrap:wrap;gap:.5rem;
margin-bottom:clamp(1.75rem,1.25rem + 1.5vw,2.5rem);
padding:.35rem;border:1px solid var(--ci-border);border-radius:var(--ci-radius-pill);
background:var(--ci-surface);width:max-content;max-width:100%;
}
.ci-tabs__link{
display:inline-flex;align-items:center;gap:.5rem;
padding:.55rem 1.15rem;border-radius:var(--ci-radius-pill);
font-size:.9rem;font-weight:600;color:var(--ci-text-secondary);
transition:background var(--ci-dur) var(--ci-ease),color var(--ci-dur) var(--ci-ease);
}
.ci-tabs__link:hover{background:var(--ci-surface-2);color:var(--ci-text)}
.ci-tabs__link.is-active{background:var(--ci-accent);color:var(--ci-text-on-accent)}
.ci-tabs__link.is-active:hover{background:var(--ci-accent-hover);color:var(--ci-text-on-accent-hover)}
.ci-album-grid{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:576px){.ci-album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:992px){.ci-album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}
.ci-album{
height:100%;display:flex;flex-direction:column;overflow:hidden;
background:var(--ci-surface);border:1px solid var(--ci-border);border-radius:var(--ci-radius-lg);
box-shadow:var(--ci-shadow-card);
transition:transform var(--ci-dur) var(--ci-ease),border-color var(--ci-dur) var(--ci-ease),
background var(--ci-dur) var(--ci-ease),box-shadow var(--ci-dur) var(--ci-ease);
}
.ci-album:hover,.ci-album:focus-within{
transform:translateY(var(--ci-card-lift));border-color:var(--ci-border-accent);
background:var(--ci-surface-hover);box-shadow:var(--ci-shadow-card-hover);
}
.ci-album__media{aspect-ratio:4/3;background:var(--ci-surface-3);overflow:hidden}
.ci-album__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ci-ease)}
.ci-album:hover .ci-album__media img{transform:scale(1.04)}
.ci-album__body{padding:1.4rem 1.35rem;display:flex;flex-direction:column;flex:1}
.ci-album__body h3{font-size:1.1rem;margin-bottom:.45rem}
.ci-album__body p{color:var(--ci-text-muted);font-size:.9rem;margin-bottom:0}
.ci-photo-grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.ci-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
@media (min-width:992px){.ci-photo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ci-photo{
position:relative;display:block;padding:0;border:1px solid var(--ci-border);
border-radius:var(--ci-radius);overflow:hidden;background:var(--ci-surface-3);
aspect-ratio:1/1;cursor:zoom-in;
transition:border-color var(--ci-dur) var(--ci-ease),transform var(--ci-dur) var(--ci-ease);
}
.ci-photo:hover{border-color:var(--ci-border-accent);transform:translateY(-3px)}
.ci-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ci-ease)}
.ci-photo:hover img{transform:scale(1.06)}
/* Transparent single-colour brand marks: a white tile and no crop, so a
wordmark is not sliced into a square. */
.ci-photo--contain{background:var(--ci-logo-tile-bg);border-color:var(--ci-logo-tile-border)}
.ci-photo--contain img{object-fit:contain;padding:1.5rem}
.ci-photo--contain:hover img{transform:none}
.ci-photo__zoom{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:var(--ci-overlay);color:var(--ci-white);font-size:1.25rem;
opacity:0;transition:opacity var(--ci-dur) var(--ci-ease);
}
.ci-photo:hover .ci-photo__zoom,.ci-photo:focus-visible .ci-photo__zoom{opacity:1}
.ci-video-grid{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:576px){.ci-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:992px){.ci-video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}
.ci-video{
display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;
background:var(--ci-surface);border:1px solid var(--ci-border);border-radius:var(--ci-radius-lg);
box-shadow:var(--ci-shadow-card);cursor:pointer;
transition:transform var(--ci-dur) var(--ci-ease),border-color var(--ci-dur) var(--ci-ease),
background var(--ci-dur) var(--ci-ease),box-shadow var(--ci-dur) var(--ci-ease);
}
.ci-video:hover{
transform:translateY(var(--ci-card-lift));border-color:var(--ci-border-accent);
background:var(--ci-surface-hover);box-shadow:var(--ci-shadow-card-hover);
}
.ci-video__media{position:relative;display:block;aspect-ratio:16/9;background:var(--ci-surface-3);overflow:hidden}
.ci-video__media img{width:100%;height:100%;object-fit:cover}
.ci-video__play{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,rgba(1,21,47,.12),rgba(1,21,47,.55));
color:var(--ci-white);font-size:1.6rem;
}
.ci-video__play i{
display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;border-radius:50%;
background:var(--ci-accent);color:var(--ci-text-on-accent);
transition:transform var(--ci-dur) var(--ci-ease);
}
.ci-video:hover .ci-video__play i{transform:scale(1.08)}
.ci-video__body{display:flex;flex-direction:column;flex:1;padding:1.35rem}
.ci-video__title{display:block;font-weight:600;font-size:1rem;color:var(--ci-text);line-height:1.45}
.ci-video__more{
margin-top:auto;padding-top:1rem;
display:inline-flex;align-items:center;gap:.4rem;
font-size:.85rem;font-weight:600;color:var(--ci-accent-text);
}
/* ==========================================================================
24d LIGHTBOX + VIDEO DIALOG (native