/* ==========================================================================
   Adhoc Technology Solutions — site-wide visual refresh
   --------------------------------------------------------------------------
   Loaded LAST (after bootstrap.min.css, carousel.css, font-awesome, the
   Slick carousel CSS, and rss-ticker.css) so it can safely restyle all of
   them without fighting specificity. Nothing here changes page structure —
   it only restyles the existing Bootstrap "Freelancer" template markup:
   rounder corners and soft shadows on every image/card/frame, a calmer
   modern type scale, alternating panel backgrounds so long content sections
   don't read as one unbroken wall of text, restyled section headers,
   "card" treatment for the Services Offered icons, a refreshed hero
   carousel with a legible caption panel, and a very faint, fixed logo
   watermark behind the whole page.

   The one exception is index.html / index_Fr.html themselves, which each
   got a handful of small, purely mechanical additions to support this file:
     1) <link href="css/site-redesign.css"> at the end of <head>
     2) <script src="js/read-more.js"></script> and
        <script src="js/infographic-lightbox.js"></script> near the other
        scripts
     3) a handful of long paragraphs wrapped in <div class="js-readmore">
        so the "Read more" collapsing behavior (see the READ MORE section
        below, and js/read-more.js) has something to act on, plus the
        Google Map <iframe> wrapped in <div class="map-frame"> so its
        corners can be rounded (an <iframe> can't clip its own corners)
     4) the About infographic image's markup (see ABOUT INFOGRAPHIC below,
        and js/infographic-lightbox.js)
   No other HTML changed — every color, spacing, shape and font here comes
   from ordinary CSS selectors matching the template's existing classes.

   --------------------------------------------------------------------------
   QUICK REFERENCE — every setting in this file, in one place
   --------------------------------------------------------------------------
   Design tokens (all on :root, edit these first for any color/shape change):
     --adhoc-ink              Primary dark color (navbar, dark panels, footer).
     --adhoc-ink-soft         Slightly lighter dark, used for gradients/hover.
     --adhoc-paper            Main light page background.
     --adhoc-paper-alt        Slightly tinted background for alternating
                               featurette panels (see FEATURETTE PANELS).
     --adhoc-accent           The garnet accent color — buttons, links,
                               section underlines, subsection titles, icon
                               badges. (The RSS ribbon's color is set
                               separately, in css/rss-ticker.css, and is
                               intentionally not tied to this variable.)
     --adhoc-accent-dark      Darker garnet, for hover states.
     --adhoc-accent-rgb       Same color as --adhoc-accent, as bare "r, g, b"
                               numbers (no rgb()/commas-only), so it can be
                               dropped into rgba(var(--adhoc-accent-rgb), 0.1)
                               for translucent tints — keep this in sync with
                               --adhoc-accent if you change the color by hand.
     --adhoc-ink-text         Body text color on light backgrounds.
     --adhoc-muted-text       Secondary/muted text color.
     --adhoc-radius           Standard corner rounding for images/cards.
     --adhoc-radius-sm        Smaller rounding, used for form fields.
     --adhoc-radius-lg        Larger rounding for the hero and big panels.
     --adhoc-radius-pill      Fully-rounded (pill) corners for buttons/badges.
     --adhoc-shadow           Standard soft drop shadow for raised elements.
     --adhoc-shadow-lg        Bigger shadow for hero/hover-lift states.
     --adhoc-watermark-size   Width of the faint background logo mark.
     --adhoc-watermark-opacity Opacity of the faint background logo mark
                               (0 = invisible, 1 = fully opaque — still kept
                               low by default so it reads as texture, not a
                               duplicate logo fighting for attention, but
                               raised a bit from the very first version).
     --adhoc-thumb-padding    Space around the sharp logo on top of each
                               Partner logo card (see PARTNER LOGOS) — 14px
                               by default; raise it for more breathing room.
     --adhoc-thumb-width      Fixed width of every Partner logo card, at
                               EVERY screen size (see PARTNER LOGOS) — this
                               is what keeps cards from ever being squeezed:
                               the custom marquee (js/partner-marquee.js)
                               simply shows however many fit in the row,
                               rather than forcing a fixed NUMBER of cards
                               into it like the old Slick carousel did.
     --adhoc-thumb-height     Fixed height of every Partner logo card, at
                               every screen size (see PARTNER LOGOS).
     --adhoc-thumb-gap        Horizontal gap between cards in the scrolling
                               Partner logo strip (see PARTNER LOGOS).
     --adhoc-thumb-blur       Blur strength of each card's colour-matched
                               backdrop (see PARTNER LOGOS) — higher = a
                               softer, less detailed fill behind the logo.
                               Needs js/partner-logo-backdrop.js loaded (see
                               index.html / index_Fr.html) to have any logo
                               color to work with in the first place.
     --adhoc-thumb-img-radius Corner rounding on the logo image and its
                               backdrop inside each Partner logo card (see
                               PARTNER LOGOS) — 0 turns it off.
     --adhoc-infographic-thumb-width  Width of the small clickable thumbnail
                               that opens the About infographic popup (see
                               ABOUT INFOGRAPHIC below) — only relevant when
                               that section's data-display-mode="lightbox".

   Sections further down (search for the ALL-CAPS heading comments):
     BACKGROUND WATERMARK   the fixed, low-opacity images/logo-watermark.png
     NAVBAR                 nav link hover states, spacing
     HERO CAROUSEL          gradient overlay + caption card + rounded corners
     SECTION HEADERS        the centered heading + accent underline style
     ABOUT PANEL            the intro section's card treatment and justified
                            paragraph text
     ABOUT INFOGRAPHIC      the small thumbnail + click-to-open popup for the
                            Solutions/Services overview graphic (or, in
                            "inline" mode, the plain full-width image)
     FEATURETTE PANELS      alternating background on the 5 Solutions rows,
                            subsection title/subtitle alignment, paragraph
                            font size
     ROUNDED IMAGES         corner rounding + shadow for all content images
     SERVICES CARDS         icon badges + card treatment for Services
                            Offered, including its paragraph font size
     PARTNER LOGOS          thumbnail rounding + grayscale/hover-color effect;
                            each card's blurred color-matched backdrop, so a
                            logo is never cropped and never leaves a white
                            gap (also needs js/partner-logo-backdrop.js); the
                            scrolling-strip layout itself, for rows with
                            enough partners (also needs
                            js/partner-marquee.js — rows with too few
                            partners show statically instead, see that
                            file's MIN_CARDS_FOR_SCROLL)
     CONTACT & FORM         map frame, form field, button styling
     COOKIE BANNER          rounding to match the rest of the page
     FOOTER                 spacing, divider, link styling
     READ MORE              the collapsible-paragraph component (also needs
                            js/read-more.js — see that file's own reference
                            comment for its settings)
     RESPONSIVE TWEAKS      small adjustments below ~600px
   ========================================================================== */

