:root{
    --brand-orange:#C36f09;
    --brand-dark:#303030;
    --brand-light:#e6e6e6;
    --brand-white:#ffffff;
}
body{
    font-family:'Poppins', sans-serif;
    font-size:15px;
    line-height:26px;
    color:var(--brand-dark);
    background:var(--brand-white);
}
p{ margin:0 0 15px; }
h1, h2, h3, h4, h5, h6{
    font-family:'Poppins', sans-serif;
    margin:0 0 15px;
    font-weight:400;
    color:var(--brand-dark);
}
h1{ font-size:48px; line-height:52px; }
h2{ font-size:42px; line-height:46px; }
h3{ font-size:34px; line-height:40px; font-weight:500; }
h4{ font-size:26px; line-height:32px; }
h5{ font-size:20px; line-height:28px; }
h6{ font-size:16px; line-height:26px; }
a{ text-decoration:none; }
.btn-brand{ background:var(--brand-orange); border-color:var(--brand-orange); color:#fff; font-weight:500; border-radius:50px; padding:.65rem 1.6rem; }
.btn-brand:hover{ background:#a95c07; border-color:#a95c07; color:#fff; }
.btn-outline-brand{ border:2px solid var(--brand-orange); color:var(--brand-orange); font-weight:500; border-radius:50px; padding:.6rem 1.5rem; background:transparent; }
.btn-outline-brand:hover{ background:var(--brand-orange); color:#fff; }
.text-brand{ color:var(--brand-orange) !important; }
/* "JES" is always dark #303030, "ilix" is always orange #c36f09 — used wherever
   the brand name is set as text instead of the uploaded logo image. */
.brand-mark{ color:var(--brand-dark); }
.brand-mark span{ color:var(--brand-orange); }
.footer-logo{ max-height:40px; }
.bg-brand{ background:var(--brand-orange) !important; }
.bg-brand-dark{ background:var(--brand-dark) !important; }
.bg-brand-light{ background:var(--brand-light) !important; }
.section-pad{ padding:80px 0; }
.section-tag{ text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700; color:var(--brand-orange); }
.section-title{ font-weight:700; color:var(--brand-dark); }

/* Bootstrap's .small/<small> shrinks body copy to .875em (~14px), which reads
   noticeably denser than the live site's ~16-17px component paragraphs.
   Soften it site-wide for card/body copy while still reading as "smaller". */
.small, small{ font-size:1.0625em; }
.card-text, .service-card p, .product-desc, .blog-excerpt, .cs-feature-card p, .capability-box p{ font-size:1rem; line-height:1.6; }

/* ===== iPhone-style floating navbar =====
   Fixed while scrolling, on every page, as a transparent strip — just the white
   pill floating on top of whatever's beneath it. Inner pages used to give this
   strip its own solid dark fill (a leftover from when the header sat in normal
   document flow); now that it's fixed in place over the page, that fill just
   painted a flat black bar on top of each page's own banner photo/colour,
   producing an ugly two-tone seam. Each inner page's own banner (.plain-banner)
   now reaches all the way to the top of the viewport and pads its own content
   down to clear the pill, the same way the home page's hero already does. */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:1030; padding-top:22px; }
.site-header.is-static{ padding-top:22px; }
/* The spacer element still exists in the markup for inner pages, but nothing
   needs to reserve space in normal flow any more — each page's own top section
   handles its own clearance via padding-top (see .plain-banner, .hero-carousel). */
.site-header-spacer.is-static{ height:0; }
.pill-nav{
    max-width:1280px; margin:0 auto; background:#ffffff;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-radius:50px; padding:10px 10px 10px 22px; display:flex; align-items:center; justify-content:space-between;
    box-shadow:0 8px 30px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06);
}
.pill-nav .brand-logo img{ height:34px; }
.pill-nav .brand-logo{ font-weight:700; color:var(--brand-dark); font-size:1.15rem; }
.pill-nav .brand-logo span{ color:var(--brand-orange); }
.pill-nav-links{ display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0; }
.pill-nav-links li a{
    display:block; color:var(--brand-dark); font-weight:400; font-size:1rem; padding:9px 12px; border-radius:40px; transition:.2s; white-space:nowrap;
}
/* Only hover gets a colour change — the current page no longer keeps a persistent highlight. */
.pill-nav-links li a:hover{ color:var(--brand-dark-2, #303030); background:rgba(48,48,48,.08); }
.pill-nav .pill-cta{ background:var(--brand-dark); color:#fff; font-weight:700; padding:9px 20px; border-radius:40px; font-size:.9rem; white-space:nowrap; transition:.2s; }
.pill-nav .pill-cta:hover{ background:#1c1c1c; color:#fff; }
.pill-nav .navbar-toggler{ border:none; color:var(--brand-dark); font-size:1.4rem; background:transparent; }
@media (max-width: 1199px){
    .pill-nav-links{ display:none; }
}
/* A visible thin border all around the pill so the white nav bar doesn't
   disappear into an inner page's white background (the default border was
   left over from the floating/shadowed version and too faint to read here,
   plus its bottom edge was explicitly turned off). */
.site-header.is-static .pill-nav{ background:#ffffff; margin:0; box-shadow:none; border:1px solid #e3e3e3; }

/* Mobile offcanvas menu */
.mobile-menu .offcanvas-body a{ display:block; padding:.6rem 0; color:var(--brand-dark); font-weight:500; border-bottom:1px solid #eee; }

/* ===== Hero carousel =====
   Redesigned per the second revamp brief: the photo is a panel on the right
   side of the banner only (not a full-bleed background image), so the
   carousel content sits on a plain surface and no longer needs the dark
   gradient scrim that used to make white text readable over a photo. */
.hero-carousel{ background:var(--brand-light); padding-top:150px; padding-bottom:60px; }
.hero-carousel .hero-slide{ min-height:auto; position:relative; }
.hero-carousel .hero-slide-inner{
    position:relative; display:flex; align-items:center; gap:48px; min-height:420px;
}
.hero-carousel .hero-content{ flex:1 1 50%; max-width:600px; color:var(--brand-dark); }
.hero-carousel .hero-content h1{ font-size:3rem; font-weight:700; line-height:1.15; margin-bottom:18px; color:var(--brand-dark); }
.hero-carousel .hero-content p{ font-size:1.0625rem; color:#5c5c5c; margin:18px 0 28px; text-align:justify; }
.hero-carousel .hero-image{ flex:1 1 46%; border-radius:20px; overflow:hidden; min-height:360px; }
.hero-carousel .hero-image img{ width:100%; height:100%; min-height:360px; object-fit:cover; display:block; }
@media (min-width: 992px){
    .hero-carousel .hero-content h1{ font-size:48px; line-height:52px; }
}
@media (max-width: 991px){
    .hero-carousel .hero-slide-inner{ flex-direction:column; }
    .hero-carousel .hero-image{ width:100%; order:-1; }
}
.hero-carousel .carousel-indicators{ position:static; margin-top:24px; }
.hero-carousel .carousel-indicators [data-bs-target]{ width:8px; height:8px; border-radius:50%; background:var(--brand-dark); opacity:.25; }
.hero-carousel .carousel-indicators .active{ opacity:1; background:var(--brand-orange); width:26px; border-radius:6px; }
/* The old arrows only responded near the true edges of the viewport because the
   slide content (a flex row spanning almost the whole width) sat in front of
   them and swallowed the click. Let clicks pass through the empty space of the
   slide and give the arrow buttons their own clear layer above everything. */
.hero-carousel .hero-slide-inner{ pointer-events:none; }
.hero-carousel .hero-content, .hero-carousel .hero-content a, .hero-carousel .hero-image{ pointer-events:auto; }
/* Bootstrap's default carousel-control-prev/next are full-height, 15%-width
   click zones anchored to the left/right of the ENTIRE carousel — since the
   carousel spans both the text column and the image column, the left
   control's hit area sat directly on top of the heading and CTA button,
   blocking clicks on them. Shrink each control down to a small circular
   button pinned to the bottom-right corner (over the image column only, away
   from the text), instead of a full-height strip. */
.hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next{
    top:auto; bottom:24px; left:auto; right:24px;
    width:44px; height:44px; z-index:20; opacity:1;
}
.hero-carousel .carousel-control-prev{ right:78px; }
.hero-carousel .carousel-control-prev-icon, .hero-carousel .carousel-control-next-icon{
    width:44px; height:44px; border-radius:50%; background-color:#fff; background-size:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.15); filter:invert(0);
}
@media (max-width: 991px){
    .hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next{ bottom:12px; }
}
.hero-carousel .carousel-control-prev-icon{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23303030'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); }
.hero-carousel .carousel-control-next-icon{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23303030'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
@media (max-width: 767px){
    .hero-carousel{ padding-top:130px; }
}

/* ===== Services ===== */
.services-strip{ padding:70px 0 20px; }
.service-card{ background:#fff; border-radius:14px; padding:28px 22px; box-shadow:0 10px 30px rgba(0,0,0,.08); height:100%; transition:.25s; border-top:3px solid transparent; }
.service-card:hover{ transform:translateY(-6px); border-top-color:var(--brand-orange); box-shadow:0 16px 34px rgba(0,0,0,.12); }
.service-card .icon{ width:56px; height:56px; border-radius:14px; background:rgba(195,111,9,.12); color:var(--brand-orange); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:16px; }

/* ===== Who we are ===== */
.whoweare-media{ border-radius:18px; overflow:hidden; position:relative; }
.whoweare-media video, .whoweare-media img{ width:100%; height:100%; object-fit:cover; border-radius:18px; }
.whoweare-bullets{ list-style:none; padding:0; margin:20px 0; }
.whoweare-bullets li{ position:relative; padding-left:32px; margin-bottom:12px; font-weight:500; }
.whoweare-bullets li::before{ content:'\f26a'; font-family:'bootstrap-icons'; position:absolute; left:0; top:0; color:var(--brand-orange); font-weight:700; }
.whoweare-text{ text-align:justify; }

/* ===== Why Choose Us ===== */
.why-choose-card{ background:#fff; border-radius:16px; padding:26px 22px; height:100%; box-shadow:0 8px 26px rgba(0,0,0,.05); }
.why-choose-card .num{ font-weight:700; font-size:1.6rem; color:var(--brand-orange); opacity:.5; margin-bottom:8px; }
.why-choose-card h5{ font-weight:700; margin-bottom:10px; }

/* ===== Home case studies strip ===== */
.home-cs-card{ border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 8px 26px rgba(0,0,0,.06); transition:.2s; }
.home-cs-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,.1); }
.home-cs-card img{ width:100%; height:180px; object-fit:cover; }
.home-cs-card .body{ padding:18px 20px; }
.home-cs-card h6{ color:var(--brand-dark); font-weight:400; }

/* ===== Testimonials — swipe-arrow track instead of a fixed grid ===== */
.testimonial-swipe-wrap{ position:relative; }
.testimonial-swipe{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 20px; cursor:grab; user-select:none; }
.testimonial-swipe.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.testimonial-swipe::-webkit-scrollbar{ height:6px; }
.testimonial-swipe::-webkit-scrollbar-thumb{ background:#ddd; border-radius:6px; }
.testimonial-swipe .testimonial-slide{ flex:0 0 100%; scroll-snap-align:start; }
@media (min-width: 768px){ .testimonial-swipe .testimonial-slide{ flex:0 0 calc(50% - 12px); } }
@media (min-width: 992px){ .testimonial-swipe .testimonial-slide{ flex:0 0 calc(33.333% - 16px); } }
.testimonial-swipe-arrow{
    width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid #eee; color:var(--brand-dark);
    display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:0 6px 18px rgba(0,0,0,.08); transition:.2s;
}
.testimonial-swipe-arrow:hover{ background:var(--brand-orange); color:#fff; border-color:var(--brand-orange); }
.testimonial-card{ background:#fff; border:1px solid #eee; border-radius:16px; padding:28px; height:100%; box-shadow:0 8px 26px rgba(0,0,0,.05); }
.testimonial-card .stars{ color:var(--brand-orange); font-size:.95rem; margin-bottom:14px; letter-spacing:2px; }
.testimonial-card .quote{ color:#555; margin-bottom:20px; }
.testimonial-card .person{ display:flex; align-items:center; gap:12px; }
.testimonial-card .person img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.testimonial-card .person .avatar-fallback{ width:48px; height:48px; border-radius:50%; background:var(--brand-light); color:var(--brand-orange); display:flex; align-items:center; justify-content:center; font-weight:700; }
.testimonial-card .person h6{ margin:0; }
.testimonial-card .person span{ font-size:.8rem; color:#888; }

/* ===== Case studies list page ===== */
.cs-banner{ background:var(--brand-dark); min-height:220px; display:flex; align-items:center; position:relative; }
/* The overlapped stats card now sits inside a col-lg-9 column, the same one the
   overview text + image use just below it, so its width always matches theirs
   instead of an arbitrary percentage offset. */
.cs-banner-overlay-wrap{ position:absolute; left:0; right:0; bottom:-46px; z-index:5; }
.cs-banner-overlay{ background:#fff; border-radius:16px; box-shadow:0 20px 45px rgba(0,0,0,.18); padding:22px 26px; display:flex; gap:26px; justify-content:space-between; }
.cs-banner-overlay .stat{ text-align:center; min-width:100px; }
.cs-banner-overlay .stat .icon{ font-size:1.3rem; color:var(--brand-orange); margin-bottom:4px; }
.cs-banner-overlay .stat .val{ font-weight:700; font-size:1.3rem; color:var(--brand-orange); }
.cs-banner-overlay .stat .lbl{ font-size:.74rem; color:#666; }
.cs-two-box .bullet-line{ display:flex; align-items:flex-start; gap:8px; }
.cs-two-box .bullet-line i{ color:var(--brand-orange); font-size:.85rem; margin-top:5px; flex-shrink:0; }
.cs-list{ max-height:560px; overflow-y:auto; border-right:1px solid #eee; padding-right:6px; }
.cs-list::-webkit-scrollbar{ width:6px; }
.cs-list::-webkit-scrollbar-thumb{ background:#ddd; border-radius:6px; }
.cs-list a{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:10px; color:var(--brand-dark); font-weight:500; margin-bottom:6px; }
.cs-list a i{ color:var(--brand-orange); font-size:1.1rem; }
.cs-list a.active, .cs-list a:hover{ background:var(--brand-light); }
.cs-two-box{ background:#fff9f2; border:1px solid #f3e2cc; border-radius:14px; padding:22px; height:100%; }
.cs-two-box.solution{ background:#f4f9f6; border-color:#d9ede2; }
.cs-feature-card{ border:1px solid #eee; border-radius:12px; padding:20px; text-align:center; height:100%; }
.cs-feature-card .icon{ width:48px; height:48px; border-radius:12px; background:rgba(195,111,9,.1); color:var(--brand-orange); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:1.3rem; }
.cs-result{ text-align:center; }
.cs-result .icon{ font-size:1.5rem; color:var(--brand-orange); margin-bottom:6px; }
.cs-result .val{ font-size:2rem; font-weight:700; color:var(--brand-orange); }

/* Technology Stack — spread entries evenly across the full row width instead
   of bunching them to the left, no matter how many are added. */
.tech-stack-row{
    display:grid !important; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
    gap:24px 16px; justify-items:center; text-align:center;
}

/* About Us page — body copy here runs at 20px instead of the sitewide 15px base. */
.about-text{ font-size:20px; line-height:32px; }

/* ===== Products page ===== */
/* padding-top clears the fixed floating pill nav now that this banner reaches
   the very top of the viewport (see .site-header above). */
.plain-banner{ background:var(--brand-dark); padding:170px 0 40px; text-align:center; color:#fff; position:relative; }
/* h1/h2/etc have their own explicit color:var(--brand-dark) rule elsewhere in
   this file, which — because it targets the element directly — overrides the
   inherited white from .plain-banner's own color:#fff above (an explicit rule
   on an element always wins over an inherited one, regardless of the parent
   rule's specificity). That's what made "Products" and similar page titles
   render in dark text and go unreadable against a dark/photo banner. Force it
   back to white explicitly, here, where it's actually used. */
.plain-banner h1{ font-weight:700; margin-bottom:6px; color:#fff; }
.plain-banner p{ color:rgba(255,255,255,.75); }
/* When an admin uploads a custom banner photo (currently used on Products), a
   dark gradient is layered over it inline — darken/flatten that further so
   title text stays legible regardless of how bright the photo is. */
.plain-banner[style*="background-image"]::before{
    content:''; position:absolute; inset:0; background:rgba(20,20,20,.35); pointer-events:none;
}
.plain-banner .container{ position:relative; z-index:1; }
/* Product strip is now large — its full width matches the navbar's 1280px container. */
.product-swipe-wrap{ position:relative; max-width:1280px; margin:0 auto; }
.product-swipe{ display:flex; gap:20px; overflow-x:auto; padding:10px 4px 20px; scroll-snap-type:x mandatory; cursor:grab; user-select:none; }
.product-swipe.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.product-swipe::-webkit-scrollbar{ height:6px; }
.product-swipe::-webkit-scrollbar-thumb{ background:#ddd; border-radius:6px; }
.product-chip{ flex:0 0 calc(33.333% - 14px); scroll-snap-align:center; border-radius:14px; overflow:hidden; border:2px solid transparent; text-align:center; padding-bottom:14px; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.06); transition:.2s; }
.product-chip img{ width:100%; height:260px; object-fit:cover; }
.product-chip.active{ border-color:var(--brand-orange); transform:scale(1.02); box-shadow:0 12px 26px rgba(195,111,9,.22); }
.product-chip .name{ font-weight:400; margin-top:12px; font-size:1.05rem; color:var(--brand-dark); }
@media (max-width: 767px){ .product-chip{ flex:0 0 82%; } .product-chip img{ height:200px; } }
.product-swipe-arrow{
    position:absolute; top:calc(50% - 24px); width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid #eee;
    color:var(--brand-dark); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.12); z-index:3;
}
.product-swipe-arrow:hover{ background:var(--brand-orange); color:#fff; border-color:var(--brand-orange); }
.product-swipe-arrow.prev{ left:-8px; }
.product-swipe-arrow.next{ right:-8px; }
@media (max-width: 767px){ .product-swipe-arrow{ display:none; } }
.capability-box{ background:var(--brand-dark); border-radius:16px; padding:26px; }
/* align-items was centering each icon against its own text block, so an item
   whose label wrapped to two lines pulled its icon down relative to the
   single-line items next to it — align to the top instead so every icon sits
   on the same line. */
.capability-item{ display:flex; align-items:flex-start; gap:12px; color:#fff; font-weight:500; font-size:.92rem; }
.capability-item i{ color:var(--brand-orange); font-size:1.75rem; line-height:1; flex-shrink:0; }
.product-detail-panel{ border:1px solid #eee; border-radius:16px; padding:28px; }
.product-feature-plain{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.product-feature-plain i{ color:var(--brand-orange); font-size:1.4rem; margin-top:3px; }

/* ===== Solutions page ===== */
.solutions-pane{ display:flex; gap:0; border:1px solid #eee; border-radius:16px; overflow:hidden; }
.solutions-list{ width:260px; background:var(--brand-light); padding:18px; flex-shrink:0; }
.solutions-list a{ display:block; padding:11px 14px; border-radius:8px; color:var(--brand-dark); font-weight:500; margin-bottom:6px; }
.solutions-list a.active, .solutions-list a:hover{ background:#fff; color:var(--brand-dark); }
.solutions-list .btn-brand{ color:#fff !important; }
.solutions-list .btn-brand:hover{ color:#fff !important; background:#a95c07 !important; border-color:#a95c07 !important; }
.solutions-content{ padding:32px; flex:1; }
.solutions-content .text-secondary{ color:var(--brand-dark) !important; }
.why-choose-box{ background:#fff9f2; border:1px solid #f3e2cc; border-radius:14px; padding:24px; }

/* ===== Blog ===== */
.blog-card{ border-radius:14px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.07); height:100%; }
.blog-card img{ width:100%; height:200px; object-fit:cover; }
.blog-card .body{ padding:20px; }
.blog-card .meta{ font-size:.8rem; color:#888; margin-bottom:8px; }
.blog-card h3{ font-size:1.1rem; font-weight:700; }
.blog-content-box{ text-align:justify; line-height:1.8; }

/* ===== Contact ===== */
.contact-card{ border:1px solid #eee; border-radius:14px; padding:20px; display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.contact-card .icon{ width:48px; height:48px; border-radius:12px; background:rgba(195,111,9,.1); color:var(--brand-orange); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
/* Bootstrap's .row stretches both columns to equal height already (its default
   flex align-items is stretch) — the map just needs to grow into that leftover
   space on the left column instead of sitting at a fixed 260px, so the two
   columns end up visually matching the form column's height. */
.contact-map-wrap{ border-radius:14px; overflow:hidden; border:1px solid #eee; flex:1 1 auto; min-height:180px; }
/* The left column stretches its map to fill the row's full height (see
   .contact-map-wrap above), but that column div was taller than this one, and
   this box only ever took its own natural content height — leaving invisible
   empty space below it that made the two columns look mismatched. Make this
   column a flex column too, with the dark box set to grow and fill it,
   exactly like the map does on the left, so both sides always end at the
   same line regardless of which side's content happens to be taller. */
.contact-form-box{ background:var(--brand-dark); border-radius:18px; padding:36px; color:#fff; flex:1 1 auto; }
.contact-form-box .form-control, .contact-form-box .form-select{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#fff; }
.contact-form-box .form-control::placeholder{ color:#bbb; }
/* The native dropdown popup always renders on a light background regardless of
   the closed select's own styling, so its <option> text needs a dark color —
   otherwise the white text set above is invisible against it. */
.contact-form-box .form-select option{ color:#212529; background:#fff; }
.contact-form-box label{ font-size:.85rem; color:#ddd; margin-bottom:6px; }

/* ===== Footer ===== */
.site-footer{ background:var(--brand-dark); color:#cfcfcf; padding:70px 0 0; }
.site-footer h5{ color:#fff; font-weight:700; margin-bottom:18px; }
.site-footer a{ color:#cfcfcf; }
.site-footer a:hover{ color:var(--brand-orange); }
.site-footer ul{ list-style:none; padding:0; }
.site-footer ul li{ margin-bottom:10px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; margin-right:8px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); margin-top:40px; padding:18px 0; font-size:.85rem; }

@media (max-width: 767px){
    .cs-banner-overlay{ position:static; margin-top:16px; flex-wrap:wrap; }
    .solutions-pane{ flex-direction:column; }
    .solutions-list{ width:100%; }
    .services-strip{ margin-top:20px; }
}