/* =============================================================
   ORD — Design Tokens
   Palette taken from the ORD logo: signal red + deep navy, on a
   navy-black (dark) or clean white (light) base.
   Type: Poppins (display) / Inter (body) / JetBrains Mono (data)
   ============================================================= */
:root {
	--ord-bg:        #070D1E;
	--ord-bg-alt:    #0A1329;
	--ord-panel:     #0F1A38;
	--ord-panel-2:   #142347;
	--ord-border:    rgba(255,255,255,.10);
	--ord-border-2:  rgba(255,255,255,.16);
	--ord-text:      #E8ECF8;
	--ord-text-dim:  #A9B3CF;
	--ord-text-dim-2:#7C88AC;
	--ord-heading:   #FFFFFF;

	--ord-primary:   #E30B17;   /* logo red — buttons, fills */
	--ord-accent:    #FF5A66;   /* red for text/icons on dark */
	--ord-secondary: #86ABFF;   /* light navy-blue for text/icons on dark */
	--ord-navy:      #0A2C6B;   /* logo navy */
	--ord-royal:     #2A63D8;

	--ord-grad-brand: linear-gradient(120deg, #E30B17 0%, #BB0B36 52%, #1B4CB4 100%);
	--ord-grad-glow:  radial-gradient(circle, rgba(227,11,23,.32), transparent 70%);

	--ord-veil-1: rgba(255,255,255,.015);
	--ord-veil-2: rgba(255,255,255,.02);
	--ord-veil-3: rgba(255,255,255,.03);
	--ord-veil-4: rgba(255,255,255,.05);
	--ord-star-empty: rgba(255,255,255,.15);
	--ord-header-bg: rgba(7,13,30,0);
	--ord-header-bg-scrolled: rgba(7,13,30,.88);
	--ord-mobile-nav-bg: rgba(7,13,30,.98);
	--ord-map-filter: invert(92%) hue-rotate(180deg) brightness(95%) contrast(90%);
	--ord-logo-card-bg: var(--ord-panel-2);
	--ord-logo-card-bg-hover: #1B2E5C;
	--ord-logo-card-border: var(--ord-border-2);

	--ord-font-display: 'Poppins', 'Segoe UI', sans-serif;
	--ord-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ord-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

	--ord-radius-sm: 10px;
	--ord-radius: 16px;
	--ord-radius-lg: 24px;
	--ord-container: clamp(1220px, 92vw, 1760px);
	--ord-header-h: 84px;

	--ord-ease: cubic-bezier(.22,1,.36,1);

	color-scheme: dark;
}

/* =============================================================
   Light mode — toggled via [data-theme="light"] on <html>,
   set by inline anti-flash script (header.php) + main.js
   ============================================================= */
:root[data-theme="light"] {
	--ord-bg:        #F7F8FC;
	--ord-bg-alt:    #EDF0F8;
	--ord-panel:     #FFFFFF;
	--ord-panel-2:   #F3F5FB;
	--ord-border:    rgba(10,31,77,.10);
	--ord-border-2:  rgba(10,31,77,.17);
	--ord-text:      #27304A;
	--ord-text-dim:  #566079;
	--ord-text-dim-2:#76819B;
	--ord-heading:   #0A1F4D;

	--ord-accent:    #C8091A;
	--ord-secondary: #0A2C6B;

	--ord-veil-1: rgba(10,31,77,.02);
	--ord-veil-2: rgba(10,31,77,.03);
	--ord-veil-3: rgba(10,31,77,.045);
	--ord-veil-4: rgba(10,31,77,.065);
	--ord-star-empty: rgba(10,31,77,.18);
	--ord-header-bg: rgba(247,248,252,0);
	--ord-header-bg-scrolled: rgba(255,255,255,.92);
	--ord-mobile-nav-bg: rgba(255,255,255,.99);
	--ord-map-filter: none;
	--ord-logo-card-bg: #FFFFFF;
	--ord-logo-card-bg-hover: #F2F6FF;
	--ord-logo-card-border: rgba(10,31,77,.10);

	color-scheme: light;
}

/* Smooth dark/light theme switching. Components with their own transition
   list (cards, buttons, etc.) declare background-color/border-color/color
   directly in that list — a second `transition` rule here would be silently
   overridden rather than merged, since transition is a shorthand. This rule
   only needs to cover elements that don't declare their own transition,
   which in practice is almost all plain text and a few simple containers. */
body, .ord-site-header, .ord-primary-nav, .ord-download-row, .ord-testimonial-card,
.ord-form-field input, .ord-form-field textarea,
h1, h2, h3, h4, h5, p, span, li, label, td, th {
	transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease), color .3s var(--ord-ease);
}

/* =============================================================
   Reset
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--ord-header-h); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body {
	margin: 0;
	background: var(--ord-bg);
	color: var(--ord-text);
	font-family: var(--ord-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
/* Icon sizing — ord_icon() SVGs ship without width/height attributes, so without
   this rule browsers fall back to their default replaced-element size (huge). */
svg.ord-icon { width: 22px; height: 22px; flex-shrink: 0; }
svg.ord-icon-sm { width: 16px; height: 16px; flex-shrink: 0; }
svg.ord-icon-xs { width: 13px; height: 13px; flex-shrink: 0; }
svg.ord-icon-lg { width: 40px; height: 40px; flex-shrink: 0; color: var(--ord-text-dim-2); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5 { font-family: var(--ord-font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; color: var(--ord-heading); }
p { margin: 0 0 1em; color: var(--ord-text-dim); }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; appearance: none; -webkit-appearance: none; }
input, textarea { font-family: inherit; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; }
.skip-link { top: -50px; left: 10px; position: fixed; z-index: 10000; background: var(--ord-primary); color: #fff; padding: 10px 18px; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 10px; position: fixed; clip: auto; width: auto; height: auto; }
:focus-visible { outline: 2px solid var(--ord-accent); outline-offset: 3px; border-radius: 4px; }

.ord-container { max-width: var(--ord-container); margin: 0 auto; padding: 0 clamp(16px, 4.2vw, 40px); position: relative; }
.ord-noise-overlay {
	position: fixed; inset: 0; pointer-events: none; z-index: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
}

/* =============================================================
   Header / Nav
   ============================================================= */
.ord-site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 500;
	height: var(--ord-header-h);
	display: flex; align-items: center;
	background: var(--ord-header-bg);
	border-bottom: 1px solid transparent;
	transition: background .35s var(--ord-ease), border-color .35s var(--ord-ease), height .3s var(--ord-ease);
}
.ord-site-header.is-scrolled {
	background: var(--ord-header-bg-scrolled);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom-color: var(--ord-border);
	height: 72px;
}
/* backdrop-filter creates a new containing block for position:fixed descendants —
   without this, the fixed mobile nav panel (a descendant of the header) would
   position itself relative to the header's own small box instead of the
   viewport as soon as the header is scrolled and gains backdrop-filter,
   collapsing the open menu to near-zero visible height. */
.ord-site-header.ord-nav-open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.ord-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* The header bar itself spans the full viewport width (unlike page content,
   which is capped at --ord-container and centered) so the logo and the
   actions cluster stay pinned to the true left/right edges of the screen on
   any width, instead of sitting inset once the screen is wider than the
   content container's 1220px cap. */
.ord-header-inner.ord-container { max-width: none; padding-left: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px); }

.ord-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ord-logo-mark { color: var(--ord-accent); display: flex; }
.ord-logo-mark svg { filter: drop-shadow(0 0 10px rgba(227,11,23,.45)); }
.ord-logo-text { font-family: var(--ord-font-display); font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.35rem); color: var(--ord-heading); letter-spacing: -.01em; white-space: nowrap; }
.ord-logo-text span { color: var(--ord-secondary); }
.custom-logo { max-height: 52px; width: auto; }

.ord-primary-nav { min-width: 0; }
.ord-primary-nav .nav-menu { display: flex; align-items: center; gap: clamp(0px, 0.4vw, 6px); }
.ord-primary-nav .nav-menu > li { flex-shrink: 0; }
/* The header is transparent until scrolled, so *by default* nav text just uses the
   normal theme color — correct for every interior page, since those only have a plain
   network-canvas header sitting on the page's own (light or dark) background, not a
   photo. The front-page hero slider and any page with an uploaded banner image ARE
   real photos though (reliably dark), so on those two cases only, force light nav
   text until scrolled — this is what was missing before, and forcing light text
   everywhere is what made the menu unreadable on plain light-theme interior pages. */
.ord-primary-nav .nav-menu > li > a {
	display: inline-block; white-space: nowrap;
	padding: 10px clamp(9px, 0.5vw + 6px, 16px); font-size: clamp(0.82rem, 0.7rem + 0.45vw, 0.945rem); font-weight: 500;
	color: var(--ord-text-dim);
	position: relative; border-radius: 999px; transition: color .25s, background .25s;
}
.ord-primary-nav .nav-menu > li > a::after {
	content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px;
	background: var(--ord-grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ord-ease);
}
.ord-primary-nav .nav-menu > li > a:hover,
.ord-primary-nav .nav-menu > li > a:focus-visible { color: var(--ord-heading); }
.ord-primary-nav .nav-menu > li > a:hover::after,
.ord-primary-nav .nav-menu > li > a:focus-visible::after,
.ord-primary-nav .nav-menu > li.current-menu-item > a::after { transform: scaleX(1); }
.ord-primary-nav .nav-menu > li.current-menu-item > a { color: var(--ord-heading); }

body.ord-home .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li > a,
body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li > a {
	color: rgba(255,255,255,.85);
}
body.ord-home .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li > a:hover,
body.ord-home .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li.current-menu-item > a,
body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li > a:hover,
body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-primary-nav .nav-menu > li.current-menu-item > a {
	color: #fff;
}
/* ...except the mobile dropdown panel itself, which always has its own solid,
   theme-matched background (see ord-mobile-nav-bg / .is-open below) — so once it's
   open, its links should always read with the normal theme color, never the
   forced-light one above. */
body.ord-home .ord-site-header:not(.is-scrolled) .ord-primary-nav.is-open .nav-menu > li > a,
body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-primary-nav.is-open .nav-menu > li > a {
	color: var(--ord-text-dim);
}

.ord-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }

.ord-theme-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ord-border-2);
	background: var(--ord-veil-2); color: var(--ord-text-dim); flex-shrink: 0;
	transition: color .25s, border-color .25s, background .25s, transform .25s var(--ord-ease);
}
.ord-theme-toggle:hover { color: var(--ord-heading); border-color: var(--ord-accent); transform: rotate(-8deg); }
.ord-theme-toggle .ord-theme-icon-moon { display: block; }
.ord-theme-toggle .ord-theme-icon-sun { display: none; }
:root[data-theme="light"] .ord-theme-toggle .ord-theme-icon-moon { display: none; }
:root[data-theme="light"] .ord-theme-toggle .ord-theme-icon-sun { display: block; }

.ord-menu-toggle {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 42px; height: 42px; border: 1px solid var(--ord-border-2); border-radius: 10px;
	background: var(--ord-veil-3); align-items: center;
	transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease);
}
.ord-menu-toggle span { width: 18px; height: 2px; background: var(--ord-heading); border-radius: 2px; transition: transform .3s var(--ord-ease), opacity .2s, background-color .3s var(--ord-ease); }
.ord-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ord-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ord-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Same reasoning as the nav links above: default to the normal theme color, and only
   force a light icon while floating transparently over a real photo hero (front-page
   slider, or a page with an uploaded banner) — never on a plain interior header. */
.ord-theme-toggle { color: var(--ord-text-dim); border-color: var(--ord-border-2); }
.ord-theme-toggle:hover { color: var(--ord-heading); }
.ord-menu-toggle span { background: var(--ord-text-dim); }
body.ord-home .ord-site-header:not(.is-scrolled) .ord-theme-toggle,
body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-theme-toggle {
	color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.35);
}
body.ord-home .ord-site-header:not(.is-scrolled) .ord-theme-toggle:hover,
body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-theme-toggle:hover {
	color: #fff;
}
body.ord-home .ord-site-header:not(.is-scrolled) .ord-menu-toggle span,
body:has(.ord-page-header.has-banner) .ord-site-header:not(.is-scrolled) .ord-menu-toggle span {
	background: rgba(255,255,255,.9);
}

/* =============================================================
   Buttons
   ============================================================= */
.ord-btn {
	display: inline-flex; align-items: center; gap: 9px; justify-content: center;
	padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: .95rem;
	border: 1px solid transparent; white-space: nowrap; transition: transform .25s var(--ord-ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
	position: relative; overflow: hidden; isolation: isolate;
	/* Edge fix: with a 1px transparent border, a gradient fill is clipped to the
	   padding box and tiled into the border area, leaving a hard, jagged ring of
	   the wrong colour around the pill. Painting the fill over the border box
	   (origin + clip) makes the gradient continuous to the very edge, and the
	   rounded corner is anti-aliased by one clip instead of two. */
	background-origin: border-box; background-clip: border-box;
	-webkit-font-smoothing: antialiased;
}
.ord-btn svg { width: 16px; height: 16px; transition: transform .3s var(--ord-ease); }
.ord-btn:hover svg { transform: translateX(3px); }
.ord-btn-primary { background: var(--ord-grad-brand); color: #FFFFFF; border-color: transparent; box-shadow: 0 8px 24px -8px rgba(42,99,216,.45); }
.ord-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(227,11,23,.55); }
.ord-btn-ghost { color: var(--ord-text); border-color: var(--ord-border-2); background: var(--ord-veil-2); }
.ord-btn-ghost:hover { border-color: var(--ord-accent); color: var(--ord-heading); background: rgba(227,11,23,.08); }
.ord-btn-outline { color: var(--ord-text); border-color: var(--ord-border-2); background: transparent; }
.ord-btn-outline:hover { border-color: var(--ord-secondary); color: var(--ord-secondary); background: var(--ord-veil-2); }
.ord-btn-sm { padding: 9px 18px; font-size: .85rem; }
.ord-btn-lg { padding: 16px 30px; font-size: 1rem; }
.ord-btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }

.ord-link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ord-secondary); font-weight: 600; }
.ord-link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ord-ease); }
.ord-link-arrow:hover svg { transform: translateX(4px); }

/* =============================================================
   Hero
   ============================================================= */
.ord-hero { position: relative; padding: calc(var(--ord-header-h) + 96px) 0 0; overflow: hidden; isolation: isolate; }
#ord-network-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .75; }
.ord-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; pointer-events: none; }
.ord-hero-glow-1 { width: 560px; height: 560px; top: -180px; right: -160px; background: radial-gradient(circle, rgba(227,11,23,.32), transparent 70%); }
.ord-hero-glow-2 { width: 460px; height: 460px; bottom: -220px; left: -140px; background: radial-gradient(circle, rgba(42,99,216,.22), transparent 70%); }

/* ---- Floating research decoration (book / glasses / pencil) ----
   Replaces the old plain glow blobs behind every interior-page hero,
   giving those headers a research-y feel instead of abstract shapes. */