:root {
	--adhoc-ink: #1b1e24;
	--adhoc-ink-soft: #2a2e37;
	--adhoc-paper: #eef0f2;
	--adhoc-paper-alt: #e2e5e8;
	--adhoc-accent: #733635;
	--adhoc-accent-dark: #5c2b2a;
	--adhoc-accent-rgb: 115, 54, 53;
	--adhoc-ink-text: #2b2e33;
	--adhoc-muted-text: #6b7280;
	--adhoc-radius: 16px;
	--adhoc-radius-sm: 10px;
	--adhoc-radius-lg: 22px;
	--adhoc-radius-pill: 999px;
	--adhoc-shadow: 0 10px 26px -14px rgba(20, 22, 30, 0.35);
	--adhoc-shadow-lg: 0 24px 48px -20px rgba(20, 22, 30, 0.45);
	--adhoc-watermark-size: 640px;
	--adhoc-watermark-opacity: 0.08;

	--adhoc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   BASE TYPOGRAPHY
   ========================================================================== */
body {
	font-family: var(--adhoc-font);
	color: var(--adhoc-ink-text);
	background: var(--adhoc-paper);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .navbar-brand, .featurette-heading {
	font-family: var(--adhoc-font);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--adhoc-ink);
}

p {
	max-width: 72ch; /* comfortable reading measure — long paragraphs stop
	                     stretching edge-to-edge on wide screens */
}
p.lead {
	max-width: 76ch;
	color: var(--adhoc-ink-text);
}

a {
	color: var(--adhoc-accent-dark);
}
a:hover, a:focus {
	color: var(--adhoc-accent);
}

/* ==========================================================================
   BACKGROUND WATERMARK
   --------------------------------------------------------------------------
   A single large, very faint copy of the circuit-mark from your logo,
   fixed behind the whole page. --adhoc-watermark-size controls how big it
   is; --adhoc-watermark-opacity controls how visible it is — raise it a
   little (e.g. 0.08–0.1) if you want it more noticeable, or set it to 0 to
   turn the watermark off entirely without removing this block.
   ========================================================================== */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("../images/logo-watermark.png");
	background-repeat: no-repeat;
	background-position: center 15%;
	background-size: var(--adhoc-watermark-size) auto;
	opacity: var(--adhoc-watermark-opacity);
	pointer-events: none;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar-wrapper .navbar {
	border: 0;
	box-shadow: var(--adhoc-shadow);
}
.navbar-inverse {
	background: var(--adhoc-ink);
}
.navbar-nav > li > a {
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--adhoc-radius-pill);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
	background-color: var(--adhoc-accent);
	color: #fff;
}
.dropdown-menu {
	border-radius: var(--adhoc-radius);
	overflow: hidden;
	border: 0;
	box-shadow: var(--adhoc-shadow);
}

/* ==========================================================================
   HERO CAROUSEL
   ========================================================================== */
#myCarousel {
	overflow: hidden;
	border-radius: 0 0 var(--adhoc-radius-lg) var(--adhoc-radius-lg);
	box-shadow: var(--adhoc-shadow-lg);
}
#myCarousel .item::after {
	/* Dark gradient so white caption text stays legible over any photo. */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(10, 11, 14, 0.75) 0%,
		rgba(10, 11, 14, 0.15) 45%,
		rgba(10, 11, 14, 0) 70%
	);
	pointer-events: none;
}
.carousel-caption {
	right: 8%;
	left: 8%;
	bottom: 12%;
	text-shadow: none;
}
.carousel-caption h1 {
	color: #fff;
	font-size: 2.4rem;
	margin-bottom: 10px;
}
.carousel-caption p {
	color: #e7e8ea;
	font-size: 1.15rem;
	max-width: 60ch;
	margin: 0 auto;
}
.carousel-indicators li {
	border-color: rgba(255, 255, 255, 0.6);
}
.carousel-indicators .active {
	background-color: var(--adhoc-accent);
	border-color: var(--adhoc-accent);
}
.carousel-control .glyphicon {
	background: rgba(15, 16, 20, 0.45);
	border-radius: 50%;
	padding: 14px;
	width: 52px;
	height: 52px;
	top: 50%;
	margin-top: -26px;
}

/* ==========================================================================
   SECTION HEADERS
   --------------------------------------------------------------------------
   Replaces Bootstrap's plain full-width underline with a centered heading
   and a short accent-colored bar beneath it.
   ========================================================================== */
h2.page-header {
	border-bottom: 0;
	text-align: center;
	margin: 64px 0 40px;
	padding: 0; /* see the note further down, next to the .row.featurette h2
	               rule, about the stray "h2 { padding: 20px }" rule hiding at
	               the very end of css/bootstrap.min.css — this line (and that
	               one) are what neutralize it. */
	font-size: 2rem;
}
h2.page-header::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: var(--adhoc-accent);
	border-radius: var(--adhoc-radius-pill);
	margin: 16px auto 0;
}

/* ==========================================================================
   ABOUT PANEL
   --------------------------------------------------------------------------
   Targets the .about-panel class added to the About section's <div
   class="container"> in the HTML (a plain sibling/structural selector here
   would also catch the Contact and Partners sections' own <div
   class="container">, which is why this needed an explicit class instead).
   ========================================================================== */
.about-panel {
	background: #fff;
	border-radius: var(--adhoc-radius-lg);
	box-shadow: var(--adhoc-shadow);
	padding: 36px 40px;
}
/* The site-wide "p { max-width: 72ch }" rule (see BASE TYPOGRAPHY above) is
   meant to stop paragraphs stretching edge-to-edge on very wide screens, but
   inside this already-comfortable-width panel it instead capped each
   paragraph to roughly half the panel's actual width, making lines wrap
   early and end well short of the right edge. Lifted here so paragraphs use
   the full panel width, and justified (with the last line of each paragraph
   kept left-aligned, not stretched) for a cleaner, more even block of text. */
.about-panel p {
	max-width: none;
	text-align: justify;
	text-align-last: left;
}
/* ==========================================================================
   ABOUT INFOGRAPHIC (thumbnail + optional lightbox popup)
   --------------------------------------------------------------------------
   Targets .about-infographic, a small wrapper sitting right inside the
   About panel (see index.html / index_Fr.html), just after the "Our
   commitment" paragraph. It carries a data-display-mode attribute that
   js/infographic-lightbox.js reads:

     data-display-mode="lightbox" (the default) — only a small clickable
       thumbnail (.infographic-trigger) shows inline in the paragraph; the
       full-size image (.infographic-full) and the popup (.infographic-modal)
       stay hidden until the thumbnail is clicked, then the image opens in a
       centered overlay — closed via its × button, by clicking the dimmed
       backdrop, or by pressing Escape. Keeps the page itself lighter.

     data-display-mode="inline" — the opposite: .infographic-full shows
       directly on the page like a normal image (this was the very first
       version's behavior), and the thumbnail/popup stay hidden entirely.

   Switching modes is a one-attribute edit on the .about-infographic <div>
   in the HTML — no CSS or JS change needed either way. */