.ord-floating-deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ord-float-item { position: absolute; color: var(--ord-secondary); opacity: .16; }
.ord-float-item svg { display: block; filter: drop-shadow(0 10px 24px rgba(0,0,0,.15)); }
.ord-float-book-1 { width: 150px; top: 14%; right: 8%; animation: ord-float-a 9s ease-in-out infinite; }
.ord-float-glasses { width: 110px; top: 58%; right: 22%; color: var(--ord-accent); opacity: .14; animation: ord-float-b 11s ease-in-out infinite; animation-delay: -3s; }
.ord-float-book-2 { width: 100px; top: 20%; left: 6%; animation: ord-float-b 10s ease-in-out infinite; animation-delay: -1.5s; }
.ord-float-pencil { width: 74px; top: 66%; left: 16%; color: var(--ord-accent); opacity: .15; animation: ord-float-a 8s ease-in-out infinite; animation-delay: -4s; }
.ord-float-book-3 { width: 84px; top: 78%; right: 12%; animation: ord-float-a 12s ease-in-out infinite; animation-delay: -6s; }
.ord-float-glasses-2 { width: 70px; top: 8%; left: 30%; color: var(--ord-accent); opacity: .12; animation: ord-float-b 9s ease-in-out infinite; animation-delay: -2s; }
@keyframes ord-float-a { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(3deg); } }
@keyframes ord-float-b { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(16px) rotate(-4deg); } }
@media (max-width: 720px) {
	.ord-float-book-1 { width: 100px; right: 2%; }
	.ord-float-glasses { width: 76px; right: 8%; }
	.ord-float-book-2, .ord-float-pencil, .ord-float-book-3, .ord-float-glasses-2 { display: none; }
}

.ord-hero-inner { max-width: 780px; text-align: left; padding-bottom: 64px; }
.ord-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; font-family: var(--ord-font-mono);
	font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ord-secondary);
	padding: 6px 14px; border: 1px solid rgba(42,99,216,.3); border-radius: 999px; background: rgba(42,99,216,.06);
}
.ord-hero-title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); margin: 22px 0 20px; }
.ord-text-gradient { background: var(--ord-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ord-hero-desc { max-width: 620px; font-size: 1.1rem; color: var(--ord-text-dim); }
.ord-hero-actions { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }

.ord-hero-stats { border-top: 1px solid var(--ord-border); background: var(--ord-veil-1); backdrop-filter: blur(6px); }
.ord-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ord-stat { padding: 30px 20px; text-align: center; border-right: 1px solid var(--ord-border); }
.ord-stat:last-child { border-right: none; }
.ord-stat-num { display: block; font-family: var(--ord-font-mono); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--ord-heading); }
.ord-stat-label { display: block; margin-top: 6px; font-size: .85rem; color: var(--ord-text-dim); }

/* =============================================================
   Sections
   ============================================================= */
.ord-main { position: relative; z-index: 2; }
.ord-section { padding: 76px 0; }
.ord-section-panel { background: linear-gradient(180deg, var(--ord-bg-alt), var(--ord-bg)); border-top: 1px solid var(--ord-border); border-bottom: 1px solid var(--ord-border); }

.ord-section-heading { max-width: 680px; margin: 0 auto 40px; }
.ord-section-heading.align-center { text-align: center; }
.ord-section-heading.align-left { text-align: left; margin-left: 0; }
.ord-section-heading h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 14px; }
.ord-section-heading p { font-size: 1.05rem; margin-top: 10px; }

.ord-lead { font-size: 1.08rem; color: var(--ord-text-dim); }
.ord-highlight { color: var(--ord-heading); font-family: var(--ord-font-display); font-size: 1.2rem; padding-left: 18px; border-left: 3px solid var(--ord-secondary); }

/* Page header (interior pages) */
.ord-page-header { padding: calc(var(--ord-header-h) + 52px) 0 44px; text-align: left; position: relative; overflow: hidden; isolation: isolate; }
.ord-page-header h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-top: 16px; }
.ord-page-subtitle { max-width: 620px; font-size: 1.08rem; }

.ord-page-header + .ord-section { padding-top: 24px; } /*added later*/

/* Service detail page header — icon sits between the eyebrow and title, so it
   needs its own explicit spacing rather than relying on h1's default
   margin-top (meant for eyebrow-directly-above-h1), since adjacent margins
   collapse to the larger value instead of adding together. */
.ord-service-detail-header h1 { margin-top: 0; }
.ord-service-detail-thumb {
	margin: 0 0 20px; border-radius: var(--ord-radius-lg); overflow: hidden;
}
.ord-service-detail-thumb img { width: 100%; height: auto; display: block; }

/* =============================================================
   Services grid
   ============================================================= */
.ord-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ord-service-card {
	background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius);
	padding: 32px 26px; transition: transform .35s var(--ord-ease), border-color .35s var(--ord-ease), background .35s var(--ord-ease), color .35s var(--ord-ease);
}
.ord-service-card:hover { transform: translateY(-6px); border-color: rgba(227,11,23,.4); background: var(--ord-panel-2); }
.ord-service-icon {
	width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(227,11,23,.18), rgba(42,99,216,.14)); color: var(--ord-accent); margin-bottom: 18px;
}
.ord-service-icon svg { width: 24px; height: 24px; }
.ord-service-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.ord-service-card p { font-size: .95rem; margin: 0; }
.ord-service-card-lg .ord-service-body { font-size: .95rem; }

/* Service detail page */
.ord-service-detail-icon {
	width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, rgba(227,11,23,.2), rgba(42,99,216,.16)); color: var(--ord-accent);
	margin: 24px 0 28px; box-shadow: 0 10px 26px -12px rgba(227,11,23,.35);
}
.ord-service-detail-icon svg { width: 28px; height: 28px; }

.ord-service-detail-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.ord-service-detail-content { max-width: none; }
.ord-service-detail-sidebar { position: sticky; top: calc(var(--ord-header-h) + 24px); display: flex; flex-direction: column; gap: 24px; }

.ord-benefit-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ord-benefit-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; color: var(--ord-text); }
.ord-benefit-list svg { color: var(--ord-secondary); margin-top: 3px; flex-shrink: 0; }

.ord-advantage-panel {
	padding: 28px; border-radius: var(--ord-radius); background: linear-gradient(160deg, rgba(227,11,23,.12), rgba(42,99,216,.08));
	border: 1px solid rgba(227,11,23,.25);
}
.ord-advantage-panel h3 { font-size: 1.15rem; margin: 8px 0 16px; }
.ord-advantage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ord-advantage-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--ord-text-dim); }
.ord-advantage-list svg { color: var(--ord-accent); margin-top: 2px; flex-shrink: 0; }

.ord-service-cta-panel { padding: 28px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); text-align: center; }
.ord-service-cta-panel h3 { font-size: 1.1rem; margin-bottom: 8px; }
.ord-service-cta-panel p { font-size: .88rem; margin-bottom: 18px; }
.ord-service-cta-panel .ord-btn { width: 100%; justify-content: center; }

/* =============================================================
   Why choose us
   ============================================================= */
.ord-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; }
.ord-why-grid h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-top: 12px; }
.ord-why-list { display: grid; gap: 18px; }
.ord-why-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: var(--ord-radius-sm); border: 1px solid var(--ord-border); background: var(--ord-veil-1); transition: border-color .3s, background .3s; }
.ord-why-item:hover { border-color: rgba(42,99,216,.35); background: rgba(42,99,216,.04); }
.ord-why-item svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--ord-secondary); margin-top: 2px; }
.ord-why-item h4 { font-size: 1rem; margin-bottom: 4px; }
.ord-why-item p { font-size: .9rem; margin: 0; }

/* =============================================================
   Testimonials
   ============================================================= */
.ord-testimonial-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ord-testimonial-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.ord-quote-icon { width: 30px; height: 30px; color: var(--ord-royal); opacity: .8; }
.ord-stars { display: flex; gap: 3px; }
.ord-star { fill: var(--ord-star-empty); color: transparent; }
.ord-star.is-filled { fill: #FFC94D; }
.ord-testimonial-quote { color: var(--ord-text); font-size: .98rem; flex-grow: 1; }
.ord-testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--ord-border); transition: border-color .3s var(--ord-ease); }
.ord-avatar-initials { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ord-grad-brand); color: #FFFFFF; font-weight: 700; font-family: var(--ord-font-display); flex-shrink: 0; }
.ord-avatar-lg { width: 84px; height: 84px; font-size: 1.4rem; }
.ord-avatar-img { width: 46px; height: 46px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--ord-logo-card-bg); display: flex; align-items: center; justify-content: center; }
/* Fill the circle edge-to-edge like .ord-team-photo, instead of floating a
   small contained logo inside it. */
.ord-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ord-testimonial-author strong { display: block; font-size: .92rem; color: var(--ord-heading); }
.ord-testimonial-author span { font-size: .82rem; color: var(--ord-text-dim); }

/* =============================================================
   FAQ Accordion
   ============================================================= */
.ord-faq-wrap { max-width: min(1100px, 100%); position: relative; }
.ord-faq-section .ord-container { overflow: visible; }
.ord-accordion-item { border-bottom: 1px solid var(--ord-border); transition: border-color .3s var(--ord-ease); }
.ord-accordion-trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
	background: none; border: none; color: var(--ord-heading); text-align: left; padding: 22px 4px; font-family: var(--ord-font-display); font-size: 1.05rem; font-weight: 600;
}
.ord-accordion-icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.ord-accordion-icon::before, .ord-accordion-icon::after { content: ''; position: absolute; background: var(--ord-secondary); border-radius: 2px; transition: transform .3s var(--ord-ease); }
.ord-accordion-icon::before { width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%); }
.ord-accordion-icon::after { width: 2px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.ord-accordion-trigger[aria-expanded="true"] .ord-accordion-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.ord-accordion-panel { overflow: hidden; padding-bottom: 22px; }
.ord-accordion-panel p { font-size: .96rem; margin: 0; }

/* =============================================================
   CTA
   ============================================================= */
.ord-cta { padding: 64px 0; position: relative; }
.ord-cta-inner {
	text-align: center; max-width: 680px; margin: 0 auto; padding: 60px 40px; border-radius: var(--ord-radius-lg);
	background: linear-gradient(135deg, rgba(227,11,23,.16), rgba(42,99,216,.10));
	border: 1px solid rgba(227,11,23,.28);
	position: relative; overflow: hidden;
}
.ord-cta-inner::before {
	content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 1px;
	background: var(--ord-grad-brand); opacity: .35;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.ord-cta-inner h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.ord-cta-inner .ord-btn { margin-top: 20px; }

/* =============================================================
   Footer
   ============================================================= */
.ord-site-footer { position: relative; padding: 80px 0 0; background: var(--ord-bg-alt); border-top: 1px solid var(--ord-border); overflow: hidden; transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease); }
.ord-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.ord-footer-tagline { font-size: .92rem; margin: 18px 0 20px; max-width: 280px; }
.ord-footer-tagline em { color: var(--ord-secondary); font-style: normal; }
.footer-widget-title { font-size: .95rem; color: var(--ord-heading); margin-bottom: 18px; }
.ord-footer-col ul li { margin-bottom: 11px; }
.ord-footer-col ul a { font-size: .9rem; color: var(--ord-text-dim); transition: color .2s; }
.ord-footer-col ul a:hover { color: var(--ord-secondary); }
.ord-footer-contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: .88rem; color: var(--ord-text-dim); }
.ord-footer-contact svg { flex-shrink: 0; margin-top: 2px; color: var(--ord-accent); }
.ord-footer-contact a { color: var(--ord-text-dim); }
.ord-footer-contact a:hover { color: var(--ord-heading); }

.ord-social-links { display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; }
.ord-social-links a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ord-border-2); display: flex; align-items: center; justify-content: center; color: var(--ord-text-dim); transition: all .25s; }
.ord-social-links a:hover { color: #FFFFFF; background: var(--ord-grad-brand); border-color: transparent; }
.ord-social-links svg { width: 17px; height: 17px; }
.ord-social-links-lg a { width: 46px; height: 46px; }

.ord-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 24px 0; border-top: 1px solid var(--ord-border); font-size: .84rem; color: var(--ord-text-dim-2); transition: border-color .3s var(--ord-ease), color .3s var(--ord-ease); }
.ord-footer-bottom p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ord-powered-by { display: inline-flex; align-items: center; gap: 4px; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--ord-border); color: var(--ord-text-dim-2); }
.ord-powered-by a { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px dotted currentColor; transition: color .2s var(--ord-ease); }
.ord-powered-by a:hover, .ord-powered-by a:focus-visible { color: var(--ord-accent); }
.ord-tm { font-size: .65em; vertical-align: super; margin-left: 1px; }
@media (max-width: 720px) {
	.ord-footer-bottom p { justify-content: center; }
	.ord-powered-by { padding-left: 0; margin-left: 0; border-left: 0; }
}
.ord-footer-legal { display: flex; gap: 22px; }
.ord-footer-legal a:hover { color: var(--ord-secondary); }
.ord-footer-wave { position: absolute; top: -1px; left: 0; right: 0; height: 140px; background: var(--ord-grad-glow); opacity: .5; pointer-events: none; }

.ord-back-to-top {
	position: fixed; right: 26px; bottom: 26px; z-index: 400; width: 46px; height: 46px; border-radius: 50%;
	background: var(--ord-grad-brand); color: #FFFFFF; border: none; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 26px -8px rgba(42,99,216,.5); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
	transition: opacity .3s, transform .3s var(--ord-ease);
}
.ord-back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* =============================================================
   About page
   ============================================================= */
.ord-about-hero { position: relative; }
.ord-about-content-wrap { position: relative; overflow: hidden; }
.ord-about-content-glow { width: 420px; height: 420px; right: -140px; top: 50%; transform: translateY(-50%); background: radial-gradient(circle, rgba(42,99,216,.20), transparent 70%); display: none; }
@media (min-width: 1300px) { .ord-about-content-glow { display: block; } }
.ord-section-tight-top { padding-top: 4px; }
.ord-values-grid, .ord-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ord-value-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); padding: 28px 26px; transition: transform .3s var(--ord-ease), border-color .3s var(--ord-ease), background-color .3s var(--ord-ease), color .3s var(--ord-ease), box-shadow .3s var(--ord-ease); }
.ord-value-card:hover { transform: translateY(-4px); border-color: rgba(42,99,216,.35); box-shadow: 0 16px 34px -20px rgba(0,0,0,.4); }
.ord-value-card svg { width: 26px; height: 26px; color: var(--ord-accent); margin-bottom: 16px; }
.ord-value-card h4 { font-size: 1.02rem; margin-bottom: 8px; letter-spacing: -.01em; }
.ord-value-card p { font-size: .9rem; line-height: 1.6; margin: 0; color: var(--ord-text-dim); }

.ord-process-card { padding: 30px 28px; border-radius: var(--ord-radius); background: var(--ord-veil-2); border: 1px solid var(--ord-border); transition: transform .3s var(--ord-ease), border-color .3s var(--ord-ease), background-color .3s var(--ord-ease); }
.ord-process-card:hover { transform: translateY(-4px); border-color: rgba(227,11,23,.3); }
.ord-process-card p { color: var(--ord-text); font-size: 1rem; line-height: 1.65; margin-top: 12px; }

.ord-timeline { display: flex; flex-direction: column; gap: 18px; max-width: min(1000px, 100%); border-left: 2px solid var(--ord-border); }
.ord-timeline-item {
	position: relative; margin-left: 32px; padding: 20px 24px;
	background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius);
	transition: transform .3s var(--ord-ease), border-color .3s var(--ord-ease), background-color .3s var(--ord-ease), box-shadow .3s var(--ord-ease);
}
.ord-timeline-item:hover { transform: translateX(4px); border-color: rgba(42,99,216,.3); box-shadow: 0 14px 30px -18px rgba(0,0,0,.4); }
.ord-timeline-item::before { content: ''; position: absolute; left: -39px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--ord-grad-brand); box-shadow: 0 0 0 4px var(--ord-bg); }
.ord-timeline-year { display: inline-block; font-family: var(--ord-font-mono); font-weight: 600; color: var(--ord-secondary); font-size: 1.05rem; margin-bottom: 8px; }
.ord-timeline-item p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--ord-text-dim); }

/* =============================================================
   Services page extras
   ============================================================= */
.ord-services-grid-detailed { grid-template-columns: repeat(2, 1fr); }
.ord-tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.ord-tag { font-size: .88rem; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ord-border-2); color: var(--ord-text-dim); background: var(--ord-veil-2); transition: all .2s; }
.ord-tag:hover { color: var(--ord-heading); border-color: var(--ord-secondary); }

/* =============================================================
   Team
   ============================================================= */
/* .ord-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ord-team-card { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); padding: 26px; text-align: center; transition: transform .3s var(--ord-ease), border-color .3s var(--ord-ease), background-color .3s var(--ord-ease), color .3s var(--ord-ease); } */

.ord-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
  gap: 22px;
  justify-content: center; /* centers the row when fewer cards */
}
.ord-team-card {
  background: var(--ord-panel);
  border: 1px solid var(--ord-border);
  border-radius: var(--ord-radius);
  padding: 26px;
  text-align: center;
  transition: transform .3s var(--ord-ease),
              border-color .3s var(--ord-ease),
              background-color .3s var(--ord-ease),
              color .3s var(--ord-ease);
}

.ord-team-card:hover { transform: translateY(-5px); border-color: rgba(227,11,23,.4); }
.ord-team-photo { width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ord-panel-2); }
.ord-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.ord-team-card h3 { font-size: 1.02rem; margin-bottom: 4px; }
.ord-team-role { font-size: .86rem; color: var(--ord-accent); margin-bottom: 10px; }
.ord-team-bio { font-size: .85rem; color: var(--ord-text-dim); margin-bottom: 10px; }
.ord-team-linkedin { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ord-border-2); align-items: center; justify-content: center; color: var(--ord-text-dim); }
.ord-team-linkedin:hover { color: #FFFFFF; background: var(--ord-grad-brand); border-color: transparent; }

/* Hierarchy groups */
.ord-team-groups { display: flex; flex-direction: column; gap: 56px; }
/* .ord-team-group-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } */


/* .ord-team-group-heading h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0; }
.ord-team-group-count { font-family: var(--ord-font-mono); font-size: .8rem; color: var(--ord-text-dim-2); padding: 4px 12px; border: 1px solid var(--ord-border-2); border-radius: 999px; } */

.ord-team-group-heading {
  display: flex;
  align-items: center;     /* aligns h2 and badge vertically */
  justify-content: center; /* centers the whole heading block horizontally */
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  text-align: center;
}

.ord-team-group-heading h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin: 0;
}

.ord-team-group-count {
  font-family: var(--ord-font-mono);
  font-size: .8rem;
  color: var(--ord-text-dim-2);
  padding: 4px 12px;
  border: 1px solid var(--ord-border-2);
  border-radius: 999px;
  display: inline-flex;    /* makes pill behave consistently */
  align-items: center;     /* centers text vertically inside pill */
  justify-content: center; /* centers text horizontally inside pill */
}


.ord-team-card { cursor: pointer; }
.ord-team-card:focus-visible { outline: 2px solid var(--ord-accent); outline-offset: 3px; }
.ord-team-readmore { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ord-secondary); margin-top: 4px; }
.ord-team-readmore svg { width: 13px; height: 13px; transition: transform .3s var(--ord-ease); }
.ord-team-card:hover .ord-team-readmore svg { transform: translateX(3px); }

.ord-avatar-xl { width: 100%; height: 100%; font-size: 2.6rem; border-radius: var(--ord-radius); }

/* Team bio modal — mirrors the video modal's open/close mechanics */
.ord-team-modal {
	position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
	padding: calc(var(--ord-header-h) + 20px) 24px 24px;
	opacity: 0; visibility: hidden; transition: opacity .3s var(--ord-ease), visibility 0s linear .3s;
	overflow: hidden;
}
.ord-team-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ord-ease); }
.ord-team-modal-backdrop { position: absolute; inset: 0; background: rgba(5,8,16,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ord-team-modal-inner {
	position: relative; width: 100%; max-width: 760px; max-height: calc(100vh - var(--ord-header-h) - 40px); overflow-y: auto;
	background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius-lg);
	box-shadow: 0 24px 64px -12px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
	transform: scale(.94) translateY(8px); transition: transform .3s var(--ord-ease), background-color .3s var(--ord-ease), border-color .3s var(--ord-ease);
}
.ord-team-modal.is-open .ord-team-modal-inner { transform: scale(1) translateY(0); }
.ord-team-modal-body { display: grid; grid-template-columns: 220px 1fr; align-items: start; }
.ord-team-modal-close.ord-team-modal-close {
	position: absolute; top: 16px; right: 16px; z-index: 3;
	background: var(--ord-veil-4); border: 1px solid var(--ord-border-2); color: var(--ord-heading);
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.ord-team-modal-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 36px; height: 36px; border-radius: 50%; background: var(--ord-veil-4); border: 1px solid var(--ord-border-2);
	color: var(--ord-heading); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.2);
	transition: background-color .2s, border-color .2s, transform .2s;
}
.ord-team-modal-nav:hover { border-color: var(--ord-accent); transform: translateY(-50%) scale(1.08); }
.ord-team-modal-prev { left: 12px; }
.ord-team-modal-next { right: 12px; }

/* Photo is a fixed, always-fully-visible square (like a profile picture) that
   stays pinned in view while the bio column scrolls, instead of a tall image
   force-cropped to fill the column. */
.ord-team-modal-photo {
	position: sticky; top: 0; z-index: 1;
	aspect-ratio: 1 / 1; width: 100%;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; background: var(--ord-panel-2);
	border-right: 1px solid var(--ord-border);
	border-top-left-radius: calc(var(--ord-radius-lg) - 1px);
	border-bottom-left-radius: calc(var(--ord-radius-lg) - 1px);
	box-shadow: 4px 0 20px -8px rgba(0,0,0,.3);
}
.ord-team-modal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ord-team-modal-photo .ord-avatar-initials { position: static; width: 68%; height: 68%; font-size: 2.2rem; }

/* The prev/next arrows are pinned (position: absolute + top: 50% of the
   scrollable box) to the same spot on screen no matter how far the bio
   text has scrolled underneath them — so the text column needs enough
   reserved right-hand space that a line can never run under the arrow. */
.ord-team-modal-info { padding: 30px 68px 32px 30px; }
.ord-team-modal-info h3 { font-size: 1.32rem; letter-spacing: -.01em; margin-bottom: 4px; }
.ord-team-modal-role {
	display: inline-flex; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
	color: var(--ord-accent); background: rgba(227,11,23,.12); border: 1px solid rgba(227,11,23,.25);
	border-radius: 999px; padding: 4px 12px; margin-bottom: 18px;
}
.ord-team-modal-expertise {
	font-size: .82rem; color: var(--ord-text-dim); margin-bottom: 22px; line-height: 1.5;
	background: var(--ord-panel-2); border: 1px solid var(--ord-border); border-radius: var(--ord-radius-sm);
	padding: 14px 16px;
}
.ord-team-modal-expertise strong { display: flex; align-items: center; gap: 6px; color: var(--ord-heading); margin-bottom: 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.ord-team-modal-bio { font-size: .92rem; line-height: 1.7; margin-bottom: 20px; }
.ord-team-modal-bio p { margin-bottom: 1em; }
.ord-team-modal-bio p:last-child { margin-bottom: 0; }

.ord-admin-note { margin-top: 26px; padding: 16px 20px; border-radius: var(--ord-radius-sm); border: 1px dashed var(--ord-border-2); font-size: .88rem; color: var(--ord-text-dim); }

/* =============================================================
   Careers
   ============================================================= */
.ord-jobs-list { display: flex; flex-direction: column; gap: 16px; }
.ord-job-card { display: flex; align-items: center; gap: 22px; padding: 26px; background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); transition: border-color .3s var(--ord-ease), transform .3s var(--ord-ease), background-color .3s var(--ord-ease), color .3s var(--ord-ease); }
.ord-job-card:hover { border-color: rgba(42,99,216,.35); transform: translateY(-3px); }
.ord-job-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: rgba(227,11,23,.12); display: flex; align-items: center; justify-content: center; color: var(--ord-accent); }
.ord-job-icon svg { width: 24px; height: 24px; }
.ord-job-info { flex-grow: 1; min-width: 0; }
.ord-job-info h3 { font-size: 1.1rem; margin-bottom: 6px; }
.ord-job-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: .82rem; color: var(--ord-text-dim); margin-bottom: 8px; font-family: var(--ord-font-mono); }
.ord-job-meta-single { margin: 18px 0 0; font-size: .84rem; }
.ord-service-detail-layout + .ord-job-apply { margin-top: 40px; }
.ord-job-meta span,
.ord-event-meta span,
.ord-event-detail-meta span,
.ord-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: rgba(227,11,23,.1); border: 1px solid rgba(227,11,23,.22); color: var(--ord-accent); line-height: 1.2; transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease), color .3s var(--ord-ease); }
.ord-pill-accent,
.ord-job-meta span:last-child:not(:only-child) { background: rgba(42,99,216,.1); border-color: rgba(42,99,216,.28); color: var(--ord-secondary); }
.ord-job-desc p { font-size: .92rem; margin: 0; }

/* =============================================================
   Downloads
   ============================================================= */
.ord-downloads-list { display: flex; flex-direction: column; gap: 14px; }
.ord-download-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 24px; background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); }
.ord-download-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: rgba(42,99,216,.14); color: var(--ord-royal); display: flex; align-items: center; justify-content: center; }
.ord-download-info { flex: 1 1 220px; min-width: 0; }
.ord-download-info h3 { font-size: 1rem; margin-bottom: 2px; overflow-wrap: break-word; }
.ord-download-info p { font-size: .86rem; margin: 0; overflow-wrap: break-word; }
.ord-download-btn { flex-shrink: 0; }
.ord-download-pending { flex-shrink: 0; font-size: .82rem; color: var(--ord-text-dim-2); font-style: italic; }

/* =============================================================
   Contact
   ============================================================= */
.ord-contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; }
.ord-contact-details { display: flex; flex-direction: column; gap: 20px; margin: 28px 0; }
.ord-contact-details li { display: flex; gap: 14px; align-items: flex-start; }
.ord-contact-details svg { width: 24px; height: 24px; color: var(--ord-secondary); flex-shrink: 0; margin-top: 2px; }
.ord-contact-details span:first-child { display: block; font-size: .8rem; color: var(--ord-text-dim-2); margin-bottom: 2px; }
.ord-contact-details a, .ord-contact-details div span:last-child { color: var(--ord-heading); font-size: 1rem; }

.ord-contact-form-wrap { background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius-lg); padding: 36px; }
.ord-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ord-form-field { margin-bottom: 18px; }
.ord-form-field label { display: block; font-size: .85rem; color: var(--ord-text-dim); margin-bottom: 8px; }
.ord-form-field input, .ord-form-field textarea {
	width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--ord-border-2);
	background: var(--ord-veil-3); color: var(--ord-heading); font-size: .95rem; transition: border-color .2s, background .2s;
	resize: vertical;
}
.ord-form-field input:focus, .ord-form-field textarea:focus { outline: none; border-color: var(--ord-accent); background: var(--ord-veil-4); }
.ord-hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.ord-form-submit { width: 100%; position: relative; }
.ord-btn-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; border-radius: 50%; animation: ord-spin .7s linear infinite; }
@keyframes ord-spin { to { transform: rotate(360deg); } }
.ord-form-status { margin-top: 14px; font-size: .9rem; min-height: 1.2em; }
.ord-form-status.is-success { color: var(--ord-secondary); }
.ord-form-status.is-error { color: #FF7A7A; }

/* =============================================================
   Our Work / Portfolio
   ============================================================= */
.ord-portfolio-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.ord-portfolio-filter {
	padding: 10px 20px; border-radius: 999px; border: 1px solid var(--ord-border-2);
	background: var(--ord-veil-2); color: var(--ord-text-dim); font-size: .87rem; font-weight: 600;
	transition: background .35s var(--ord-ease), border-color .3s var(--ord-ease), color .3s var(--ord-ease), transform .3s var(--ord-ease), box-shadow .35s var(--ord-ease);
}
.ord-portfolio-filter:hover { border-color: var(--ord-accent); color: var(--ord-heading); }
.ord-portfolio-filter.is-active { background: var(--ord-grad-brand); color: #FFFFFF; border-color: transparent; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(227,11,23,.55); backface-visibility: hidden; }

.ord-portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }

.ord-portfolio-card {
	position: relative; display: flex; flex-direction: column;
	border-radius: var(--ord-radius); overflow: hidden;
	background: var(--ord-panel); border: 1px solid var(--ord-border);
	transition: transform .35s var(--ord-ease), border-color .35s var(--ord-ease), background-color .35s var(--ord-ease), color .35s var(--ord-ease), opacity .35s var(--ord-ease), box-shadow .35s var(--ord-ease);
}
.ord-portfolio-card:hover { transform: translateY(-5px); border-color: rgba(227,11,23,.35); box-shadow: 0 16px 36px -18px rgba(0,0,0,.5); }
.ord-portfolio-card:hover, .ord-portfolio-card:focus-within { will-change: transform; }
.ord-portfolio-card:hover .ord-device-screen img { will-change: transform; }
.ord-portfolio-card.is-hidden { opacity: 0; transform: scale(.92); pointer-events: none; }

.ord-portfolio-media { position: relative; padding: 30px 30px 0; background: linear-gradient(160deg, var(--ord-panel-2), var(--ord-bg-alt)); flex-shrink: 0; }

/* Browser/laptop chassis frame around the screenshot */
.ord-device-frame {
	position: relative; border-radius: 10px 10px 3px 3px; overflow: hidden;
	background: linear-gradient(180deg, #1c2540, #10182a);
	border: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 26px 50px -26px rgba(0,0,0,.65);
	transition: transform .5s var(--ord-ease);
}
.ord-device-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; }
.ord-device-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); }
.ord-device-dot:nth-child(1) { background: #ff5f57; }
.ord-device-dot:nth-child(2) { background: #febc2e; }
.ord-device-dot:nth-child(3) { background: #28c840; }
.ord-device-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ord-logo-card-bg); }
.ord-device-screen img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: transform .6s var(--ord-ease); }
.ord-portfolio-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ord-text-dim-2); }
.ord-portfolio-placeholder svg { width: 34px; height: 34px; }
/* "Laptop base" ledge beneath the browser chassis */
.ord-device-frame::after {
	content: ''; display: block; height: 9px; margin: 0 -6px;
	background: linear-gradient(180deg, #1c2540, #0a0f1e);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 16px -8px rgba(0,0,0,.55);
}

.ord-portfolio-badge {
	position: absolute; top: 20px; left: 20px; z-index: 2;
	padding: 5px 12px; border-radius: 999px; font-size: .7rem; font-weight: 700;
	letter-spacing: .03em; text-transform: uppercase;
	background: var(--ord-grad-brand); color: #FFFFFF;
	box-shadow: 0 8px 18px -8px rgba(42,99,216,.55);
}

.ord-portfolio-play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
	width: 60px; height: 60px; border-radius: 50%;
	background: rgba(9,13,24,.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,.28); color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: transform .3s var(--ord-ease), background .3s;
}
.ord-portfolio-play svg { width: 20px; height: 20px; margin-left: 3px; }
.ord-portfolio-play:hover { transform: translate(-50%, -50%) scale(1.1); background: var(--ord-primary); border-color: transparent; }

/* pointer-events:none by default so the overlay never blocks clicks to what's
   underneath it (e.g. the video play button) — only its own interactive
   children opt back in. This matters most once the overlay expands to cover
   the whole card on hover (see the hover-mode block below). */