:root {
	--adhoc-infographic-thumb-width: 220px;
}
.about-infographic[data-display-mode="inline"] .infographic-trigger,
.about-infographic[data-display-mode="inline"] .infographic-modal {
	display: none;
}
.about-infographic[data-display-mode="lightbox"] .infographic-full {
	display: none;
}
.infographic-full {
	display: block;
	border-radius: var(--adhoc-radius-lg);
	box-shadow: var(--adhoc-shadow);
	max-width: 100%;
	height: auto;
	margin: 16px 0 0;
}
/* --- thumbnail trigger ("View our Solutions & Services overview") ------- */
.infographic-trigger {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 12px 0 0;
	padding: 8px 20px 8px 8px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--adhoc-radius-pill);
	background: #fff;
	box-shadow: var(--adhoc-shadow);
	cursor: pointer;
	font-family: var(--adhoc-font);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--adhoc-ink-text);
	text-align: left;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.infographic-trigger:hover,
.infographic-trigger:focus {
	transform: translateY(-2px);
	box-shadow: var(--adhoc-shadow-lg);
	outline: none;
}
.infographic-trigger img {
	width: var(--adhoc-infographic-thumb-width);
	max-width: 40vw;
	display: block;
	border-radius: var(--adhoc-radius-sm);
}
/* --- popup overlay ------------------------------------------------------ */
.infographic-modal {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.infographic-modal[hidden] {
	display: none;
}
.infographic-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 16, 20, 0.72);
}
/* Two nested boxes on purpose: .infographic-modal-dialog stays
   overflow: visible so the close button below can sit half outside its
   top-right corner without being clipped off; .infographic-modal-scroll
   (the actual rounded/shadowed white card) is the one that scrolls if the
   image is taller than the popup can be. */
.infographic-modal-dialog {
	position: relative;
	max-width: min(1100px, 92vw);
	max-height: 88vh;
}
.infographic-modal-scroll {
	max-height: 88vh;
	overflow: auto;
	border-radius: var(--adhoc-radius-lg);
	box-shadow: var(--adhoc-shadow-lg);
	background: #fff;
	padding: 8px;
}
.infographic-modal-dialog img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--adhoc-radius);
}
.infographic-modal-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: var(--adhoc-ink);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--adhoc-shadow);
	transition: background-color 0.15s ease;
	z-index: 1;
}
.infographic-modal-close:hover,
.infographic-modal-close:focus {
	background: var(--adhoc-accent);
}

/* ==========================================================================
   FEATURETTE PANELS (the 5 Solutions & Expertise sub-sections)
   --------------------------------------------------------------------------
   Alternating tinted background so five long text blocks in a row read as
   distinct panels instead of one continuous wall of text. The alternation
   uses an explicit .featurette-tint class on rows 1/3/5 in the HTML rather
   than :nth-of-type — :nth-of-type(odd/even) counts ALL sibling <div>s at
   that level (ticker container, About panel, Services/Partners rows, etc.
   are all <div>s at the same nesting level too), not just these five, so it
   would not reliably land on just this section's rows. The divider <hr
   class="featurette-divider"> between them is hidden in favor of the
   panels' own spacing.
   ========================================================================== */
.row.featurette {
	border-radius: var(--adhoc-radius-lg);
	padding: 32px 32px;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 28px;
	background: #fff;
	box-shadow: var(--adhoc-shadow);
}
.row.featurette.featurette-tint {
	background: var(--adhoc-paper-alt);
	box-shadow: none;
}
hr.featurette-divider {
	display: none;
}
.featurette-heading {
	color: var(--adhoc-accent-dark);
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
}
.featurette-heading + h2 {
	margin-top: 0;
	font-size: 1.6rem;
}
/* Explicitly left-align both the small caption ("FORENSIC SOLUTIONS") and
   the subtitle right below it ("Computer, Phone and Cyber Forensics") so
   they always line up with each other and with the paragraph text below,
   regardless of any centering that may come from other stylesheets loaded
   earlier in <head> — this file loads last, so this always wins. Marked
   !important as a safety net: if this still doesn't look aligned after
   uploading this file, the most likely cause is a stale cached copy of
   this stylesheet rather than a losing CSS rule (hard-refresh / clear
   cache to check) — with !important here, nothing else can outrank it.

   FOUND (round 4): the real cause of the persistent misalignment was never
   text-align — it was padding. Right at the very end of css/bootstrap.min.css,
   after that file's own closing "sourceMappingURL" comment, someone appended
   a hand-written rule: "h2 { text-align: center; padding: 20px; }" (credited
   to a Stack Overflow answer in a comment right above it). It applies to
   EVERY <h2> on the page, this subsection's subtitle included. The
   text-align part was already beaten by the !important above, but its
   "padding: 20px" was never touched — that 20px of left padding is exactly
   what was pushing "Computer, Phone and Cyber Forensics" to the right of
   "FORENSIC SOLUTIONS" above it (confirmed by measuring both elements'
   on-screen position: identical left edge, but the actual text 20px further
   right, matching that padding exactly). Zeroed below so nothing is left to
   cause it. This stray rule likely affects other plain <h2> elements on the
   page too (see the padding: 0 added to h2.page-header, above) — if a
   similar small unexplained gap ever shows up around some other heading,
   that appended block in bootstrap.min.css is the first place to look
   before writing a new override here. */