.ord-portfolio-overlay { position: relative; z-index: 1; padding: 26px 28px 26px; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.ord-portfolio-overlay a { pointer-events: auto; }
.ord-portfolio-client-logo { display: block; background: var(--ord-logo-card-bg); padding: 5px 12px; border-radius: 6px; height: 28px; width: auto; max-width: 140px; object-fit: contain; margin-bottom: 12px; transition: background-color .3s var(--ord-ease); }
.ord-portfolio-overlay h3 { font-size: 1.18rem; margin-bottom: 3px; }
.ord-portfolio-client { display: block; font-size: .85rem; margin-bottom: 10px; }
.ord-portfolio-desc { font-size: .92rem; line-height: 1.55; margin-bottom: 14px; }
.ord-portfolio-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; margin-bottom: 6px; }
.ord-portfolio-tag { display: inline-block; font-size: .74rem; padding: 4px 12px; border-radius: 999px; }
.ord-portfolio-overlay .ord-link-arrow { font-size: .9rem; margin-top: 6px; }

/* Static (touch / no-hover) context: the overlay sits in normal flow below
   the screenshot on the card's own background, so it should use the
   theme-aware text colors like the rest of the site. */
.ord-portfolio-client { color: var(--ord-accent); }
.ord-portfolio-desc { color: var(--ord-text-dim); }
.ord-portfolio-tag { background: var(--ord-veil-3); color: var(--ord-text-dim); }

/* Desktop enhancement: turn the always-visible info panel into a hover-reveal
   overlay on devices that actually support hover, so mouse users get the
   richer "hover to see details" interaction while touch users keep the
   static, always-visible version below the image. */
@media (hover: hover) and (pointer: fine) {
	.ord-portfolio-card:hover .ord-device-frame { transform: translateY(-4px); }
	.ord-portfolio-card:hover .ord-device-screen img { transform: scale(1.08); }
	.ord-portfolio-overlay {
		position: absolute; inset: 0; padding-top: 45%;
		background: linear-gradient(180deg, transparent 0%, rgba(6,10,20,.68) 35%, rgba(6,10,20,.97) 100%);
		opacity: 0; transform: translateY(8px);
		transition: opacity .35s var(--ord-ease), transform .35s var(--ord-ease);
	}
	.ord-portfolio-card:hover .ord-portfolio-overlay,
	.ord-portfolio-card:focus-within .ord-portfolio-overlay { opacity: 1; transform: translateY(0); }

	/* On this dark scrim, text must stay light regardless of site-wide theme —
	   the background here is always dark (it's an image overlay, not a themed
	   panel), so text tied to the light/dark text variables would go
	   dark-on-dark and disappear in light mode. */
	.ord-portfolio-overlay h3 { color: #fff; }
	.ord-portfolio-overlay .ord-portfolio-client { color: #BBD3FF; }
	.ord-portfolio-overlay .ord-portfolio-desc { color: rgba(255,255,255,.78); }
	.ord-portfolio-overlay .ord-portfolio-tag { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
}

/* Single project page layout */
.ord-project-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; }
.ord-project-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.ord-device-frame-lg { max-width: 100%; }
.ord-project-sidebar {
	display: flex; flex-direction: column; gap: 16px;
	padding: 28px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border);
	position: sticky; top: calc(var(--ord-header-h) + 24px);
}
.ord-project-client-logo { max-height: 40px; width: auto; max-width: 160px; object-fit: contain; background: var(--ord-logo-card-bg); padding: 6px 12px; border-radius: 8px; align-self: flex-start; transition: background-color .3s var(--ord-ease); }
.ord-project-meta-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--ord-border); }
.ord-project-meta-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.ord-project-meta-row span { font-size: .78rem; color: var(--ord-text-dim-2); text-transform: uppercase; letter-spacing: .04em; }
.ord-project-meta-row strong { font-size: .98rem; color: var(--ord-heading); font-weight: 600; }
.ord-project-content { max-width: none; }

/* Video lightbox modal */
.ord-video-modal {
	position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px;
	opacity: 0; visibility: hidden; transition: opacity .3s var(--ord-ease), visibility 0s linear .3s;
}
.ord-video-modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ord-ease); }
.ord-video-modal-backdrop { position: absolute; inset: 0; background: rgba(5,8,16,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* .ord-video-modal-inner { position: relative; width: 100%; max-width: min(1100px, 92vw); transform: scale(.94); transition: transform .3s var(--ord-ease); } */
.ord-video-modal-inner {
  position: relative;
  width: 100%;
  max-width: clamp(320px, 80vw, 800px);
  transform: scale(.94);
  transition: transform .3s var(--ord-ease);
}

.ord-video-modal.is-open .ord-video-modal-inner { transform: scale(1); }
/* Pinned to the modal's own corner (the modal covers the full viewport), not
   to .ord-video-modal-inner — so it can never end up above the visible area
   or get crowded out by the inner scrollbar when the media + description
   are taller than the screen (mainly a desktop-with-wide-frame scenario). */
.ord-video-modal-close {
	position: absolute; top: 20px; right: 24px; z-index: 5; width: 36px; height: 36px; border-radius: 50%;
	background: var(--ord-panel); border: 1px solid var(--ord-border-2); color: var(--ord-heading);
	display: flex; align-items: center; justify-content: center; transition: border-color .2s;
	box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.ord-video-modal-close:hover { border-color: var(--ord-accent); }
.ord-video-modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ord-radius); overflow: hidden; background: #000; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); }
.ord-video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Everything below the close button scrolls as ONE unit (the image and its
   caption/description share a single scrollbar — the description no longer
   has a scrollbar of its own, which used to stack two scrollbars on top of
   each other). overflow-x is explicitly hidden: setting overflow-y to
   "auto" alone makes browsers treat overflow-x as "auto" too, which was
   turning the prev/next arrows — placed just outside the media box — into
   a source of unwanted horizontal scrolling. */
.ord-video-modal-scroll { max-height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* Caption + optional longer description shown below the media, inside the modal */
.ord-gallery-modal-meta:empty { display: none; }
.ord-gallery-modal-meta {
	margin-top: 16px; padding: 16px 20px;
	background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius);
}
.ord-gallery-modal-caption { margin: 0; font-family: var(--ord-font-display); font-size: 1.05rem; font-weight: 600; color: var(--ord-heading); }
.ord-gallery-modal-desc { margin-top: 8px; font-size: .9rem; line-height: 1.65; color: var(--ord-text-dim); }
.ord-gallery-modal-desc p { margin-bottom: .8em; }
.ord-gallery-modal-desc p:last-child { margin-bottom: 0; }
.ord-gallery-modal-caption + .ord-gallery-modal-desc { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ord-border); }

/* Prev / next navigation between gallery items (hidden unless the modal was opened from the gallery grid and has more than one item).
   Tucked just inside the image edges (not floating out past .ord-video-modal-media) so they can never spill outside the scroll
   container and cause horizontal overflow, and so they stay visibly attached to the photo instead of drifting toward the screen edges
   on very wide/ultra-wide monitors. */
.ord-video-modal-media { position: relative; }
.ord-video-modal-nav { display: none; }
.ord-video-modal.has-nav .ord-video-modal-nav {
	display: flex; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 40px; height: 40px; border-radius: 50%; background: var(--ord-panel); border: 1px solid var(--ord-border-2);
	color: var(--ord-heading); align-items: center; justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.35);
	transition: background-color .2s, border-color .2s, transform .2s;
}
.ord-video-modal.has-nav .ord-video-modal-nav:hover { border-color: var(--ord-accent); transform: translateY(-50%) scale(1.08); }
.ord-video-modal-prev { left: 14px; }
.ord-video-modal-next { right: 14px; }
@media (max-width: 720px) {
	.ord-video-modal.has-nav .ord-video-modal-nav { width: 34px; height: 34px; }
	.ord-video-modal-prev { left: 8px; }
	.ord-video-modal-next { right: 8px; }
	.ord-gallery-modal-meta { padding: 14px 16px; }
}

/* =============================================================
   Our Clients
   ============================================================= */
/* .ord-clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ord-client-card {
	display: flex; align-items: center; justify-content: center; height: 140px; padding: 28px;
	background: rgba(255,255,255,.94); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
	border-radius: var(--ord-radius); border: 1px solid rgba(15,23,42,.06);
	box-shadow: 0 1px 2px rgba(15,23,42,.04);
	transition: transform .3s var(--ord-ease), box-shadow .3s var(--ord-ease), background-color .3s var(--ord-ease);
}
.ord-client-card:hover { transform: translateY(-4px); background: rgba(255,255,255,1); box-shadow: 0 18px 34px -18px rgba(0,0,0,.4); }
.ord-client-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ord-client-name { font-family: var(--ord-font-display); font-weight: 600; color: #1d2327; text-align: center; font-size: .95rem; } */

/* =============================================================
   Our Clients
   ============================================================= */
.ord-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 200px)); /* fixed width */
  gap: 24px;
  justify-content: center; /* centers when fewer cards */
  margin: 0 auto;          /* centers the whole block */
}

.ord-client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: 28px;
  background: var(--ord-logo-card-bg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--ord-radius);
  border: 1px solid var(--ord-logo-card-border);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .3s var(--ord-ease),
              box-shadow .3s var(--ord-ease),
              background-color .3s var(--ord-ease),
              border-color .3s var(--ord-ease);
}

.ord-client-card:hover {
  transform: translateY(-4px);
  background: var(--ord-logo-card-bg-hover);
  border-color: rgba(227,11,23,.45);
  box-shadow: 0 18px 34px -14px rgba(227,11,23,.35);
}

.ord-client-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ord-client-name {
  font-family: var(--ord-font-display);
  font-weight: 600;
  color: #1d2327;
  text-align: center;
  font-size: .95rem;
}


/* =============================================================
   Our Partners (grouped by category)
   ============================================================= */
/* .ord-partner-group { margin-bottom: 44px; }
.ord-partner-group:last-child { margin-bottom: 0; }
.ord-partner-group-title {
	font-size: 1rem; font-weight: 600; color: var(--ord-text-dim); margin: 0 0 20px;
	display: flex; align-items: center; gap: 14px;
}
.ord-partner-group-title::after { content: ''; flex: 1; height: 1px; background: var(--ord-border); } */

.ord-partner-group {
  margin-bottom: 44px;
}
.ord-partner-group:last-child {
  margin-bottom: 0;
}

.ord-partner-group-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ord-text-dim);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center; /* centers heading + line */
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}

.ord-partner-group-title::before,
.ord-partner-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ord-border);
}


/* =============================================================
   Blog / generic content
   ============================================================= */
.ord-blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.ord-blog-filter {
	padding: 10px 20px; border-radius: 999px; border: 1px solid var(--ord-border-2);
	background: var(--ord-veil-2); color: var(--ord-text-dim); font-size: .87rem; font-weight: 600;
	transition: background .35s var(--ord-ease), border-color .3s var(--ord-ease), color .3s var(--ord-ease), transform .3s var(--ord-ease), box-shadow .35s var(--ord-ease);
}
.ord-blog-filter:hover { border-color: var(--ord-accent); color: var(--ord-heading); }
.ord-blog-filter.is-active { background: var(--ord-grad-brand); color: #FFFFFF; border-color: transparent; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(227,11,23,.55); backface-visibility: hidden; }

.ord-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ord-blog-card {
	background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); overflow: hidden;
	transition: transform .35s var(--ord-ease), border-color .35s var(--ord-ease), background-color .35s var(--ord-ease), color .35s var(--ord-ease), opacity .35s var(--ord-ease), box-shadow .35s var(--ord-ease);
}
.ord-blog-card:hover { transform: translateY(-4px); border-color: rgba(227,11,23,.3); box-shadow: 0 16px 36px -18px rgba(0,0,0,.4); }
.ord-blog-card.is-hidden { opacity: 0; transform: scale(.92); pointer-events: none; }
.ord-blog-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--ord-veil-3); }
.ord-blog-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ord-ease); }
.ord-blog-card:hover .ord-blog-thumb img { transform: scale(1.035); }
.ord-blog-card-body { padding: 20px 22px 22px; }
.ord-blog-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.ord-blog-card p { font-size: .9rem; margin: 0 0 10px; }
.ord-blog-card .ord-link-arrow { margin-top: 2px; }
.ord-pagination { margin-top: 40px; text-align: center; }

.ord-blog-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-family: var(--ord-font-mono); font-size: .72rem; }
.ord-blog-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: var(--ord-veil-3); border: 1px solid var(--ord-border); color: var(--ord-text-dim-2); transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease); }
.ord-blog-meta-single { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ord-border); }
.ord-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.ord-prose img { border-radius: var(--ord-radius-sm); height: auto; margin: 1.4em 0; }
.ord-prose figure { margin: 1.4em 0; }
.ord-prose figcaption { font-size: .85rem; color: var(--ord-text-dim-2); text-align: center; margin-top: 8px; }

/* =============================================================
   Comments
   ============================================================= */
.ord-comments { max-width: min(1000px, 100%); margin: 56px auto 0; }
.ord-comments-title { font-size: 1.3rem; margin-bottom: 24px; }
.ord-comment-list, .ord-comment-list ol { list-style: none; margin: 0; padding: 0; }
.ord-comment-list .children { list-style: none; margin: 20px 0 0; padding: 0 0 0 32px; border-left: 1px solid var(--ord-border); }
.ord-comment { margin-bottom: 24px; }
.ord-comment-body { display: flex; gap: 14px; }
.ord-comment-avatar { flex-shrink: 0; }
.ord-comment-avatar img { width: 44px; height: 44px; border-radius: 50%; display: block; }
.ord-comment-content { flex: 1; min-width: 0; }
.ord-comment-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ord-comment-author { font-size: .95rem; color: var(--ord-heading); }
.ord-comment-date a { font-size: .78rem; color: var(--ord-text-dim-2); }
.ord-comment-date a:hover { color: var(--ord-secondary); }
.ord-comment-pending { font-size: .82rem; color: var(--ord-accent); font-style: italic; margin-bottom: 8px; }
.ord-comment-text { font-size: .92rem; color: var(--ord-text-dim); }
.ord-comment-text p { margin-bottom: .8em; }
.ord-comment-reply { margin-top: 8px; }
.ord-comment-reply a { font-size: .78rem; font-weight: 600; color: var(--ord-secondary); }
.ord-comment-reply a:hover { text-decoration: underline; }

.ord-comment-form-wrap { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--ord-border); }
.ord-comment-form-wrap #reply-title { font-size: 1.1rem; margin-bottom: 6px; }
.ord-comment-form-note { font-size: .85rem; color: var(--ord-text-dim-2); margin-bottom: 20px; }
.ord-comment-form-wrap .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .82rem; color: var(--ord-text-dim); }
.ord-comment-form-wrap .comment-form-cookies-consent input { margin: 0; }
#cancel-comment-reply-link { display: inline-block; margin-left: 12px; font-size: .82rem; color: var(--ord-text-dim-2); }
#cancel-comment-reply-link:hover { color: var(--ord-secondary); }

.ord-prose { max-width: none; margin-inline: auto; font-size: 1.02rem; }
.ord-prose h2, .ord-prose h3 { margin-top: 1.6em; }
.ord-prose > p, .ord-prose li { max-width: none; text-align: left; line-height: 1.75; }
.ord-prose > p:last-child { margin-bottom: 0; }
.ord-prose blockquote { max-width: none; }

/* A padded, bordered panel for text-heavy single-post/page content, so
   long-form copy doesn't just float loose in open space. Line length is
   capped on the paragraphs above (68ch) regardless of how wide the card
   itself is, so text stays comfortable to read even in a full-width card. */
.ord-text-card {
	background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius);
	padding: 44px clamp(24px, 5vw, 56px);
	transition: border-color .3s var(--ord-ease), background-color .3s var(--ord-ease);
}
.ord-text-card-lg { max-width: none; padding: clamp(28px, 4vw, 48px) clamp(24px, 6vw, 64px); }
@media (max-width: 600px) {
	.ord-text-card { padding: 28px 22px; }
	.ord-cta-inner { padding: 44px 26px; }
	.ord-cta-inner h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); line-height: 1.3; }
	.ord-cta-inner p { margin-top: 12px; }
	.ord-cta-inner .ord-btn { margin-top: 26px; width: 100%; }
}
@media (max-width: 900px) {
	.ord-cta .ord-container { padding: 0 24px; }
}