.row.featurette .featurette-heading,
.row.featurette h2,
.row.featurette h2 .text-muted {
	text-align: left !important;
	margin-left: 0 !important;
	text-indent: 0 !important;
	padding: 0 !important;
}
/* The intro paragraph of each of the 5 subsections uses Bootstrap's
   p.lead. Two issues fixed here: (1) it was inheriting the site-wide
   "p { max-width: 72ch }" rule (see BASE TYPOGRAPHY above), which cut it
   off well short of the column's actual width — same issue as the About
   panel, fixed the same way; (2) its font-size is bumped clearly above
   the plain body text used elsewhere in the same subsection (e.g. "Our
   Expertise and Services:"), and given normal (not Bootstrap's default
   thin/300) weight, so it reads as an intro sentence, not as smaller or
   fainter than the text below it. The About section's own p.lead (its
   opening sentence) is untouched, since that one only ever appears once. */
.row.featurette p.lead {
	max-width: none;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.7;
}
/* The rest of each subsection's body copy (the "Our Expertise and
   Services:" line, bullet lists) is plain, unstyled <p>/<li> text, so it
   was still subject to the same 72ch cap — lifted here too. */
.row.featurette p,
.row.featurette li {
	max-width: none;
}

/* ==========================================================================
   ROUNDED IMAGES
   --------------------------------------------------------------------------
   Every content image (carousel slides excluded — those are covered by
   #myCarousel above) gets the same soft rounding and shadow, so nothing on
   the page still has a sharp rectangular corner.
   ========================================================================== */
.featurette-image {
	border-radius: var(--adhoc-radius);
	box-shadow: var(--adhoc-shadow);
	margin-bottom: 16px;
}

/* ==========================================================================
   SERVICES CARDS (the 6 "Services Offered" tiles)
   --------------------------------------------------------------------------
   Targets .services-row / .service-card, added explicitly in the HTML to
   the Services Offered <div class="row"> and its six column <div>s — see
   the note on the ABOUT PANEL above for why an explicit class is used
   instead of a structural selector here too.

   .services-row is turned into a flex row (Bootstrap 3's own .row/.col-*
   are plain floats, which size each column to only its OWN content) so
   that every card in the same row stretches to match its tallest sibling
   — otherwise a card whose paragraph is short enough to skip the "Read
   more" button (see READ MORE further down) ends up visibly shorter than
   its neighbors. This is why French didn't show the problem: French
   paragraphs for this section all happened to run long enough to trigger
   "Read more" on every card, so they were already the same height by
   coincidence, not by anything guaranteeing it — this fix makes it
   guaranteed on both language versions, and safe for future text edits
   that change which cards are short. */
.services-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.services-row .service-card {
	display: flex;
	flex-direction: column;
	/* Centers every child horizontally (icon badge, heading, paragraph
	   text, button) — .service-card's OWN centering, so it no longer
	   depends on whatever centered them before this section became a flex
	   column (flex ignores plain text-align/inline-block centering on its
	   children — this replaces that explicitly). Without this, flex's
	   default cross-axis behavior is "stretch", which is also what was
	   silently blowing the "Read more" button out to the card's full
	   width — align-items: center is the fix for both at once, since it
	   lets every child size to its own natural width instead of
	   stretching to fill the card. */
	align-items: center;
	text-align: center;
	background: #fff;
	border-radius: var(--adhoc-radius);
	box-shadow: var(--adhoc-shadow);
	padding: 32px 24px;
	margin-bottom: 24px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* The paragraph wrapper still needs its own full width — align-items:
   center above sizes every child to its own CONTENT width by default,
   which would let a short line of text shrink-wrap instead of using the
   card's full text measure; text-align: center above (inherited from
   .service-card) still centers the actual lines within it either way. */
.services-row .service-card .js-readmore {
	width: 100%;
}
/* Push the "Read more" button (see READ MORE further down — its real
   class name, .readmore-toggle, comes from js/read-more.js) to the bottom
   of the card even when its own paragraph is short, so the button lines
   up across a row of now-equal-height cards instead of sitting right
   after a short paragraph while a neighbor's sits much lower. Harmless on
   a card whose paragraph never needed a button in the first place — this
   selector simply matches nothing there. */