.ord-404 { padding: 160px 0 140px; position: relative; overflow: hidden; isolation: isolate; }
.ord-404-code { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 14px 0; }

/* =============================================================
   Scroll reveal
   ============================================================= */
.js .reveal-up { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .6s var(--ord-ease), transform .6s var(--ord-ease); transition-delay: calc(var(--d, 0) * 70ms); }
.js .reveal-up.is-visible { opacity: 1; transform: none; }

.ord-form-field input[type="file"] {
	padding: 10px 14px; font-size: .88rem; color: var(--ord-text-dim);
}
.ord-form-field input[type="file"]::-webkit-file-upload-button {
	margin-right: 12px; padding: 7px 14px; border-radius: 999px; border: none;
	background: var(--ord-grad-brand); color: #FFFFFF; font-weight: 600; font-size: .82rem; cursor: pointer;
}
.ord-field-hint { font-weight: 400; color: var(--ord-text-dim-2); font-size: .78rem; }
.ord-file-error { color: #FF7A7A; font-size: .82rem; margin: 8px 0 0; }
.ord-form-field.has-error input,
.ord-form-field.has-error input[type="file"] { border-color: #FF7A7A; }

.ord-job-apply { margin-top: 20px; padding: 22px; border-radius: var(--ord-radius); background: var(--ord-veil-2); border: 1px solid var(--ord-border); }
.ord-job-apply .ord-form-submit { width: auto; padding: 12px 26px; }
.ord-apply-toggle[aria-expanded="true"] { border-color: var(--ord-secondary); color: var(--ord-secondary); }
.ord-apply-toggle { flex-shrink: 0; }

.ord-job-apply-animated { opacity: 0; transform: translateY(-10px); transition: opacity .35s var(--ord-ease), transform .35s var(--ord-ease); }
.ord-job-apply-animated.is-open { opacity: 1; transform: translateY(0); }
.ord-job-full-desc { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--ord-border); }
.ord-job-full-desc:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.ord-map-embed { border-radius: var(--ord-radius); overflow: hidden; border: 1px solid var(--ord-border); line-height: 0; }
.ord-map-embed iframe { display: block; filter: var(--ord-map-filter); }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1080px) {
	.ord-services-grid { grid-template-columns: repeat(2, 1fr); }
	.ord-testimonial-track { grid-template-columns: repeat(2, 1fr); }
	.ord-team-grid { grid-template-columns: repeat(3, 1fr); }
	.ord-portfolio-grid { gap: 24px; }
	.ord-footer-grid { grid-template-columns: 1fr 1fr; }
	.ord-clients-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.ord-container { padding: 0 20px; }
	.ord-why-grid, .ord-contact-grid, .ord-project-layout, .ord-service-detail-layout { grid-template-columns: 1fr; gap: 36px; }
	.ord-service-detail-sidebar { position: static; }
	.ord-team-modal-body { grid-template-columns: 1fr; }
	.ord-comment-list .children { padding-left: 16px; }
	.ord-comment-avatar img { width: 36px; height: 36px; }
	.ord-team-modal-photo { position: static; width: 148px; aspect-ratio: 1 / 1; margin: 24px auto 0; border-radius: 50%; border: 2px solid var(--ord-border-2); box-shadow: 0 8px 24px -6px rgba(0,0,0,.35); }
	.ord-team-modal-photo img { object-fit: cover; }
	.ord-team-modal-photo .ord-avatar-initials { border-radius: 50%; }
	.ord-team-modal-prev { left: 8px; }
	.ord-team-modal-next { right: 8px; }
	.ord-team-modal-info { padding: 16px 24px 28px; text-align: center; }
	.ord-team-modal-expertise { text-align: left; }
	.ord-team-modal-bio { text-align: left; }
	.ord-project-sidebar { position: static; }
	.ord-values-grid, .ord-process-grid { grid-template-columns: repeat(2, 1fr); }
	.ord-services-grid-detailed { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
	.ord-stats-grid { grid-template-columns: 1fr; }
	.ord-stat { border-right: none; border-bottom: 1px solid var(--ord-border); }
	.ord-stat:last-child { border-bottom: none; }
	.ord-services-grid, .ord-testimonial-track, .ord-team-grid, .ord-blog-grid, .ord-portfolio-grid, .ord-clients-grid { grid-template-columns: 1fr; }
	.ord-values-grid, .ord-process-grid { grid-template-columns: 1fr; }
	.ord-footer-grid { grid-template-columns: 1fr; text-align: center; }
	.ord-footer-brand { display: flex; flex-direction: column; align-items: center; }
	.ord-footer-col ul { padding: 0; }
	.ord-footer-contact li { justify-content: center; }
	.ord-social-links { justify-content: center; row-gap: 10px; }
	.ord-footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
	.ord-footer-legal { justify-content: center; }
	.ord-form-row { grid-template-columns: 1fr; }
	.ord-job-card { flex-direction: column; align-items: flex-start; }
	.ord-download-row { flex-direction: column; align-items: stretch; text-align: center; }
	.ord-download-icon { margin: 0 auto; }
	.ord-download-info { text-align: center; }
	.ord-download-btn { width: 100%; justify-content: center; }
	.ord-hero-title { font-size: clamp(2rem, 8vw, 2.6rem); }
	.ord-section { padding: 52px 0; }
}
@media (max-width: 380px) {
	.ord-social-links a { width: 34px; height: 34px; }
	.ord-social-links { gap: 8px; }
}

/* =============================================================
   Events (mirrors the Careers list/detail pattern)
   ============================================================= */
.ord-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ord-event-card {
	display: flex; flex-direction: column; background: var(--ord-panel); border: 1px solid var(--ord-border);
	border-radius: var(--ord-radius); overflow: hidden;
	transition: transform .35s var(--ord-ease), border-color .35s var(--ord-ease), background-color .35s var(--ord-ease), box-shadow .35s var(--ord-ease);
}
.ord-event-card:hover { transform: translateY(-5px); border-color: rgba(42,99,216,.35); box-shadow: 0 18px 38px -20px rgba(0,0,0,.5); }
.ord-event-media { position: relative; aspect-ratio: 16/10; background: var(--ord-logo-card-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background-color .3s var(--ord-ease); }
.ord-event-media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.ord-event-date-badge {
	position: absolute; top: 14px; left: 14px; z-index: 2; text-align: center;
	background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius-sm);
	padding: 8px 12px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); line-height: 1.1;
}
.ord-event-date-badge .ord-event-day { display: block; font-family: var(--ord-font-display); font-weight: 700; font-size: 1.15rem; color: var(--ord-heading); }
.ord-event-date-badge .ord-event-mon { display: block; font-family: var(--ord-font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ord-accent); margin-top: 2px; }
.ord-event-body { padding: 20px 22px 24px; flex-grow: 1; display: flex; flex-direction: column; }
.ord-event-body h3 { font-size: 1.08rem; margin: 0 0 10px; }
.ord-event-body h3 a { color: inherit; }
.ord-event-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.ord-event-meta span { font-size: .74rem; padding: 5px 12px; }

.ord-event-detail-layout { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 48px; align-items: start; }
.ord-event-detail-media { background: var(--ord-logo-card-bg); border-radius: var(--ord-radius); border: 1px solid var(--ord-logo-card-border); padding: 24px; display: flex; align-items: center; justify-content: center; transition: background-color .3s var(--ord-ease), border-color .3s var(--ord-ease); }
.ord-event-detail-media img { width: 100%; height: auto; object-fit: contain; }
.ord-event-detail-meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; }
.ord-event-detail-meta span { font-size: .88rem; padding: 8px 16px; }
.ord-event-detail-meta span svg { flex-shrink: 0; }
.ord-event-empty { padding: 60px 24px; text-align: center; border: 1px dashed var(--ord-border-2); border-radius: var(--ord-radius); color: var(--ord-text-dim); }

@media (max-width: 900px) {
	.ord-events-grid { grid-template-columns: repeat(2, 1fr); }
	.ord-event-detail-layout { grid-template-columns: 1fr; gap: 30px; }
		.ord-cta { padding-top: 44px; }
}
@media (max-width: 720px) {
	.ord-events-grid { grid-template-columns: 1fr; }
}

/* Page scroll progress bar — thin gradient line pinned to the very top,
   above the header, filling left-to-right as the visitor scrolls down. */
.ord-scroll-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999;
	background: transparent; pointer-events: none;
}
.ord-scroll-progress span {
	display: block; height: 100%; width: 0%;
	background: var(--ord-grad-brand);
	transition: width .1s linear;
}


/* =============================================================
   ORD additions
   ============================================================= */

/* ---- Logo (image, theme-aware) ---- */
.ord-logo { gap: 12px; }
.ord-logo-img { display: block; height: 56px; width: auto; max-width: none; }
.ord-logo .ord-logo-dark { display: block; }
.ord-logo .ord-logo-light { display: none; }
:root[data-theme="light"] .ord-logo .ord-logo-dark { display: none; }
:root[data-theme="light"] .ord-logo .ord-logo-light { display: block; }
.ord-site-header.is-scrolled .ord-logo-img { height: 46px; }
.ord-logo-img { transition: height .3s var(--ord-ease); }
.ord-footer-brand .ord-logo-img { height: 84px; }
.custom-logo { max-height: 56px; width: auto; }
.ord-logo-text { line-height: 1.1; }
.ord-logo-text small { display: block; font-family: var(--ord-font-body); font-size: .62rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ord-text-dim); }

/* ---- Primary nav: dropdown sub-menus (desktop) ---- */
.ord-primary-nav .nav-menu { gap: 0; flex-wrap: nowrap; }
.ord-primary-nav .nav-menu > li { position: relative; }
.ord-primary-nav .nav-menu > li > a { padding: 10px clamp(7px, .55vw, 12px); font-size: clamp(.8rem, .5vw + .5rem, .9rem); }
.ord-primary-nav .nav-menu > li > a::after { left: 10px; right: 10px; }
.ord-primary-nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 240px; padding: 8px;
	background: var(--ord-panel); border: 1px solid var(--ord-border-2); border-radius: var(--ord-radius);
	box-shadow: 0 24px 50px -20px rgba(0,0,0,.5);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s var(--ord-ease), transform .25s var(--ord-ease), visibility .2s;
	z-index: 20;
}
.ord-primary-nav .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.ord-primary-nav .menu-item-has-children:hover > .sub-menu,
.ord-primary-nav .menu-item-has-children:focus-within > .sub-menu,
.ord-primary-nav .menu-item-has-children.is-expanded > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ord-primary-nav .sub-menu a {
	display: block; padding: 10px 14px; border-radius: 10px; font-size: .88rem; color: var(--ord-text-dim); white-space: nowrap;
	transition: background .2s, color .2s;
}
.ord-primary-nav .sub-menu a:hover, .ord-primary-nav .sub-menu a:focus-visible { background: var(--ord-veil-4); color: var(--ord-heading); }
.ord-primary-nav .sub-menu li.current-menu-item > a { color: var(--ord-accent); }
.ord-primary-nav .nav-menu > li:nth-last-child(-n+3) > .sub-menu { left: auto; right: 0; }
.ord-primary-nav .ord-menu-cta > a { background: var(--ord-grad-brand); color: #fff !important; margin-left: 6px; padding: 10px clamp(20px, 1.8vw, 30px); border-radius: 999px; will-change: transform; backface-visibility: hidden; }
.ord-primary-nav .ord-menu-cta > a::after { display: none; }
.ord-primary-nav .ord-menu-cta > a:hover { box-shadow: 0 8px 22px -8px rgba(227,11,23,.6); }
/* Join Us now lives in .ord-header-actions (see .ord-header-cta below) instead of inside the nav list. */
.ord-primary-nav .ord-menu-cta { display: none; }
.ord-submenu-toggle { display: none; }

/* ---- Header "Join Us" CTA: sits in the actions cluster, right after the theme toggle ---- */
.ord-header-cta.ord-header-cta {
	padding: 11px clamp(22px, 2vw, 32px);
	font-size: .92rem;
	white-space: nowrap;
	flex-shrink: 0;
}

@media (max-width: 1180px) {
	.ord-header-inner { justify-content: space-between; }
	.ord-header-inner .ord-logo { margin-right: auto; }
	.ord-header-actions { margin-left: auto; }
	.ord-primary-nav {
		position: absolute; top: calc(100% + 10px); left: 2px; right: 2px;
		max-height: min(76vh, 520px); overflow-y: auto;
		background: var(--ord-mobile-nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
		border: 1px solid var(--ord-border); border-radius: var(--ord-radius);
		box-shadow: 0 28px 60px -20px rgba(0,0,0,.55);
		transform: translateY(-10px) scale(.98); opacity: 0; pointer-events: none;
		transition: transform .3s var(--ord-ease), opacity .25s var(--ord-ease), background-color .3s var(--ord-ease), border-color .3s var(--ord-ease);
		padding: 12px 8px;
	}
	.ord-primary-nav.is-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
	.ord-primary-nav .nav-menu { flex-direction: column; align-items: stretch; padding: 4px; gap: 3px; }
	.ord-primary-nav .nav-menu > li > a { display: block; padding: 14px 18px; font-size: 1.02rem; border-radius: var(--ord-radius-sm); }
	.ord-primary-nav .nav-menu > li > a:hover,
	.ord-primary-nav .nav-menu > li > a:focus-visible { background: var(--ord-veil-3); }
	.ord-btn.ord-mobile-nav-cta { display: flex; align-items: center; justify-content: center; margin: 10px 8px 4px; padding: 14px 20px; }
	.ord-menu-toggle { display: flex; }
	.ord-header-actions { gap: 8px; }
	.ord-header-cta.ord-header-cta { padding: 9px clamp(14px, 4vw, 22px); font-size: .82rem; }
	.ord-container { padding: 0 20px; }
	.ord-primary-nav .nav-menu > li > a::after { display: none; }
	.ord-primary-nav .menu-item-has-children > a { padding-right: 56px; }
	.ord-primary-nav .menu-item-has-children > a::before { display: none; }
	.ord-primary-nav .menu-item-has-children { position: relative; }
	.ord-submenu-toggle {
		display: flex; position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; align-items: center; justify-content: center;
		border-radius: 10px; color: var(--ord-text-dim);
	}
	.ord-submenu-toggle::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); transition: transform .25s var(--ord-ease); }
	.is-expanded > .ord-submenu-toggle::before { transform: rotate(225deg) translate(-2px,-2px); }
	.ord-primary-nav .sub-menu {
		position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent;
		padding: 0 0 6px 14px; display: none; border-left: 2px solid var(--ord-border-2); margin: 0 0 6px 20px;
	}
	.ord-primary-nav .sub-menu::before { display: none; }
	.ord-primary-nav .is-expanded > .sub-menu { display: block; }
	.ord-primary-nav .menu-item-has-children:hover > .sub-menu { display: none; }
	.ord-primary-nav .menu-item-has-children.is-expanded:hover > .sub-menu { display: block; }
	.ord-primary-nav .sub-menu a { white-space: normal; padding: 11px 12px; font-size: .95rem; }
	.ord-primary-nav .ord-menu-cta > a { margin: 8px 6px 4px; text-align: center; padding: 14px 18px; }
	.ord-primary-nav { max-height: min(80vh, 640px); }
}

/* ---- Hero slider ---- */
.ord-slider { position: relative; isolation: isolate; overflow: hidden; background: var(--ord-navy); color: #fff; }
.ord-slider-track { position: relative; height: clamp(520px, 82vh, 780px); min-height: 520px; }
.ord-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ord-ease), visibility .9s; display: flex; align-items: center; }
.ord-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.ord-slide-media, .ord-slide-media picture, .ord-slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ord-slide-media img { object-fit: cover; object-position: var(--focus, center); transform: scale(1.06); transition: transform 7s linear; max-width: none; }
.ord-slide.is-active .ord-slide-media img { transform: scale(1); }
.ord-slide-media::after { content: ''; position: absolute; inset: 0; background:
	linear-gradient(90deg, rgba(5,14,38,.88) 0%, rgba(5,14,38,.62) 45%, rgba(5,14,38,.18) 100%),
	linear-gradient(0deg, rgba(5,14,38,.55), transparent 40%); }
/* No-image fallback art: brand gradient + big check-mark motif from the logo */
.ord-slide-art { position: absolute; inset: 0; background:
	radial-gradient(60% 80% at 85% 20%, rgba(227,11,23,.45), transparent 60%),
	radial-gradient(70% 70% at 10% 90%, rgba(42,99,216,.45), transparent 60%),
	linear-gradient(135deg, #071633 0%, #0A2C6B 100%); }
.ord-slide-art::before { content: ''; position: absolute; inset: 0; opacity: .12; background-image:
	linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
	background-size: 56px 56px; mask-image: radial-gradient(circle at 70% 40%, #000, transparent 70%); -webkit-mask-image: radial-gradient(circle at 70% 40%, #000, transparent 70%); }
.ord-slide-art::after { content: ''; position: absolute; right: 6%; bottom: -8%; width: min(46vw, 520px); aspect-ratio: 1; opacity: .9;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M6 56c6 1 12 6 18 17 12-30 34-52 70-66-30 20-46 46-58 90-4-2-8-12-16-24-4-8-9-13-14-17Z' fill='%23E30B17'/%3E%3C/svg%3E") no-repeat center / contain;
	filter: drop-shadow(0 20px 40px rgba(227,11,23,.35)); }
.ord-slide-art-2 { background:
	radial-gradient(60% 80% at 15% 15%, rgba(227,11,23,.4), transparent 60%),
	radial-gradient(70% 70% at 90% 90%, rgba(42,99,216,.5), transparent 60%),
	linear-gradient(225deg, #071633 0%, #0A2C6B 100%); }
.ord-slide-art-3 { background:
	radial-gradient(60% 80% at 50% 0%, rgba(227,11,23,.35), transparent 60%),
	radial-gradient(80% 70% at 0% 100%, rgba(42,99,216,.55), transparent 60%),
	linear-gradient(180deg, #071633 0%, #0B3382 100%); }
.ord-slide-inner { position: relative; z-index: 3; padding-top: var(--ord-header-h); padding-bottom: 96px; }
.ord-slide-copy { max-width: 720px; }
.ord-slide .ord-eyebrow { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.ord-slide-title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 22px 0 18px; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.ord-slide-desc { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 600px; }
.ord-slide .ord-btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }
.ord-slide .ord-btn-ghost:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; }
.ord-slide .ord-hero-actions { margin-top: 28px; }
.ord-slide.is-active .ord-slide-copy > * { animation: ord-slide-in .8s var(--ord-ease) both; }
.ord-slide.is-active .ord-slide-copy > *:nth-child(2) { animation-delay: .1s; }
.ord-slide.is-active .ord-slide-copy > *:nth-child(3) { animation-delay: .2s; }
.ord-slide.is-active .ord-slide-copy > *:nth-child(4) { animation-delay: .3s; }
@keyframes ord-slide-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.ord-slider-controls { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 5; }
.ord-slider-controls .ord-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ord-slider-dots { display: flex; gap: 10px; }
.ord-slider-dot { width: 34px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; padding: 0; }
.ord-slider-dot::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.ord-slider-dot.is-active::after { transform: scaleX(1); }
.ord-slider.is-playing .ord-slider-dot.is-active::after { animation: ord-dot-fill var(--interval, 6500ms) linear both; }
@keyframes ord-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ord-slider-arrows { display: flex; gap: 10px; }
.ord-slider-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(5,14,38,.45); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: background .25s, transform .25s var(--ord-ease); }
.ord-slider-arrow:hover { background: var(--ord-primary); border-color: var(--ord-primary); transform: scale(1.06); }
.ord-slider-arrow svg { width: 18px; height: 18px; }
.ord-slider-pause { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(5,14,38,.45); color: #fff; display: flex; align-items: center; justify-content: center; }
.ord-slider-pause svg { width: 16px; height: 16px; }
.ord-slider-pause .ord-icon-play { display: none; }
.ord-slider.is-paused .ord-slider-pause .ord-icon-play { display: block; }
.ord-slider.is-paused .ord-slider-pause .ord-icon-pause { display: none; }
.ord-slider-actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 720px) {
	.ord-slider-track { height: clamp(560px, 88vh, 700px); }
	.ord-slide-inner { padding-bottom: 120px; }
	.ord-slider-arrow, .ord-slider-pause { width: 40px; height: 40px; }
	.ord-slider-dot { width: 22px; }
	.ord-slide-media::after { background: linear-gradient(0deg, rgba(5,14,38,.92) 0%, rgba(5,14,38,.55) 60%, rgba(5,14,38,.35) 100%); }
	.ord-slide-art::after { opacity: .35; right: -10%; }
}

/* ---- Stats strip beneath slider ---- */
.ord-stats-strip { background: var(--ord-panel); border-bottom: 1px solid var(--ord-border); }
.ord-stats-strip .ord-stats-grid { grid-template-columns: repeat(3, 1fr); }
.ord-stats-strip .ord-stat { padding: 26px 16px; }
.ord-stats-strip .ord-stat-num { font-family: var(--ord-font-display); color: var(--ord-accent); }

/* ---- Inner page banner (with optional uploaded image) ---- */
.ord-page-header.has-banner { padding-bottom: 64px; min-height: 300px; display: flex; align-items: flex-end; color: #fff; }
.ord-page-header.has-banner .ord-container { width: 100%; }
.ord-banner-media, .ord-banner-media img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.ord-banner-media img { object-fit: cover; object-position: var(--focus, center); max-width: none; }
.ord-banner-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,14,38,.9), rgba(5,14,38,.55) 55%, rgba(5,14,38,.25)); }
.ord-page-header.has-banner h1 { color: #fff; }
.ord-page-header.has-banner .ord-page-subtitle { color: rgba(255,255,255,.88); }
.ord-page-header.has-banner .ord-eyebrow { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.ord-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; font-size: .82rem; color: var(--ord-text-dim-2); }
.ord-breadcrumb a:hover { color: var(--ord-accent); }
.ord-page-header.has-banner .ord-breadcrumb, .ord-page-header.has-banner .ord-breadcrumb a { color: rgba(255,255,255,.75); }

/* ---- Collaboration section ---- */
.ord-collab-points { display: grid; gap: 14px; margin-top: 26px; }
.ord-collab-point { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--ord-border); border-radius: var(--ord-radius); background: var(--ord-panel); }
.ord-collab-point svg { color: var(--ord-accent); margin-top: 2px; }
.ord-collab-point h4 { margin: 0 0 2px; font-size: 1rem; }
.ord-collab-point p { margin: 0; font-size: .9rem; }
.ord-partners-note { text-align: center; margin-top: 18px; }

/* ---- About: vision / mission / objectives / values ---- */
.ord-vmov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ord-vmov-card { position: relative; padding: 32px 30px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); overflow: hidden; }
.ord-vmov-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ord-grad-brand); }
.ord-vmov-card .ord-service-icon { margin-bottom: 14px; }
.ord-vmov-card h3 { font-size: 1.3rem; }
.ord-vmov-card p { margin: 0; font-size: 1rem; }
@media (max-width: 720px) { .ord-vmov-grid { grid-template-columns: 1fr; } }

/* ---- Team page: group anchors ---- */
.ord-team-group { scroll-margin-top: calc(var(--ord-header-h) + 20px); }
.ord-team-empty { padding: 36px; text-align: center; border: 1px dashed var(--ord-border-2); border-radius: var(--ord-radius); color: var(--ord-text-dim); }

/* ---- Filter chips row / sub-navigation ---- */
.ord-subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.ord-subnav a { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--ord-border-2); font-size: .88rem; color: var(--ord-text-dim); transition: all .25s; }
.ord-subnav a:hover, .ord-subnav a.is-active { color: #fff; background: var(--ord-grad-brand); border-color: transparent; }

/* ---- Hub cards (Resources / Publications) ---- */
.ord-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ord-hub-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); transition: transform .3s var(--ord-ease), border-color .3s, background-color .3s; }
.ord-hub-card:hover { transform: translateY(-5px); border-color: rgba(227,11,23,.4); background: var(--ord-panel-2); }
.ord-hub-card h3 { margin: 0; font-size: 1.15rem; }
.ord-hub-card p { margin: 0; font-size: .92rem; flex-grow: 1; }
@media (max-width: 900px) { .ord-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ord-hub-grid { grid-template-columns: 1fr; } }

/* ---- Publications / catalogue list ---- */
.ord-pub-list { display: grid; gap: 16px; }
.ord-pub-row { display: flex; gap: 24px; align-items: center; padding: 24px 28px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); transition: border-color .3s, transform .3s var(--ord-ease); }
.ord-pub-row:hover { border-color: rgba(227,11,23,.35); transform: translateY(-2px); }
/* object-fit: contain (not cover) so an uploaded cover/brochure image is always shown
   in full, whatever its own aspect ratio — cropping it to a fixed frame was cutting
   off most of the artwork. */
.ord-pub-cover { width: 96px; height: 118px; border-radius: 8px; overflow: hidden; background: var(--ord-logo-card-bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ord-text-dim-2); padding: 6px; }
.ord-pub-cover img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ord-pub-info { flex: 1; min-width: 0; }
.ord-pub-info h3 { font-size: 1.08rem; margin: 0 0 6px; }
.ord-pub-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .82rem; color: var(--ord-text-dim-2); margin-bottom: 8px; }
.ord-pub-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ord-pub-info p { font-size: .92rem; margin: 0; }
.ord-pub-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; margin-left: auto; }
.ord-pub-actions .ord-btn { white-space: nowrap; }
.ord-collection-intro { margin-bottom: 30px; }

/* ---- Podcast ---- */
.ord-podcast-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ord-podcast-card { padding: 26px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); display: flex; flex-direction: column; gap: 10px; }
.ord-podcast-card h3 { margin: 0; font-size: 1.1rem; }
.ord-podcast-card audio { width: 100%; margin-top: 6px; }
.ord-podcast-head { display: flex; gap: 14px; align-items: center; }
.ord-podcast-head .ord-service-icon { margin: 0; flex-shrink: 0; }
@media (max-width: 800px) { .ord-podcast-grid { grid-template-columns: 1fr; } }

/* ---- Gallery ---- */
.ord-gallery-grid { columns: 3 260px; column-gap: 18px; }
.ord-gallery-item { position: relative; display: block; width: 100%; margin: 0 0 18px; border-radius: var(--ord-radius); overflow: hidden; break-inside: avoid; background: var(--ord-panel); border: 1px solid var(--ord-border); cursor: zoom-in; padding: 0; text-align: left; }
.ord-gallery-item img { width: 100%; height: auto; transition: transform .6s var(--ord-ease); }
.ord-gallery-item:hover img { transform: scale(1.04); }
.ord-gallery-item figcaption, .ord-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px; font-size: .88rem; color: #fff; background: linear-gradient(0deg, rgba(5,14,38,.85), transparent); opacity: 0; transition: opacity .3s; }
.ord-gallery-item:hover .ord-gallery-cap, .ord-gallery-item:focus-visible .ord-gallery-cap { opacity: 1; }
.ord-gallery-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(227,11,23,.92); color: #fff; display: flex; align-items: center; justify-content: center; }
.ord-gallery-play svg { width: 20px; height: 20px; }
.ord-video-modal-frame img { width: 100%; height: auto; max-height: 62vh; object-fit: contain; border-radius: 12px; background: #000; }

/* ---- Join Us ---- */
.ord-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ord-role-chip { position: relative; }
.ord-role-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.ord-role-chip span { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--ord-border-2); background: var(--ord-veil-2); font-size: .9rem; color: var(--ord-text-dim); transition: all .2s; }
.ord-role-chip span svg { width: 16px; height: 16px; color: var(--ord-text-dim-2); }
.ord-role-chip input:checked + span { border-color: var(--ord-primary); background: rgba(227,11,23,.12); color: var(--ord-heading); }
.ord-role-chip input:checked + span svg { color: var(--ord-accent); }
.ord-role-chip input:focus-visible + span { outline: 2px solid var(--ord-accent); outline-offset: 2px; }
.ord-join-roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
.ord-join-role { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--ord-border); background: var(--ord-panel); }
.ord-join-role h4 { font-size: .98rem; margin: 0 0 4px; display: flex; gap: 8px; align-items: center; }
.ord-join-role h4 svg { width: 18px; height: 18px; color: var(--ord-accent); }
.ord-join-role p { margin: 0; font-size: .85rem; }
.ord-form-field select { width: 100%; padding: 14px 16px; border-radius: var(--ord-radius-sm); border: 1px solid var(--ord-border-2); background: var(--ord-veil-2); color: var(--ord-text); font-size: 1rem; }
.ord-form-legend { display: block; font-size: .88rem; font-weight: 500; color: var(--ord-text); margin-bottom: 10px; }
@media (max-width: 600px) { .ord-join-roles { grid-template-columns: 1fr; } }