.services-row .service-card .readmore-toggle {
	margin-top: auto;
}
.services-row .service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--adhoc-shadow-lg);
}
.services-row .service-card .glyphicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	font-size: 2.2rem !important;
	color: var(--adhoc-accent);
	background: rgba(var(--adhoc-accent-rgb), 0.1);
	border-radius: 50%;
	margin-bottom: 18px;
}
.services-row .service-card h3 {
	margin-top: 0;
	font-size: 1.2rem;
}
/* These cards' body copy is plain <p> text (no .lead), which inherits
   Bootstrap's 14px default — noticeably smaller than the rest of the page's
   text, especially next to the larger heading and icon badge in the same
   card. Bumped up to match normal reading size (same size as the
   Solutions & Expertise subsections' body copy, just above). */
.services-row .service-card p {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--adhoc-ink-text);
	max-width: none;
}

/* ==========================================================================
   PARTNER LOGOS
   --------------------------------------------------------------------------
   Three problems, from three rounds of feedback, that each fixed the last
   one but exposed the next:
     1) Several partner logo files are themselves solid-color (often black)
        rectangles with the logotype knocked out in white, rather than a
        transparent/white-background image — with a plain white card and
        object-fit: contain, that color rectangle floated in the middle,
        showing an odd white margin around it.
     2) Fixing #1 by having the image cover the card completely
        (object-fit: cover) solved the white-margin problem, but for a WIDE
        logo (much wider than the card's own width-to-height ratio — e.g. a
        Panasonic or Riverbed-style logo) it crops the left and right edges
        of the logo itself to make it fill the box, which is worse.
     3) Fixing #2 with object-fit: contain plus a blurred color-matched
        backdrop (below) solved both — but the row of cards was still being
        driven by the Slick Carousel plugin with slidesToShow: 3 and NO
        responsive breakpoints, i.e. it forced exactly 3 cards into the
        row's width no matter how narrow the screen. On a squeezed window
        or a phone that squeezed every card down to a sliver, and the logo
        inside shrank right along with it until it was unreadable — no
        amount of card-height tuning could fix that, because the problem
        was the card's WIDTH being divided by a fixed count instead of
        being left alone.

   The fix for #1 + #2: every card gets a second, blurred copy of the SAME
   logo image stretched to fully cover the card as a backdrop (a real
   <div class="thumbnail-backdrop">, inserted and given its background by
   js/partner-logo-backdrop.js — CSS alone can't reuse an <img>'s own src
   as a background-image, so that tiny script does it directly with a
   plain inline style). The real, sharp logo sits on top of that blurred
   backdrop with object-fit: contain, so it is NEVER cropped —
   and because the backdrop is the logo's own colors, blurred and scaled up
   past the card's edges, there's no visible seam: a white-background logo
   blurs into an almost-white backdrop (blends with the white card), a
   black-background logo blurs into a dark backdrop that fills the card
   the same way a truly edge-to-edge black logo would.

   The fix for #3: Slick has been dropped entirely for this section, in
   favor of a small self-contained (no jQuery, no external library)
   continuous auto-scrolling strip — see js/partner-marquee.js. Every card
   keeps a FIXED width (--adhoc-thumb-width below) at every screen size, so
   it is never squeezed the way Slick's slidesToShow: 3 squeezed it — a
   narrow screen simply shows fewer cards at their normal size, exactly
   like a real marquee/ticker. That JS file duplicates each row's card set
   once and this stylesheet animates the duplicate strip with a linear,
   seamlessly-looping CSS transform (see .partner-marquee-track below).

   Needs js/partner-logo-backdrop.js AND js/partner-marquee.js loaded (see
   index.html / index_Fr.html), in that order — the backdrop script must
   run first so the marquee script's clone of each card also carries its
   already-built .thumbnail-backdrop div. Without partner-logo-backdrop.js,
   cards simply lose their color-matched backdrop (back to problem #1
   above); without partner-marquee.js, the rows stay static (no scrolling)
   but every card still renders correctly at its normal, un-squeezed size.

   If a future logo file looks odd with this treatment (e.g. a logo that's
   ALREADY exactly the card's own proportions, where the blur is barely
   visible anyway), --adhoc-thumb-blur below can be turned down toward 0,
   or --adhoc-thumb-padding raised for more breathing room around the
   sharp logo on top.
   ========================================================================== */