/* ---- Events (upcoming / previous) ---- */
.ord-events-block { scroll-margin-top: calc(var(--ord-header-h) + 20px); }
.ord-events-block + .ord-events-block { margin-top: 64px; }
.ord-events-block-title { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.ord-events-block-title h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.ord-events-block-title::after { content: ''; flex: 1; height: 1px; background: var(--ord-border-2); }
.ord-event-card.is-past .ord-event-media img { filter: grayscale(.4); opacity: .85; }
.ord-event-card .ord-event-status { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 4px 12px; border-radius: 999px; background: var(--ord-primary); color: #fff; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.ord-event-card.is-past .ord-event-status { background: var(--ord-navy); }

/* ---- Contact channels ---- */
.ord-channel-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ord-channel { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ord-border-2); font-size: .88rem; color: var(--ord-text-dim); transition: all .25s; }
.ord-channel:hover { color: #fff; background: var(--ord-grad-brand); border-color: transparent; }

/* ---- Stories ---- */
.ord-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ord-story-card { border-radius: var(--ord-radius); overflow: hidden; background: var(--ord-panel); border: 1px solid var(--ord-border); display: flex; flex-direction: column; transition: transform .3s var(--ord-ease), border-color .3s; }
.ord-story-card:hover { transform: translateY(-5px); border-color: rgba(227,11,23,.4); }
.ord-story-thumb { aspect-ratio: 16/10; background: var(--ord-logo-card-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ord-story-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ord-story-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.ord-story-body h3 { margin: 0; font-size: 1.1rem; }
.ord-story-body p { margin: 0; font-size: .92rem; flex-grow: 1; }
.ord-story-client { font-size: .78rem; font-family: var(--ord-font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ord-accent); }
@media (max-width: 900px) { .ord-story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ord-story-grid { grid-template-columns: 1fr; } }

/* ---- Partners grid: 12 slots ---- */
.ord-clients-grid.ord-partners-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ord-clients-grid.ord-partners-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .ord-clients-grid.ord-partners-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Featured programs (home) ---- */
.ord-programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ord-program-chip { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--ord-radius); background: var(--ord-panel); border: 1px solid var(--ord-border); transition: transform .3s var(--ord-ease), border-color .3s, background-color .3s; }
.ord-program-chip:hover { transform: translateY(-4px); border-color: rgba(227,11,23,.4); background: var(--ord-panel-2); }
.ord-program-chip .ord-service-icon { margin: 0; flex-shrink: 0; }
.ord-program-chip h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
@media (max-width: 900px) { .ord-programs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ord-programs-grid { grid-template-columns: 1fr; } }

/* ---- Footer tweaks ---- */
.ord-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
@media (max-width: 1080px) { .ord-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .ord-footer-grid { grid-template-columns: 1fr; } }

/* ---- Small fill-ins ---- */
.ord-contact-info { display: flex; flex-direction: column; }
.ord-single-thumb { border-radius: var(--ord-radius); overflow: hidden; margin-bottom: 28px; }
.ord-single-thumb img { width: 100%; height: auto; display: block; }

/* =============================================================
   Mascot — the illustrated ORD girl, dropped into different
   sections with a different pose/animation each time.
   ============================================================= */
.ord-mascot { position: absolute; z-index: 4; pointer-events: none; filter: drop-shadow(0 18px 28px rgba(0,0,0,.28)); }
.ord-mascot img { width: 100%; height: auto; display: block; }

.ord-hero-slider-wrap { position: relative; }
/* Sized and positioned to clear the slider's own bottom-right controls (dots/arrows/
   pause sit at bottom:34px, ~150px wide) — anchored well above and left of them instead
   of overlapping. */
.ord-mascot-hero { width: clamp(210px, 18vw, 320px); right: clamp(60px, 8vw, 150px); bottom: clamp(94px, 14vh, 158px); z-index: 6; animation: ord-mascot-peek 6s ease-in-out infinite; }
/* Raised clear of the collab-points card stack (was overlapping the first card's
   copy) and nudged outside the grid so her feet never sit over the card text. */
.ord-mascot-collab { width: clamp(80px, 7vw, 110px); top: -66px; right: -8px; animation: ord-mascot-tilt 7s ease-in-out infinite; }
.ord-mascot-faq { width: clamp(64px, 6vw, 92px); right: 0; top: 0; animation: ord-mascot-wave 4.5s ease-in-out infinite; transform-origin: bottom center; }
.ord-mascot-cta { width: clamp(90px, 9vw, 150px); left: 50%; bottom: -6px; margin-left: clamp(140px, 22vw, 280px); animation: ord-mascot-bounce 3.2s ease-in-out infinite; }
/* Page-header mascot (About Us, Join Us, etc.) — the header has overflow:hidden,
   so she's clipped to the banner area and never overlaps the content or forms
   below it. Sits opposite the left-aligned title. */
.ord-mascot-pageheader { width: clamp(110px, 10vw, 170px); right: 5%; bottom: 0; z-index: 1; opacity: .95; animation: ord-mascot-sway 8s ease-in-out infinite; }
@media (max-width: 900px) { .ord-mascot-pageheader { display: none; } }
/* About Us — parked in the empty space next to the intro text card. */
.ord-mascot-about { width: clamp(150px, 14vw, 250px); right: 4%; bottom: 4%; z-index: 3; animation: ord-mascot-float 7.5s ease-in-out infinite; }
@media (max-width: 1100px) { .ord-mascot-about { display: none; } }

@keyframes ord-mascot-peek {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-14px) rotate(-2deg); }
}
@keyframes ord-mascot-tilt {
	0%, 100% { transform: rotate(-4deg); }
	50% { transform: rotate(4deg); }
}
@keyframes ord-mascot-wave {
	0%, 100% { transform: rotate(-3deg) translateY(0); }
	25% { transform: rotate(4deg) translateY(-4px); }
	50% { transform: rotate(-2deg) translateY(0); }
	75% { transform: rotate(3deg) translateY(-3px); }
}
@keyframes ord-mascot-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-16px); }
}
/* Slow side-to-side sway with a light bob — used for the page-header mascot so
   she reads differently from the hero's up/down peek. */
@keyframes ord-mascot-sway {
	0%, 100% { transform: translateX(0) translateY(0) rotate(-2deg); }
	50% { transform: translateX(-10px) translateY(-8px) rotate(2deg); }
}
/* Slow, wide vertical drift — no rotation — for a calmer, ambient feel where
   she's just keeping a corner of the page company (About Us). */
@keyframes ord-mascot-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-20px); }
}
@media (max-width: 900px) {
	.ord-mascot-collab { display: none; } /* avoid crowding narrow layouts already tight on space */
	.ord-mascot-hero { width: 128px; right: 14px; bottom: 96px; }
	.ord-mascot-cta { display: none; }
}

/* =============================================================
   Homepage teasers — success stories & publications
   ============================================================= */
/* Bounded to a sensible max column width (was minmax(260px, 1fr), which let a
   1- or 2-card row stretch each card — and its cover image — to fill the
   whole container, making them look oversized). justify-content centers a
   short row instead of stretching it edge to edge. */
.ord-story-teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 280px)); gap: 22px; justify-content: center; }
.ord-story-teaser-card { display: block; background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); overflow: hidden; transition: transform .3s var(--ord-ease), border-color .3s, background-color .3s, box-shadow .3s; text-decoration: none; color: inherit; cursor: pointer; }
.ord-story-teaser-card:hover, .ord-story-teaser-card:focus-visible { transform: translateY(-4px); border-color: rgba(227,11,23,.3); box-shadow: 0 20px 40px -24px rgba(0,0,0,.35); }
.ord-story-teaser-card:focus-visible { outline: 2px solid var(--ord-accent); outline-offset: 2px; }
.ord-story-teaser-card h3 a { color: inherit; }
.ord-story-teaser-media { aspect-ratio: 4/3; max-height: 220px; background: var(--ord-logo-card-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ord-story-teaser-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ord-story-teaser-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.ord-story-teaser-body h3 { font-size: 1.02rem; margin: 4px 0 2px; }
.ord-story-teaser-body p { font-size: .88rem; margin: 0; }
.ord-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--ord-veil-3); border: 1px solid var(--ord-border); color: var(--ord-text-dim-2); font-size: .74rem; width: fit-content; }

/* =============================================================
   Fixes: partner/client cards, testimonials — contrast, cut-off
   avatars, and cards not re-centering when a group has few items
   ============================================================= */
.ord-client-name { color: var(--ord-heading); }

.ord-testimonial-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; justify-content: center; }
.ord-testimonial-card { min-width: 0; }
.ord-quote-icon { flex-shrink: 0; }
.ord-testimonial-author { min-width: 0; }
.ord-avatar-img { width: 46px; height: 46px; aspect-ratio: 1 / 1; border: 1px solid var(--ord-border); }
.ord-testimonial-author > div { min-width: 0; }
.ord-testimonial-author strong, .ord-testimonial-author span { overflow-wrap: anywhere; }


/* =========================================================
   Homepage stats — up to 8 slots, 4 per row.
   --ord-stat-cols is set inline by front-page.php (min(count, 4)), so 1–4 stats
   fill a single row and 5–8 wrap to a second, centred row.
========================================================= */
.ord-stats-strip .ord-stats-grid { display: flex; flex-wrap: wrap; justify-content: center; grid-template-columns: none; }
.ord-stats-strip .ord-stat {
	flex: 0 0 calc(100% / var(--ord-stat-cols, 3));
	max-width: calc(100% / var(--ord-stat-cols, 3));
	padding: 26px 16px;
	border-right: none; border-bottom: none;
	border-left: 1px solid var(--ord-border);
	border-top: 1px solid var(--ord-border);
}
.ord-stats-strip .ord-stat:nth-child(-n+4) { border-top: none; }
.ord-stats-strip .ord-stat:nth-child(4n+1) { border-left: none; }
@media (max-width: 900px) {
	.ord-stats-strip .ord-stat { flex-basis: calc(100% / var(--ord-stat-cols-sm, 2)); max-width: calc(100% / var(--ord-stat-cols-sm, 2)); padding: 22px 12px; border-left: 1px solid var(--ord-border); border-top: 1px solid var(--ord-border); }
	.ord-stats-strip .ord-stat:nth-child(-n+2) { border-top: none; }
	.ord-stats-strip .ord-stat:nth-child(2n+1) { border-left: none; }
	/* undo the 4-per-row rules above for items 3–4 */
	.ord-stats-strip .ord-stat:nth-child(3), .ord-stats-strip .ord-stat:nth-child(4) { border-top: 1px solid var(--ord-border); }
}


/* =========================================================
   Journal issues — badges, details, TOC, filters
========================================================= */
.ord-journal [hidden], .ord-pub-row[hidden] { display: none !important; }
.ord-journal-filters {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
	padding: 18px 20px; margin-bottom: 14px;
	background: var(--ord-panel); border: 1px solid var(--ord-border); border-radius: var(--ord-radius);
}
.ord-jf { display: flex; flex-direction: column; gap: 5px; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ord-text-dim-2); }
.ord-jf select, .ord-jf input[type="search"] {
	font: inherit; font-size: .9rem; font-weight: 500; letter-spacing: 0; text-transform: none;
	color: var(--ord-text); background: var(--ord-panel-2); border: 1px solid var(--ord-border-2);
	border-radius: 10px; padding: 10px 12px; min-height: 42px; min-width: 140px;
}
.ord-jf select:focus, .ord-jf input[type="search"]:focus { outline: 2px solid var(--ord-secondary); outline-offset: 1px; }
.ord-jf-search { flex: 1 1 260px; position: relative; }
.ord-jf-search svg { position: absolute; left: 12px; bottom: 13px; color: var(--ord-text-dim-2); pointer-events: none; }
.ord-jf.ord-jf-search input[type="search"] { padding-left: 40px; width: 100%; box-sizing: border-box; }
.ord-jf-reset { align-self: flex-end; }
.ord-journal-count { margin: 0 0 16px; font-size: .86rem; color: var(--ord-text-dim-2); }

.ord-issue-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ord-issue-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: #fff; background: var(--ord-primary); }
.ord-issue-theme { font-weight: 600; color: var(--ord-heading); margin: -2px 0 8px; }
.ord-pub-meta a { color: var(--ord-accent); text-decoration: underline; text-underline-offset: 2px; }
.ord-issue-row .ord-pub-cover { height: 138px; width: 108px; }

.ord-issue-toc { margin-top: 12px; border-top: 1px solid var(--ord-border); padding-top: 10px; }
.ord-issue-toc summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--ord-secondary); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.ord-issue-toc summary::-webkit-details-marker { display: none; }
.ord-issue-toc summary::after { content: '+'; font-weight: 700; }
.ord-issue-toc[open] summary::after { content: '\2212'; }
.ord-issue-toc ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.ord-issue-toc li { font-size: .88rem; color: var(--ord-text); }
.ord-issue-toc-title { font-weight: 600; color: var(--ord-heading); }
.ord-issue-toc-authors { display: block; font-size: .8rem; color: var(--ord-text-dim-2); }
.ord-issue-toc-page { display: inline-block; margin-left: 8px; font-size: .78rem; font-family: var(--ord-font-mono); color: var(--ord-accent); }
a.ord-issue-toc-page { text-decoration: underline; text-underline-offset: 2px; }


/* =========================================================
   Document viewer (PDF / Office / image) — theme-aware
========================================================= */
.ord-docview { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: stretch; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.ord-docview[hidden] { display: none; }
.ord-docview.is-open { opacity: 1; }
.ord-docview-backdrop { position: absolute; inset: 0; background: rgba(5, 10, 24, .78); backdrop-filter: blur(3px); }
.ord-docview-panel {
	position: relative; display: flex; flex-direction: column;
	width: min(1100px, 100%); height: 100%; margin: 0 auto;
	background: var(--ord-bg); color: var(--ord-text);
	box-shadow: 0 0 60px rgba(0,0,0,.45);
}
@media (min-width: 900px) { .ord-docview-panel { height: calc(100% - 32px); margin-top: 16px; border-radius: var(--ord-radius); overflow: hidden; } }
.ord-docview-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ord-panel); border-bottom: 1px solid var(--ord-border); flex-shrink: 0; }
.ord-docview-title { flex: 1; min-width: 0; margin: 0; font-size: .95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ord-heading); }
.ord-docview-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ord-docview-pager, .ord-docview-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: 10px; background: var(--ord-panel-2); }
.ord-docview-pager[hidden], .ord-docview-zoom[hidden] { display: none; }
.ord-docview-pageinfo { font-size: .82rem; font-family: var(--ord-font-mono); color: var(--ord-text-dim); padding: 0 4px; white-space: nowrap; }
.ord-docview-pageinfo b { color: var(--ord-heading); font-weight: 600; }
.ord-docview-btn {
	display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px;
	border: 0; border-radius: 10px; background: transparent; color: var(--ord-text); font: inherit; font-size: 1.05rem; cursor: pointer; text-decoration: none;
	transition: background-color .2s var(--ord-ease), color .2s var(--ord-ease);
}
.ord-docview-btn:hover { background: var(--ord-veil-4); color: var(--ord-heading); }
.ord-docview-btn:focus-visible { outline: 2px solid var(--ord-secondary); outline-offset: 1px; }
.ord-docview-zoomlabel { font-size: .78rem; font-family: var(--ord-font-mono); min-width: 52px; }
.ord-docview-close:hover { background: var(--ord-primary); color: #fff; }
.ord-docview-body { flex: 1; overflow: auto; background: var(--ord-bg-alt); -webkit-overflow-scrolling: touch; outline: none; position: relative; }
.ord-docview-body.has-note { display: flex; flex-direction: column; overflow: hidden; }
.ord-docview-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 8px 40px; min-width: min-content; }
.ord-docview-page { position: relative; flex: 0 0 auto; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.25); }
.ord-docview-page canvas { display: block; }
.ord-docview-page:not(.is-ready)::after { content: attr(data-page); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ord-font-mono); font-size: 1.4rem; color: rgba(10,31,77,.25); }
.ord-docview-frame { flex: 1; width: 100%; min-height: 0; height: 100%; border: 0; background: #fff; }
.ord-docview-note { margin: 0; padding: 10px 16px; font-size: .82rem; text-align: center; background: var(--ord-panel); border-top: 1px solid var(--ord-border); }
.ord-docview-note a { color: var(--ord-accent); text-decoration: underline; }
.ord-docview-image { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 16px; }
.ord-docview-image img { max-width: 100%; max-height: 100%; height: auto; border-radius: 8px; }
.ord-docview-status { display: flex; align-items: center; justify-content: center; gap: 12px; height: 100%; min-height: 200px; color: var(--ord-text-dim); font-size: .95rem; }
.ord-docview-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ord-border-2); border-top-color: var(--ord-primary); animation: ord-spin .8s linear infinite; }
@keyframes ord-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
	.ord-docview-bar { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; }
	.ord-docview-title { flex-basis: 100%; order: -1; font-size: .88rem; }
	.ord-docview-tools { width: 100%; justify-content: space-between; }
	.ord-docview-zoom { display: none; } /* pinch-to-zoom is available on touch screens */
}
@media (prefers-reduced-motion: reduce) { .ord-docview { transition: none; } .ord-docview-spinner { animation-duration: 2s; } }


/* =========================================================
   Publication / journal cards — mobile layout (no overflow, no shifting)
   Cover sits beside the text; the action buttons wrap onto their own full-width row.
========================================================= */
.ord-pub-list, .ord-pub-row, .ord-pub-info { min-width: 0; }
.ord-pub-info h3, .ord-pub-meta span, .ord-issue-toc li, .ord-pub-info p { overflow-wrap: anywhere; }
/* Safety net: nothing inside a card may widen the page. `clip` (unlike `hidden`) keeps sticky headers working. */
html, body { overflow-x: clip; max-width: 100%; }

@media (max-width: 720px) {
	.ord-pub-row,
	.ord-issue-row {
		display: grid;
		grid-template-columns: 68px minmax(0, 1fr);
		column-gap: 14px; row-gap: 14px;
		align-items: start;
		padding: 16px;
		width: 100%; box-sizing: border-box;
	}
	.ord-pub-row:hover { transform: none; }
	.ord-pub-row .ord-pub-cover,
	.ord-issue-row .ord-pub-cover { width: 68px; height: 88px; padding: 4px; }
	.ord-pub-info h3 { font-size: 1rem; line-height: 1.3; }
	.ord-pub-meta { gap: 4px 12px; font-size: .8rem; }
	.ord-pub-info p { font-size: .88rem; line-height: 1.55; }

	.ord-pub-actions {
		grid-column: 1 / -1;
		display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch;
		gap: 8px; width: 100%; margin: 0; padding: 0;
	}
	.ord-pub-actions .ord-btn { flex: 1 1 auto; justify-content: center; padding: 10px 14px; white-space: nowrap; min-width: 0; }
	.ord-pub-actions .ord-download-pending { flex: 1 1 100%; }

	.ord-issue-toc ol { padding-left: 18px; }
	.ord-issue-toc-page { margin-left: 0; display: block; }

	/* journal filters: search full width, selects two-up */
	.ord-journal-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
	.ord-jf-search { grid-column: 1 / -1; flex: none; }
	.ord-jf select, .ord-jf input[type="search"] { min-width: 0; width: 100%; box-sizing: border-box; }
	.ord-jf-reset { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 380px) {
	.ord-pub-row, .ord-issue-row { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; padding: 14px; }
	.ord-pub-row .ord-pub-cover, .ord-issue-row .ord-pub-cover { width: 56px; height: 74px; }
	.ord-pub-actions .ord-btn { padding: 9px 12px; font-size: .82rem; }
}


/* =============================================================
   Refinements: gradient pill edges, long-text layout, page transitions
   ============================================================= */

/* Every gradient-filled pill/circle: fill reaches the border edge, no seam */
.ord-btn-primary, .ord-social-links a:hover, .ord-team-linkedin:hover,
.ord-portfolio-filter.is-active, .ord-blog-filter.is-active,
.ord-subnav a:hover, .ord-subnav a.is-active, .ord-channel:hover,
.ord-primary-nav .ord-menu-cta > a, .ord-back-to-top, .ord-avatar-initials,
.ord-form-submit {
	background-origin: border-box; background-clip: border-box;
}
.ord-btn-primary, .ord-primary-nav .ord-menu-cta > a, .ord-back-to-top,
.ord-portfolio-filter, .ord-blog-filter, .ord-subnav a, .ord-channel {
	-webkit-font-smoothing: antialiased; backface-visibility: hidden;
}
.ord-btn-primary:hover, .ord-btn-primary:focus-visible { transform: translate3d(0, -2px, 0); }

/* Long-form text in cards: use the whole card. Long copy flows into
   columns as the card gets wider (1 on phones, 2 on laptops, 3 on ultrawide). */
.ord-prose.is-long, .ord-prose.is-long.ord-text-card {
	column-width: 30rem; column-gap: clamp(32px, 4vw, 72px); column-fill: balance;
}
.ord-prose.is-long > h1, .ord-prose.is-long > h2, .ord-prose.is-long > h3, .ord-prose.is-long > h4 { break-after: avoid; }
.ord-prose.is-long > h2:first-child, .ord-prose.is-long > h3:first-child { margin-top: 0; }
.ord-prose.is-long blockquote, .ord-prose.is-long li, .ord-prose.is-long figure, .ord-prose.is-long img { break-inside: avoid; }
.ord-prose.is-long table, .ord-prose.is-long iframe, .ord-prose.is-long figure.wp-block-embed,
.ord-prose.is-long .wp-block-image.alignwide, .ord-prose.is-long pre, .ord-prose.is-long .wp-block-table,
.ord-prose.is-long .alignfull { column-span: all; }
.ord-prose.is-long > p, .ord-prose.is-long li { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 700px) {
	.ord-prose.is-long { column-width: auto; column-count: 1; }
	.ord-prose.is-long > p, .ord-prose.is-long li { text-align: left; hyphens: manual; }
}
/* Card/grid copy never keeps a narrow measure of its own */
.ord-text-card, .ord-text-card-lg { max-width: none; width: 100%; }
.ord-text-card p, .ord-text-card li { overflow-wrap: break-word; }

/* Page transitions — cross-document view transition where supported, with
   a short opacity-only fade elsewhere. Header stays put; only the page body fades. */
@view-transition { navigation: auto; }
.ord-site-header { view-transition-name: ord-header; }
::view-transition-group(ord-header) { animation-duration: 0s; }
::view-transition-old(root) { animation: ord-vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: ord-vt-in .55s cubic-bezier(.16, 1, .3, 1) .05s both; }
@keyframes ord-vt-out { to { opacity: 0; transform: translate3d(0, -8px, 0) scale(.995); } }
@keyframes ord-vt-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

/* Browsers without cross-document view transitions (Firefox, older Safari):
   page content eases in on load and eases out on internal link clicks (see main.js).
   Only <main> and the footer move, so the fixed header never jumps. */
@supports not (view-transition-name: none) {
	.ord-main, .ord-site-footer { animation: ord-page-in .5s cubic-bezier(.16, 1, .3, 1) backwards; }
	.ord-main, .ord-site-footer { transition: opacity .2s ease-in, transform .2s ease-in; }
	html.ord-leaving .ord-main, html.ord-leaving .ord-site-footer { opacity: 0; transform: translate3d(0, -8px, 0); }
}
@keyframes ord-page-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
	.ord-main, .ord-site-footer { animation: none !important; transition: none !important; }
	html.ord-leaving .ord-main, html.ord-leaving .ord-site-footer { opacity: 1; transform: none; }
}

/* =============================================================
   About page mascot — lives in the layout instead of floating over the copy.
   Wide screens: sits in its own column, bottom-aligned beside the card.
   Tablet/phone: sits below the card, smaller. Never overlaps text.
   ============================================================= */
.ord-about-content-wrap {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(16px, 2.5vw, 40px); align-items: end; overflow: visible;
}
.ord-about-content-wrap > .ord-text-card { grid-column: 1; grid-row: 1; align-self: stretch; }
.ord-about-content-wrap > .ord-mascot.ord-mascot-about {
	display: block; position: relative; right: auto; bottom: auto; grid-column: 2; grid-row: 1; align-self: end;
	width: clamp(150px, 13vw, 240px); margin: 0 0 -6px;
}
@media (max-width: 1100px) {
	.ord-about-content-wrap { grid-template-columns: minmax(0, 1fr); }
	.ord-about-content-wrap > .ord-mascot.ord-mascot-about { grid-column: 1; grid-row: 2; justify-self: end; width: clamp(110px, 22vw, 170px); margin: -8px 4px 0 0; }
}
@media (max-width: 600px) {
	.ord-about-content-wrap > .ord-mascot.ord-mascot-about { justify-self: center; width: 120px; margin-right: 0; }
}


/* =============================================================
   v1.1.3 — mobile polish, reader fonts, performance
   ============================================================= */

/* FAQ mascot: lives beside the section heading, never over the accordion rows. */
@media (max-width: 1100px) { .ord-mascot-faq { display: none; } }

/* Closing CTA cards ("Meet the people behind ORD." etc.).
   Root cause of the cramped look: `.ord-cta .ord-container` (padding: 0 24px) out-ranked
   `.ord-cta-inner` padding, so on pages where the card IS the container it lost its vertical
   padding and ran edge to edge. Give the card its own gutter + comfortable padding. */
.ord-cta > .ord-cta-inner.ord-container { box-sizing: border-box; }
@media (max-width: 900px) {
	.ord-cta { padding: 44px 0; }
	.ord-cta > .ord-cta-inner.ord-container {
		width: calc(100% - 40px); padding: 44px 28px; border-radius: 22px;
	}
	.ord-cta-inner { box-sizing: border-box; }
}
@media (max-width: 600px) {
	.ord-cta { padding: 36px 0; }
	.ord-cta > .ord-cta-inner.ord-container { width: calc(100% - 32px); padding: 38px 22px; }
	.ord-cta-inner { padding: 38px 22px; border-radius: 22px; }
	.ord-cta-inner h2 { font-size: clamp(1.35rem, 6vw, 1.7rem); margin-bottom: 0; }
	.ord-cta-inner p { font-size: .98rem; line-height: 1.65; margin: 12px 0 0; }
	.ord-cta-inner .ord-btn,
	.ord-cta-inner .ord-btn-lg { margin-top: 24px; width: 100%; max-width: 100%; padding-left: 20px; padding-right: 20px; justify-content: center; box-sizing: border-box; }
}

/* Document / journal reader — keep the toolbar and page area tidy on phones. */
.ord-docview-body { overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.ord-docview-page canvas { image-rendering: auto; }

/* Performance: don't lay out / paint the footer until it's near the viewport. */
.ord-site-footer { content-visibility: auto; contain-intrinsic-size: auto 520px; }

/* Honour the visitor's data-saver / low-power preference: skip the decorative mascots. */
@media (prefers-reduced-data: reduce) { .ord-mascot { display: none; } }


/* =============================================================
   Partner & client logo cards — depth, tilt and glare on hover.
   The outer link only holds layout + the scroll-reveal; the visual card ("face")
   is what tilts, so the reveal's transform never fights the hover transform.
   ============================================================= */
.ord-clients-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 220px)); gap: 26px; perspective: 1100px; }
.ord-clients-grid .ord-client-card {
	display: block; height: 150px; padding: 0; background: none; border: 0; box-shadow: none;
	backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: var(--ord-radius);
	text-decoration: none; outline: none; transform-style: flat;
}
.ord-clients-grid .ord-client-card:hover { transform: none; background: none; box-shadow: none; border: 0; }
.ord-client-face {
	--rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; padding: 26px; box-sizing: border-box; overflow: hidden;
	border-radius: var(--ord-radius);
	background: var(--ord-logo-card-bg); border: 1px solid var(--ord-logo-card-border);
	box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 8px 18px -12px rgba(15,23,42,.28);
	transform: translate3d(0, 0, 0) rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform .45s var(--ord-ease), box-shadow .45s var(--ord-ease), border-color .35s var(--ord-ease), background-color .35s var(--ord-ease);
}
/* soft light that follows the pointer */
.ord-client-face::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--ord-ease);
	background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
	mix-blend-mode: soft-light;
}
/* brand-gradient underline that draws in on hover */
.ord-client-face::after {
	content: ''; position: absolute; left: 14%; right: 14%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
	background: var(--ord-grad-brand); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ord-ease);
}
.ord-client-face img {
	position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
	image-rendering: auto; transition: transform .45s var(--ord-ease), filter .45s var(--ord-ease);
}
.ord-client-card:hover .ord-client-face,
.ord-client-card:focus-visible .ord-client-face {
	will-change: transform;
	transform: translate3d(0, -8px, 0) rotateX(var(--rx)) rotateY(var(--ry));
	background: var(--ord-logo-card-bg-hover); border-color: rgba(227,11,23,.45);
	box-shadow:
		0 2px 4px rgba(15,23,42,.08),
		0 14px 24px -10px rgba(227,11,23,.32),
		0 32px 44px -22px rgba(42,99,216,.45);
}
.ord-client-card:hover .ord-client-face::before,
.ord-client-card:focus-visible .ord-client-face::before { opacity: 1; }
.ord-client-card:hover .ord-client-face::after,
.ord-client-card:focus-visible .ord-client-face::after { transform: scaleX(1); }
.ord-client-card:hover .ord-client-face img,
.ord-client-card:focus-visible .ord-client-face img { transform: scale(1.07); filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
.ord-client-card:focus-visible .ord-client-face { outline: 2px solid var(--ord-secondary); outline-offset: 3px; }
.ord-client-card:active .ord-client-face { transform: translate3d(0, -3px, 0) scale(.985); transition-duration: .15s; }
@media (max-width: 600px) {
	.ord-clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; perspective: none; }
	.ord-clients-grid .ord-client-card { height: 116px; }
	.ord-client-face { padding: 18px; }
}
@media (hover: none) {
	.ord-client-card:hover .ord-client-face { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ord-client-face, .ord-client-face img, .ord-client-face::after { transition: none; }
	.ord-client-card:hover .ord-client-face { transform: none; }
}

/* =============================================================
   Hero — girl mascot on the left, balancing the one on the right
   (desktop only; she is parked in the gutter left of the slide text,
   which is centred, so she is only shown when that gutter is wide enough).
   ============================================================= */
.ord-mascot-hero-left {
	--gw: clamp(150px, 13vw, 250px);
	display: none; width: var(--gw); z-index: 6;
	left: max(12px, calc((100vw - 780px) / 2 - var(--gw) - 28px));
	bottom: clamp(94px, 14vh, 158px);
	animation: ord-mascot-float-soft 7s ease-in-out infinite;
}
@keyframes ord-mascot-float-soft {
	0%, 100% { transform: translateY(0) rotate(1deg); }
	50% { transform: translateY(-12px) rotate(-1.5deg); }
}
@media (min-width: 1180px) { .ord-mascot-hero-left { display: block; } }
@media (prefers-reduced-motion: reduce) { .ord-mascot-hero-left { animation: none; } }


/* =============================================================
   Hero slider — responsive layout (tablet + phone)
   Slides now size to their content (all slides share one grid cell, so the slider is as tall
   as the tallest slide) instead of a fixed height that cut text off. On phones a slide with a
   normal landscape picture shows the picture in full above the copy; slides with a dedicated
   phone image or no picture keep the full-bleed look.
   ============================================================= */
@media (max-width: 1024px) {
	.ord-slider-track { height: auto; min-height: 0; display: grid; }
	.ord-slide { position: relative; inset: auto; grid-area: 1 / 1; min-height: clamp(520px, 82vh, 760px); min-height: clamp(520px, 82svh, 760px); }
	.ord-slide-inner { width: 100%; box-sizing: border-box; padding-bottom: 116px; }
	.ord-slide-copy { max-width: 640px; }
}
@media (max-width: 720px) {
	.ord-slider-track { height: auto; }
	.ord-slide { flex-direction: column; justify-content: center; align-items: stretch; min-height: clamp(540px, 86vh, 720px); min-height: clamp(540px, 86svh, 720px); }
	.ord-slide-media img { transform: scale(1.03); }
	.ord-slide-title { font-size: clamp(1.85rem, 7.6vw, 2.4rem); line-height: 1.15; margin: 14px 0 12px; overflow-wrap: break-word; }
	.ord-slide-desc { font-size: 1rem; line-height: 1.6; max-width: 100%; }
	.ord-slide .ord-hero-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; }
	.ord-slide .ord-hero-actions .ord-btn { flex: 1 1 auto; justify-content: center; }
	.ord-slide-inner { padding-top: calc(var(--ord-header-h) + 20px); padding-bottom: 112px; }

	/* Picture shown in full on top, copy on the navy below it. */
	.ord-slide.has-img:not(.has-mobile) { justify-content: flex-start; background: #071633; }
	.ord-slide.has-img:not(.has-mobile) .ord-slide-media { position: relative; inset: auto; flex: none; width: 100%; height: calc(var(--ord-header-h) + 58vw); }
	.ord-slide.has-img:not(.has-mobile) .ord-slide-media::after {
		background: linear-gradient(180deg, rgba(5,14,38,.55) 0%, rgba(5,14,38,0) 32%), linear-gradient(0deg, #071633 0%, rgba(7,22,51,.55) 22%, rgba(7,22,51,0) 55%);
	}
	.ord-slide.has-img:not(.has-mobile) .ord-slide-inner { padding-top: 0; margin-top: -26px; }

	/* The big mascots would sit on top of the copy and buttons. */
	.ord-mascot-hero, .ord-mascot-hero-left { display: none; }
}
@media (max-width: 380px) {
	.ord-slide .ord-hero-actions .ord-btn { flex-basis: 100%; }
}