:root {
	--adhoc-thumb-padding: 14px; /* inset around the sharp logo on top, so it
	                                 never touches the card's rounded corners */
	--adhoc-thumb-width: 260px;  /* fixed card width, at EVERY screen size —
	                                 see the section comment above: this is
	                                 what replaces Slick's slidesToShow, and
	                                 is why a card is never squeezed again.
	                                 Lower it to fit more cards on screen at
	                                 once, raise it to show fewer, bigger
	                                 ones. See RESPONSIVE TWEAKS further down
	                                 for a smaller override on narrow phones. */
	--adhoc-thumb-height: 140px; /* fixed card height, at every screen size
	                                 (≈ the same 260:140 proportions the
	                                 desktop card always had). */
	--adhoc-thumb-gap: 20px;     /* horizontal gap between cards in the
	                                 scrolling strip. */
	--adhoc-thumb-blur: 22px;    /* how blurred the backdrop copy is — higher
	                                 = softer/less detailed fill color */
	--adhoc-thumb-img-radius: 12px; /* corner rounding applied directly to the
	                                    logo image AND its blurred backdrop,
	                                    not just to the card around them —
	                                    .thumbnail already clips both to its
	                                    own rounded corners via overflow:
	                                    hidden, but some browsers still leave
	                                    a faint hard-edged sliver right at the
	                                    corner where a sharp-cornered image
	                                    meets that clip; rounding the image
	                                    and backdrop themselves too is the
	                                    reliable fix. Set to 0 to turn this
	                                    off; raise it to round the images
	                                    more than the card itself (an
	                                    intentionally "inset frame" look). */
}
/* The scrolling strip itself — js/partner-marquee.js turns each
   .slickslide-* row (the class names are leftover from the old Slick
   plugin, kept only so the JS selectors below didn't need to change too)
   into one of these. The outer element just clips and centers; the inner
   .partner-marquee-track is the actual card list, duplicated once by the
   JS and animated the full width of one copy, so it loops seamlessly. */
.partner-marquee {
	overflow: hidden;
	position: relative;
	width: 100%;
}
.partner-marquee-track {
	display: flex;
	align-items: center;
	gap: var(--adhoc-thumb-gap);
	width: max-content;
	will-change: transform;
	animation-name: adhoc-marquee-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	/* A sane fallback in case js/partner-marquee.js hasn't run yet (or
	   fails to load) — the JS overrides this per-row so every row scrolls
	   at the same constant speed regardless of how many logos it holds. */
	animation-duration: 30s;
}
.partner-marquee:hover .partner-marquee-track {
	animation-play-state: paused; /* mirrors Slick's old pauseOnHover: true */
}
@media (prefers-reduced-motion: reduce) {
	.partner-marquee-track {
		animation: none;
	}
}
@keyframes adhoc-marquee-scroll {
	from { transform: translateX(0); }
	/* the track is exactly two copies of the card set back to back, so
	   -50% is precisely one copy's width — the loop point where the
	   duplicate seamlessly takes over from the original */
	to { transform: translateX(-50%); }
}
/* A row with too few partners to bother scrolling (see
   MIN_CARDS_FOR_SCROLL in js/partner-marquee.js) gets this modifier
   instead: every logo shown once, centered, not duplicated, not animated —
   scrolling a nearly-empty row reads as broken, not as a design. Unlike
   the scrolling rows above, this one is allowed to WRAP onto a second
   line on narrow screens rather than clip — there is no scrolling here to
   reveal a card that doesn't fit, so a hidden overflow would just hide it
   for good. */
.partner-marquee--static {
	overflow: visible;
}
.partner-marquee--static .partner-marquee-track {
	animation: none;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}
.thumbnail {
	position: relative; /* anchors .thumbnail-backdrop below */
	flex: 0 0 auto; /* fixed size inside .partner-marquee-track's flex row —
	                    never stretched or shrunk by its neighbors */
	width: var(--adhoc-thumb-width);
	height: var(--adhoc-thumb-height);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--adhoc-radius);
	box-shadow: var(--adhoc-shadow);
	overflow: hidden;
	background: #fff;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.thumbnail:hover {
	transform: translateY(-3px);
	box-shadow: var(--adhoc-shadow-lg);
}
/* The blurred, edge-to-edge backdrop copy of the logo — see the section
   comment above. js/partner-logo-backdrop.js inserts one real
   <div class="thumbnail-backdrop"> per card (as the first child, so it
   paints below the logo <img> that follows it) and sets its
   background-image directly with a plain inline style — not through a CSS
   custom property on the card, which is what an earlier version of this
   file did. That indirection (JS sets a --variable, this rule reads the
   variable inside var(...url(...)...)) turned out not to render in at
   least one real browser even though the variable itself was confirmed
   present in DevTools — a real element with its background set directly
   is far easier to both get right and to debug (it can be selected and
   inspected on its own in DevTools, unlike a ::before pseudo-element). A
   card with no script (or before it runs) simply has no
   .thumbnail-backdrop element yet, i.e. a plain white card behind the
   sharp logo. */
.thumbnail-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: var(--adhoc-thumb-img-radius);
	background-size: cover;
	background-position: center;
	/* scaled up a little beyond the blur radius so the blur's own softened
	   edge never peeks in from outside the card */
	transform: scale(1.25);
	filter: blur(var(--adhoc-thumb-blur)) saturate(1.3) brightness(0.97);
	z-index: 0;
}
.thumbnail img {
	position: relative; /* stacks above .thumbnail-backdrop */
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--adhoc-thumb-img-radius);
	object-fit: contain; /* the whole logo, always — never cropped */
	padding: var(--adhoc-thumb-padding);
	box-sizing: border-box;
	filter: grayscale(55%);
	opacity: 0.9;
	transition: filter 0.18s ease, opacity 0.18s ease;
}
.thumbnail:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ==========================================================================
   CONTACT & FORM
   ========================================================================== */
.map-frame {
	border-radius: var(--adhoc-radius-lg);
	overflow: hidden;
	box-shadow: var(--adhoc-shadow);
	line-height: 0; /* removes the few stray pixels an inline iframe adds
	                   beneath itself inside a block wrapper */
}
.map-frame iframe {
	display: block;
	width: 100%;
}

.form-control {
	border-radius: var(--adhoc-radius-sm);
	border: 1px solid #d7d9de;
	box-shadow: none;
	padding: 10px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
	border-color: var(--adhoc-accent);
	box-shadow: 0 0 0 3px rgba(var(--adhoc-accent-rgb), 0.15);
}
.btn-primary {
	background: var(--adhoc-accent);
	border-color: var(--adhoc-accent);
	border-radius: var(--adhoc-radius-pill);
	padding: 10px 28px;
	font-weight: 600;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover,
.btn-primary:focus {
	background: var(--adhoc-accent-dark);
	border-color: var(--adhoc-accent-dark);
	transform: translateY(-1px);
}

/* ==========================================================================
   COOKIE BANNER
   --------------------------------------------------------------------------
   The banner's colors/layout are set inline in the HTML (kept there so it
   still works even if this stylesheet fails to load); this just rounds its
   top corners to match the rest of the page.
   ========================================================================== */
#cookieConsent {
	border-radius: var(--adhoc-radius) var(--adhoc-radius) 0 0 !important;
}
#cookieConsent button {
	border-radius: var(--adhoc-radius-pill) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 24px;
	margin-top: 24px;
	color: var(--adhoc-muted-text);
}
footer a {
	color: var(--adhoc-ink-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
footer a:hover {
	color: var(--adhoc-accent-dark);
	border-bottom-color: currentColor;
}

/* ==========================================================================
   READ MORE
   --------------------------------------------------------------------------
   Collapses a long block of text down to --adhoc-readmore-collapsed-height
   with a soft fade at the cut line, plus a "Read more" / "Read less" toggle
   button that js/read-more.js inserts automatically. If a paragraph is
   already shorter than the collapsed height, the script leaves it fully
   visible and never adds a button — this only ever kicks in when there's
   actually more to hide.
   ========================================================================== */
:root {
	--adhoc-readmore-collapsed-height: 190px;
}
.js-readmore {
	position: relative;
	overflow: hidden;
	max-height: var(--adhoc-readmore-collapsed-height);
	transition: max-height 0.3s ease;
}
.js-readmore.js-readmore--expanded {
	max-height: none;
}
.js-readmore.js-readmore--clamped::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 56px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--adhoc-readmore-fade-color, #fff));
	pointer-events: none;
}
.js-readmore.js-readmore--expanded.js-readmore--clamped::after {
	opacity: 0;
}
.readmore-toggle {
	display: inline-block;
	margin: 10px 0 20px;
	padding: 6px 18px;
	border-radius: var(--adhoc-radius-pill);
	border: 1px solid var(--adhoc-accent);
	background: transparent;
	color: var(--adhoc-accent-dark);
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.readmore-toggle:hover,
.readmore-toggle:focus {
	background: var(--adhoc-accent);
	color: #fff;
}
/* The tinted featurette panels (see FEATURETTE PANELS above) have a
   non-white background, so their fade-out needs to match it instead of
   fading to white. */
.row.featurette.featurette-tint .js-readmore.js-readmore--clamped::after {
	--adhoc-readmore-fade-color: var(--adhoc-paper-alt);
}

/* ==========================================================================
   RESPONSIVE TWEAKS
   ========================================================================== */
@media (max-width: 767px) {
	h2.page-header {
		font-size: 1.6rem;
		margin: 40px 0 28px;
	}
	.carousel-caption h1 {
		font-size: 1.5rem;
	}
	.carousel-caption p {
		font-size: 0.95rem;
	}
	a[name="about"] ~ div.container {
		padding: 24px 20px;
	}
	.row.featurette {
		padding: 24px 18px;
	}
	:root {
		--adhoc-watermark-size: 380px;
		/* Smaller Partner logo cards on narrow phones — purely a size
		   preference, not a fix for anything: unlike the old Slick
		   carousel, the marquee (see PARTNER LOGOS) never squeezes a card
		   below this size, it just shows fewer of them, so this override
		   is optional and can be removed to keep one size everywhere. */
		--adhoc-thumb-width: 200px;
		--adhoc-thumb-height: 108px;
	}
}