/*--------------------------------------------------------------
	Orthomedics & Pharmaceuticals Ltd: site styles (loads after the template's style.css).
	Brand: navy #2e3192 and orange #f4572e. Titillium Web for headings and buttons, Roboto for text.
	Design tokens first, then the components in the order they appear on a page.
--------------------------------------------------------------*/

:root {
  /* brand */
  --ort-navy: #2e3192;
  --ort-navy-d: #1c1e63;   /* navy on hover */
  --ort-deep: #171a4a;     /* top bar and dark bands */
  --ort-night: #0d0e43;    /* footer */
  --ort-ink: #2e3192;      /* headings */
  --ort-orange: #f4572e;
  --ort-orange-d: #dd4b24;   /* orange on hover */
  /* text and surfaces */
  --ort-text: #566074;
  --ort-muted: #646d82;    /* 5:1 on white, readable at small sizes */
  --ort-line: #e5e8f1;
  --ort-line-2: #d7dce8;     /* fields, and cards while pointed at */
  --ort-soft: #f5f7fb;
  /* shape, depth, motion */
  --ort-r-sm: 8px;           /* buttons, fields, small tiles */
  --ort-r: 12px;             /* cards */
  --ort-r-lg: 16px;          /* large pictures and panels */
  --ort-sh-sm: 0 1px 2px rgba(23, 26, 74, 0.04), 0 12px 32px -18px rgba(23, 26, 74, 0.14);   /* panels at rest (forms, documents) */
  --ort-sh: 0 1px 2px rgba(23, 26, 74, 0.05), 0 10px 26px -12px rgba(23, 26, 74, 0.2);       /* cards while pointed at */
  --ort-sh-lg: 0 1px 3px rgba(23, 26, 74, 0.05), 0 24px 50px -20px rgba(23, 26, 74, 0.3);    /* pictures, menus, floating panels */
  --ort-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ort-gutter: 15px;        /* side margin of the page; wider on tablets and phones (section 10) */
  /* honeycomb texture for dark bands, echoing the hexagons in the homepage banner */
  --ort-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v32' fill='none' stroke='%23ffffff' stroke-opacity='.08'/%3E%3C/svg%3E");
}

/* ================================================================
   1. Base
   ================================================================ */
body { color: var(--ort-text); font-size: 16px; }
p { line-height: 1.7; }
/* the template capitalises every word of every heading; headings here are written the way they should read */
h1, h2, h3, h4, h5, h6, .widget-title { text-transform: none; }
h2, h3, h4, h5, h6, .widget-title { line-height: 1.25; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #f4572e; outline-offset: 2px;
}
.btn:focus-visible { outline: 2px solid #f4572e; outline-offset: 3px; }
section { padding-top: 104px; padding-bottom: 104px; }
/* smooth scrolling to anchors, landing below the sticky menu bar (instant for visitors who prefer less motion) */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* pictures that load later fade in over a soft placeholder instead of popping in (main.js marks them when loaded) */
.js-img img[loading="lazy"]:not(.is-loaded):not(.feat-media img):not(.svcx-media img) { opacity: 0; }
.js-img img[loading="lazy"] { transition: opacity 0.6s var(--ort-ease); }
.sec-tile-img, .pcard-media, .news-card-img, .gallery-item, .team-card-photo, .photo-strip a, .svcx-thumb { background-color: var(--ort-soft); }
.btn.btn-block { min-width: 0; }
::selection { background: var(--ort-navy); color: #fff; }

/* section headings: a confident title, an optional lead and, on the right, a link to the full list */
.ort-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 700 12.5px/1 "Titillium Web", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #f4572e; }
.ort-eyebrow:before { content: ""; width: 30px; height: 2px; background: currentColor; }
.is-center .ort-eyebrow:after { content: ""; width: 30px; height: 2px; background: currentColor; }
.ort-title { margin: 0 0 16px; font-size: clamp(30px, 1.5vw + 19px, 44px); font-weight: 700; line-height: 1.14; letter-spacing: -0.018em; color: var(--ort-navy); text-transform: none; }
.ort-lead { max-width: 660px; margin: 0; font-size: 17px; line-height: 1.7; color: var(--ort-text); }
.ort-head { margin-bottom: 52px; }
.ort-head.is-tight { margin-bottom: 28px; }
.ort-head.is-center { text-align: center; }
.ort-head.is-center .ort-lead { margin-left: auto; margin-right: auto; }
.ort-head.is-light .ort-title { color: #fff; }
.ort-head.is-light .ort-lead { color: rgba(255, 255, 255, 0.8); }
.ort-head.is-light .ort-eyebrow { color: #ff8a68; }
.ort-section { padding: 104px 0; }
.ort-section.is-soft { background: var(--ort-soft); }
.ort-section.is-tight { padding: 72px 0; }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 30px; margin-bottom: 48px; }
.head-row .ort-head { margin-bottom: 0; }
/* text link with an arrow that slides: "All 550 products", "All services" */
.head-link { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font: 700 15px "Titillium Web", sans-serif; color: var(--ort-navy); white-space: nowrap; }
.head-link i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; transition: transform 0.3s var(--ort-ease), background-color 0.3s, color 0.3s, border-color 0.3s; }
.head-link:hover { color: var(--ort-navy); }
.head-link:hover i { transform: translateX(4px); background: var(--ort-orange); border-color: var(--ort-orange); color: #fff; }

/* pictures behind banners: phones load the small version when the page provides one (bg_style() in includes/data.php) */
@media (max-width: 767px) { [style*="--bg-sm"] { background-image: var(--bg-sm) !important; } }

/* page banner on inner pages: the page photo fills the whole banner; a translucent blue panel on the left holds the
   breadcrumb, a two-tone title (light blue, then white), a line about the page and the buttons, and runs off the bottom
   edge (page_title() and page_hero_stage() in includes/components.php). A 3D render on a dark background
   ('render' => true) melts into the banner blue like the homepage animations. */
.page-hero { --ph-bg: #0c2150; --ph-glow: #17407f; position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 0; color: #fff; background: radial-gradient(64% 120% at 66% 46%, var(--ph-glow) 0%, var(--ph-bg) 72%); }
.page-hero-stage { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.page-hero-stage picture, .page-hero-stage img { display: block; width: 100%; height: 100%; }
.page-hero-stage img { object-fit: cover; object-position: 68% center; animation: phIn 1.2s var(--ort-ease) both; }
/* a light wash of the brand blue over the photo, so every page reads as one set */
.page-hero-stage:before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12, 33, 80, 0.26), rgba(12, 33, 80, 0.06) 45%, rgba(12, 33, 80, 0.3)); }
.page-hero-stage.is-render { mix-blend-mode: screen; }
.page-hero-stage.is-render:before { display: none; }
.page-hero-stage.is-render img { object-fit: contain; object-position: 78% center; }
@keyframes phIn { from { opacity: 0; transform: scale(1.04); } }
.page-hero-panel { position: relative; isolation: isolate; overflow: hidden; width: min(640px, 56%); padding: 50px 56px 64px; border-radius: var(--ort-r-lg) var(--ort-r-lg) 0 0; background: rgba(12, 33, 80, 0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 -10px 60px rgba(6, 16, 44, 0.3); animation: ortRise 0.8s var(--ort-ease) both; }
/* hexagons: a honeycomb that fades in from the right, and larger outlines in the lower right corner */
.page-hero-panel:before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ort-hex); background-size: 42px 72px; -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 85%); mask-image: linear-gradient(115deg, transparent 30%, #000 85%); }
.page-hero-panel:after { content: ""; position: absolute; right: -86px; bottom: -112px; z-index: -1; width: 280px; height: 320px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='320' viewBox='0 0 280 320'%3E%3Cpath d='M180 70 275.3 125v110L180 290 84.7 235V125z' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='1.5'/%3E%3Cpath d='M180 112 239 146v68L180 248l-59-34v-68z' fill='%23ffffff' fill-opacity='.04'/%3E%3Cpath d='M150 140 174 154v28L150 196 126 182v-28z' fill='none' stroke='%23f4572e' stroke-opacity='.8' stroke-width='2'/%3E%3C/svg%3E") no-repeat; animation: phHex 1.1s 0.3s var(--ort-ease) both; }
@keyframes phHex { from { opacity: 0; transform: translate(12px, 12px); } }
.page-crumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 22px; padding: 0; list-style: none; font: 600 14px/1.4 "Titillium Web", sans-serif; color: rgba(255, 255, 255, 0.72); }
.page-crumbs li { display: inline-flex; align-items: center; }
.page-crumbs li + li:before { content: ""; width: 6px; height: 6px; margin: 0 12px 0 8px; border-top: 1.5px solid rgba(255, 255, 255, 0.5); border-right: 1.5px solid rgba(255, 255, 255, 0.5); transform: rotate(45deg); }
.page-crumbs a { color: #fff; }
.page-crumbs a:hover { color: #ffb199; }
.page-hero-title { max-width: none; margin: 0 0 20px; font-size: clamp(34px, 1.9vw + 20px, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.page-hero-desc { max-width: none; margin: 0; font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, 0.86); }
.page-hero-title { position: relative; padding-bottom: 22px; }
/* a short orange line draws itself in under the title */
.page-hero-title:after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 3px; background: #f4572e; transform-origin: left; animation: phLine 0.9s 0.45s var(--ort-ease) both; }
@keyframes phLine { from { transform: scaleX(0); } }
.page-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.page-hero-panel > * { animation: ortRise 0.8s 0.1s var(--ort-ease) both; }
.page-hero-panel > :nth-child(2) { animation-delay: 0.18s; }
.page-hero-panel > :nth-child(3) { animation-delay: 0.26s; }
.page-hero-panel > :nth-child(4) { animation-delay: 0.34s; }
@keyframes ortRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ================================================================
   2. Header: top bar, menu bar, drop-downs
   ================================================================ */
/* top bar (desktop; the template hides it below 1200px) */
.header-topbar { height: 42px; background: var(--ort-deep); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 42px; }
.topbar-contact { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; font-size: 13px; white-space: nowrap; color: rgba(255, 255, 255, 0.78); }
.topbar-contact li { display: flex; align-items: center; gap: 8px; }
.topbar-contact i { font-size: 13px; color: var(--ort-orange); }
.topbar-contact a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.88); }
.topbar-contact a:hover { color: #fff; }
.topbar-contact .topbar-branches { font-weight: 500; color: #fff; }
.topbar-tools { display: flex; align-items: center; height: 42px; }
.topbar-quote {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; margin-right: 18px; padding: 0 6px 0 14px; white-space: nowrap;
  border-radius: 30px; background: rgba(255, 255, 255, 0.1); color: #fff !important; font: 600 12.5px "Titillium Web", sans-serif; transition: background 0.2s;
}
.topbar-quote:hover { background: #f4572e; }
.topbar-quote b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #f4572e; color: #fff; font-size: 11px; line-height: 20px; text-align: center; transition: all 0.2s; }
.topbar-quote:hover b { background: #fff; color: #f4572e; }
.topbar-quote b.is-zero { background: rgba(255, 255, 255, 0.22); }
.header-topbar .header-topbar-search { margin-left: 4px; }
.header-topbar .header-topbar-search .form-control { height: 42px; width: 230px; padding-left: 16px; padding-right: 42px; font-size: 13px; font-style: normal; border-width: 0 0 0 1px; border-left-color: rgba(255, 255, 255, 0.14); transition: background 0.2s, width 0.3s var(--ort-ease); }
.header-topbar .header-topbar-search .form-control::placeholder { font-style: normal; color: #9aa6d6; }
.header-topbar .header-topbar-search .form-control:focus { width: 280px; background: rgba(255, 255, 255, 0.07); }
.header-topbar-search .ta-box { left: auto; right: 0; width: 400px; top: calc(100% + 4px); }

/* menu bar */
/* Products menu: the section names are plain text, styled like the headings they replaced */
.navbar .nav-title { font-family: "Titillium Web", sans-serif; font-weight: 600; color: var(--ort-navy); }
.navbar .nav-title.is-next { margin-top: 22px; }
.header { box-shadow: none; }
.navbar { box-shadow: 0 1px 0 var(--ort-line); }
.btn, .btn span, .navbar .nav-item .nav-item-link, .navbar .dropdown-menu .nav-item > .nav-item-link { text-transform: none; }
.navbar .nav-item .nav-item-link { letter-spacing: 0; }   /* the template spaced every menu label out */
.navbar .navbar-brand img { height: auto; }
.navbar .btn-contact { height: 48px; min-width: 0; padding: 0 26px; }
@media (min-width: 1200px) {
  .navbar, .navbar > .container-fluid { height: 88px; max-height: 88px; }
  .navbar .navbar-brand { line-height: 88px; }
  .navbar .navbar-brand img { width: 232px; }
  .navbar .navbar-nav > .nav-item > .nav-item-link { line-height: 88px; font-family: "Titillium Web", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; color: var(--ort-navy); }
  .navbar .navbar-nav > .nav-item > .nav-item-link:hover, .navbar .navbar-nav > .nav-item > .nav-item-link.active { color: var(--ort-navy); }
  .navbar .navbar-nav > .nav-item > .nav-item-link.active { color: #f4572e; }
  /* a short bar under the label: grows from the left on hover, stays under the current section */
  .navbar .navbar-nav > .nav-item > .nav-item-link:before { top: auto; bottom: 27px; left: 0; right: 15px; width: auto !important; height: 2px; border-radius: 2px; background: #f4572e; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ort-ease); }
  .navbar .navbar-nav > .nav-item > .nav-item-link:hover:before, .navbar .navbar-nav > .nav-item > .nav-item-link.active:before, .navbar .nav-item.has-dropdown:hover > .nav-item-link:before { transform: scaleX(1); }
  .navbar .dropdown-toggle:after { font-size: 12px; transition: transform 0.3s var(--ort-ease); }
  .navbar .nav-item.has-dropdown:hover > .dropdown-toggle:after { transform: translateY(-50%) rotate(180deg); }
  /* keyboard users (Tab) open the drop-downs too */
  .navbar .nav-item.has-dropdown:has(:focus-visible) > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

  /* drop-downs: a floating card */
  .navbar .dropdown-menu { min-width: 260px; margin-top: -10px; padding: 8px; border: 1px solid var(--ort-line); border-radius: var(--ort-r); box-shadow: var(--ort-sh-lg); transition: opacity 0.25s, visibility 0.25s, transform 0.3s var(--ort-ease); }
  .navbar .dropdown-menu .nav-item { padding: 0; }
  .navbar .dropdown-menu .nav-item > .nav-item-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border: 0; border-radius: var(--ort-r-sm); font-size: 15px; line-height: 1.4 !important; color: #3e475c; transition: background 0.2s, color 0.2s; }
  .navbar .dropdown-menu .nav-item > .nav-item-link:before { display: none; }
  .navbar .dropdown-menu .nav-item > .nav-item-link:after { content: "\f061"; font: 900 10px "Font Awesome 5 Free"; color: #f4572e; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s, transform 0.25s var(--ort-ease); }
  .navbar .dropdown-menu .nav-item > .nav-item-link:hover { background: var(--ort-soft); color: var(--ort-navy); }
  .navbar .dropdown-menu .nav-item > .nav-item-link:hover:after { opacity: 1; transform: none; }

  /* Products: full-width panel with the eight sections and the catalogue shortcuts */
  .navbar .dropdown-menu.mega-dropdown-menu { margin-top: 0; padding: 0; border: 0; border-top: 1px solid var(--ort-line); border-radius: 0 0 var(--ort-r-lg) var(--ort-r-lg); overflow: hidden; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block { padding: 44px 20px 40px; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block .nav-title { margin-bottom: 8px; font-size: 17px; line-height: 1.3; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block .nav-title a { color: var(--ort-deep); }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block .nav-title a:hover { color: #f4572e; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block .nav-item > .nav-item-link { padding: 0; font-size: 15px; line-height: 32px !important; white-space: normal; border-radius: 0; color: var(--ort-text); }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block .nav-item > .nav-item-link:hover { background: none; color: #f4572e; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block .nav-item > .nav-item-link:after { display: none; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured { position: relative; isolation: isolate; padding: 44px 56px 44px 64px; background: var(--ort-navy) !important; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured:before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ort-hex); opacity: 0.9; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .menu-shape { display: none; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-title { font-size: 24px; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-desc { margin-bottom: 14px; color: rgba(255, 255, 255, 0.8) !important; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-item { flex: 0 0 100%; max-width: 100%; margin: 0; padding: 0; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-item .nav-item-link { justify-content: flex-start; margin: 0; padding: 9px 0; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); line-height: 1.4 !important; font-size: 15px; font-weight: 600; color: #fff; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-item .nav-item-link:after { opacity: 1; transform: none; margin-left: auto; color: #ff9a7c; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-item .nav-item-link:hover { background: none; color: #ffb199; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .btn { margin-top: 22px !important; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .btn-primary { background: #fff; color: var(--ort-navy); }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .btn-primary:hover { background: #f4572e; color: #fff; box-shadow: none; }

  /* sticky menu bar: shorter, with a soft shadow */
  .navbar.is-sticky { height: 72px !important; max-height: 72px !important; background-color: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 1px 0 var(--ort-line), 0 10px 30px rgba(23, 26, 74, 0.08); }
  .navbar.is-sticky > .container-fluid { height: 72px; }
  .navbar.is-sticky .navbar-brand { line-height: 72px; }
  .navbar.is-sticky .navbar-brand img { width: 200px; }
  .navbar.is-sticky .navbar-nav > .nav-item > .nav-item-link { line-height: 72px !important; }
  .navbar.is-sticky .navbar-nav > .nav-item > .nav-item-link:before { bottom: 20px; }
}
/* the products menu and the seven menu items fit laptops (1200 to 1399px) without wrapping */
@media (min-width: 1300px) and (max-width: 1399px) {
  .navbar .nav-item { margin-right: 18px; }
}
@media (min-width: 1200px) and (max-width: 1299px) {
  .navbar > .container-fluid { padding-left: 22px; padding-right: 22px; }
  .navbar .navbar-brand img { width: 196px !important; }
  .navbar .nav-item { margin-right: 10px; }
  .navbar .navbar-nav > .nav-item > .nav-item-link { font-size: 15px; letter-spacing: 0; padding-right: 13px; }
  .navbar .navbar-nav > .nav-item > .nav-item-link:before { right: 13px; }
  .navbar .btn-contact { padding: 0 20px; }
  .navbar > .container-fluid > .ml-30 { margin-left: 14px !important; }
  .topbar-contact { gap: 20px; }
  .header-topbar .header-topbar-search .form-control { width: 190px; }
  .header-topbar-search .ta-box { width: 360px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .navbar .nav-item.has-dropdown .mega-dropdown-menu .container { padding-left: 44px; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured { padding: 36px 28px 36px 40px; }
}

/* ================================================================
   2b. Off-canvas menu: tablets and phones (below 1200px)
   ================================================================ */
@media (max-width: 420px) {
  .header .navbar-brand img { max-width: 165px; }   /* the template shrinks the logo to 120px here, too small to read the thin lettering */
}
@media (max-width: 1199px) {
  html.menu-lock, html.menu-lock body { overflow: hidden; }
  html.menu-lock .quote-fab { display: none !important; }

  .navbar .navbar-collapse { background: rgba(13, 14, 67, 0.55); transition: opacity 0.25s ease, visibility 0.25s ease; }
  .navbar .navbar-collapse .navbar-nav {
    width: min(88vw, 380px); padding: 0; flex-wrap: nowrap; background: #fff; box-shadow: 0 0 60px rgba(13, 14, 67, 0.3);
    transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.2s ease; transition-delay: 0s; overscroll-behavior: contain;
  }
  .navbar .close-mobile-menu {
    top: 20px; right: auto; left: calc(min(88vw, 380px) - 56px); width: 38px; height: 38px; line-height: 36px; font-size: 15px;
    border: 1px solid var(--ort-line); color: var(--ort-navy); background: #fff; transition: opacity 0.25s ease 0.12s, transform 0.25s ease 0.12s, background 0.2s, color 0.2s;
  }
  .navbar .close-mobile-menu:hover { background: var(--ort-orange); border-color: var(--ort-orange); color: #fff; }

  /* search button beside the menu button: opens the menu with the cursor in the product search */
  .mm-search-btn { position: absolute; top: 50%; right: 54px; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; color: var(--ort-navy); font-size: 16px; transition: background-color 0.2s, color 0.2s; }
  .mm-search-btn:hover { background: var(--ort-soft); color: #f4572e; }

  /* panel head: logo + catalogue search */
  .mm-head { padding: 20px 24px 18px; border-bottom: 1px solid var(--ort-line); }
  .mm-logo { display: block; width: 170px; }
  .mm-logo img { display: block; width: 170px; height: auto; }
  .mm-search { position: relative; margin: 16px 0 0; }
  .mm-search .form-control { height: 46px; padding: 0 50px 0 16px; border: 1px solid var(--ort-line-2); border-radius: var(--ort-r-sm); background: var(--ort-soft); font-size: 14px; }
  .mm-search .form-control:focus { background: #fff; border-color: var(--ort-navy); box-shadow: 0 0 0 3px rgba(46, 49, 146, 0.12); }
  .mm-search button { position: absolute; top: 4px; right: 4px; width: 38px; height: 38px; border: 0; border-radius: 6px; background: var(--ort-navy); color: #fff; font-size: 14px; transition: background 0.2s; }
  .mm-search button:hover { background: var(--ort-orange); }
  .mm-search .ta-box { top: calc(100% + 6px); }

  /* menu items */
  .navbar .navbar-nav > .nav-item { margin: 0; border-bottom: 1px solid var(--ort-line); }
  .navbar .navbar-nav > .nav-item > .nav-item-link { padding: 15px 60px 15px 24px; font-size: 16px; line-height: 1.3 !important; color: var(--ort-ink); }
  .navbar .navbar-nav > .nav-item > .nav-item-link.active { color: var(--ort-orange); }
  .navbar .nav-item [data-toggle=dropdown]:after { padding-right: 24px; font-size: 14px; color: var(--ort-muted); }

  /* drop-downs open inline */
  .navbar .dropdown-menu { background: #f6f7fb; border: 0; border-left: 3px solid var(--ort-orange); border-radius: 0; box-shadow: none; padding: 0; }
  .navbar .navbar-nav .dropdown-menu.show { padding: 0; }
  .navbar .dropdown-menu .nav-item { padding: 0 20px 0 24px; }
  .navbar .dropdown-menu .nav-item > .nav-item-link { padding: 11px 0; font-size: 15px; line-height: 1.35 !important; color: #566074; border-bottom: 1px solid #e7eaf3; white-space: normal; }
  .navbar .dropdown-menu .nav-item:last-child > .nav-item-link { border-bottom: 0; }

  /* Products: the eight sections as a simple list, then the catalogue shortcuts */
  .navbar .dropdown-menu.mega-dropdown-menu .container { padding: 0; }
  .navbar .dropdown-menu.mega-dropdown-menu .row { margin: 0; }
  .navbar .dropdown-menu.mega-dropdown-menu > .nav-item { padding: 0; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block { flex: 0 0 100%; max-width: 100%; padding: 0 !important; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block > ul.nav { display: none; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block .nav-title { margin: 0 !important; line-height: 1.3; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block .nav-title a { display: block; padding: 11px 20px 11px 24px; font: 400 15px/1.35 Roboto, sans-serif; color: #566074; border-bottom: 1px solid #e7eaf3; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block .nav-title a:hover { color: var(--ort-orange); }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured { padding: 18px 24px 20px !important; margin: 0; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .menu-shape,
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-desc,
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .btn { display: none; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-title { font-size: 17px !important; margin-bottom: 4px !important; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-item { padding: 0; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-item .nav-item-link { padding: 9px 0; font-size: 15px; line-height: 1.3 !important; color: #fff; border-bottom: 0; white-space: normal; }
  .navbar .dropdown-menu.mega-dropdown-menu .nav-block-featured .nav-item [class*=icon-] { flex: 0 0 24px; width: 24px; height: 24px; margin-right: 12px; font-size: 11px; }

  /* panel foot: Shop Now, quote list, contact */
  .navbar .navbar-nav > .mm-shop { padding: 20px 24px 4px; border-bottom: 0; }
  .mm-shop .btn { display: flex; width: 100%; min-width: 0; height: 50px; align-items: center; justify-content: center; padding: 0 20px; line-height: 1; }
  .mm-foot { display: flex; flex-direction: column; padding: 12px 24px 28px; }
  .mm-foot a { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 15px; color: var(--ort-text); word-break: break-word; }
  .mm-foot a:hover { color: var(--ort-orange); }
  .mm-foot a i { flex: none; width: 20px; text-align: center; color: var(--ort-orange); font-size: 15px; }
  .mm-foot .mm-quote { font: 600 15px "Titillium Web", sans-serif; color: var(--ort-navy); }
  .mm-foot .mm-quote b { margin-left: auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--ort-orange); color: #fff; font-size: 12px; line-height: 26px; text-align: center; }
  .mm-foot .mm-quote b.is-zero { background: #dfe3ee; color: var(--ort-muted); }
}

/* ================================================================
   3. Type-ahead (header + homepage search)
   ================================================================ */
.ta-box {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 3000; max-height: 70vh; overflow: auto; padding: 6px;
  background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); box-shadow: var(--ort-sh-lg); text-align: left;
}
.ta-box[hidden] { display: none; }
.ta-label { padding: 12px 12px 6px; font: 700 11px/1 "Titillium Web", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #6b7489; }
.ta-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--ort-r-sm); color: var(--ort-ink); }
.ta-row:hover, .ta-row.is-active { background: #f1f3fb; color: var(--ort-ink); }
.ta-row img, .ta-noimg { flex: none; width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--ort-line); padding: 3px; }
.ta-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ta-main b { font: 600 15px "Titillium Web", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-main small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ort-muted); }
.ta-main small i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ta-dot { flex: none; width: 10px; height: 10px; margin: 0 18px; border-radius: 50%; }
.ta-n { margin-left: auto; padding: 1px 9px; border-radius: 20px; background: #f1f3fb; font-size: 12px; color: var(--ort-muted); }
.ta-all { display: block; margin-top: 4px; padding: 12px; border-radius: var(--ort-r-sm); background: var(--ort-soft); color: var(--ort-navy); font: 700 13.5px "Titillium Web", sans-serif; }
.ta-all:hover { background: var(--ort-navy); color: #fff; }
.ta-all i { margin-left: 6px; font-size: 11px; }
.ta-empty, .ta-note { padding: 14px 12px; font-size: 13.5px; color: #6b7488; }

/* ================================================================
   4. Quote list: floating button + drawer
   ================================================================ */
.quote-fab {
  position: fixed; left: 22px; bottom: 22px; z-index: 1500; display: none; align-items: center; gap: 10px; height: 54px; padding: 0 8px 0 20px;
  border-radius: 40px; background: #171a4a; color: #fff; font: 700 14.5px "Titillium Web", sans-serif; cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(13, 14, 67, 0.6); transition: background 0.2s;
}
.quote-fab.is-visible { display: inline-flex; }
.quote-fab:hover { background: #f4572e; }
.quote-fab i { font-size: 16px; }
.quote-fab b { min-width: 38px; height: 38px; border-radius: 50%; background: #f4572e; color: #fff; font-size: 14px; line-height: 38px; text-align: center; }
.quote-fab:hover b { background: #fff; color: #f4572e; }
.quote-fab b.is-zero { background: rgba(255, 255, 255, 0.2); }

.qdrawer { position: fixed; inset: 0; z-index: 4000; }
.qdrawer[hidden] { display: none; }
.qdrawer-backdrop { position: absolute; inset: 0; background: rgba(13, 14, 67, 0.55); opacity: 0; transition: opacity 0.25s; backdrop-filter: blur(2px); }
.qdrawer.is-open .qdrawer-backdrop { opacity: 1; }
.qdrawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: #fff; box-shadow: -30px 0 80px rgba(13, 14, 67, 0.3); transform: translateX(104%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.qdrawer.is-open .qdrawer-panel { transform: none; }
.qdrawer-panel:focus { outline: none; }
.qdrawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid var(--ort-line); }
.qdrawer-eyebrow { display: block; font: 700 11px/1 "Titillium Web", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #f4572e; margin-bottom: 6px; }
.qdrawer-head h2 { margin: 0; font-size: 26px; text-transform: none; color: var(--ort-ink); }
.qdrawer-x { width: 40px; height: 40px; border-radius: 50%; background: #f1f3f9; color: var(--ort-ink); cursor: pointer; }
.qdrawer-x:hover { background: #f4572e; color: #fff; }
.qdrawer-body { flex: 1; overflow: auto; padding: 8px 24px; }
.qlist { margin: 0; padding: 0; list-style: none; }
.qitem { position: relative; display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid #eef0f6; }
.qitem-img { flex: none; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ort-line); border-radius: var(--ort-r-sm); background: #fff; padding: 4px; }
.qitem-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.qitem-main { flex: 1; min-width: 0; }
.qitem-name { display: block; font: 600 16px/1.3 "Titillium Web", sans-serif; color: var(--ort-ink); padding-right: 26px; }
.qitem-name:hover { color: #f4572e; }
.qitem-main small { display: block; margin: 2px 0 10px; font-size: 12.5px; color: var(--ort-muted); }
.qitem-qty { display: inline-flex; align-items: center; border: 1px solid #dfe3ee; border-radius: 8px; overflow: hidden; }
.qitem-qty button { width: 30px; height: 32px; color: var(--ort-navy); font-size: 16px; cursor: pointer; }
.qitem-qty button:hover { background: #f1f3f9; }
.qitem-qty input { width: 44px; height: 32px; border: 0; border-left: 1px solid #dfe3ee; border-right: 1px solid #dfe3ee; text-align: center; font: 600 14px "Titillium Web", sans-serif; color: var(--ort-ink); -moz-appearance: textfield; }
.qitem-qty input::-webkit-outer-spin-button, .qitem-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qitem-rm { position: absolute; top: 14px; right: 0; width: 30px; height: 30px; border-radius: 50%; color: #a3abbd; font-size: 13px; cursor: pointer; }
.qitem-rm:hover { background: #fff1ed; color: #f4572e; }
/* items the team sources (no catalogue page) */
.qitem-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #6b7489; font-size: 20px; }
span.qitem-name { font-weight: 700; color: var(--ort-ink); }

/* short confirmation after "Add to quote" */
.ort-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1600; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(92vw, 470px);
  padding: 10px 10px 10px 18px; border-radius: 40px; background: #171a4a; color: #fff; font: 600 14.5px "Titillium Web", sans-serif;
  box-shadow: 0 16px 40px rgba(13, 14, 67, 0.4); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity 0.22s, transform 0.22s;
}
.ort-toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.ort-toast > i { flex: none; color: #3ddc97; font-size: 17px; }
.ort-toast.is-warn > i { color: #ffb199; }
.ort-toast > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ort-toast > button { flex: none; height: 32px; padding: 0 14px; border-radius: 30px; background: #f4572e; color: #fff; font: 700 13px "Titillium Web", sans-serif; cursor: pointer; transition: background 0.15s, color 0.15s; }
.ort-toast > button:hover { background: #fff; color: #f4572e; }
@media (max-width: 575px) { .ort-toast { bottom: 76px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .ort-toast { transition: none; } }
.qdrawer-foot { padding: 18px 24px 22px; border-top: 1px solid var(--ort-line); background: #fff; }
.qdrawer-foot .btn { height: 52px; }
.qdrawer-alt { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }
.qdrawer-alt a, .qdrawer-alt button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: 1px solid var(--ort-line-2); border-radius: var(--ort-r-sm); font: 600 14px "Titillium Web", sans-serif; color: var(--ort-navy); cursor: pointer; background: #fff; transition: border-color 0.2s, background-color 0.2s; }
.qdrawer-alt a:hover, .qdrawer-alt button:hover { border-color: var(--ort-navy); background: var(--ort-soft); }
.qdrawer-alt .fa-whatsapp { color: #25a244; font-size: 16px; }
.qdrawer-note { margin: 12px 0 0; font-size: 12.5px; text-align: center; color: var(--ort-muted); }
.qdrawer-empty { padding: 56px 8px; text-align: center; }
.qdrawer-empty > i { font-size: 40px; color: var(--ort-navy); opacity: 0.25; margin-bottom: 16px; }
.qdrawer-empty h3 { font-size: 22px; text-transform: none; margin-bottom: 8px; }
.qdrawer-empty p { margin-bottom: 22px; }

/* ================================================================
   5. Product card (catalogue page, homepage, related products)
   ================================================================ */
.pcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff;
  border: 1px solid var(--ort-line); border-radius: var(--ort-r); transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s;
}
.pcard:before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--c, #2e3192); z-index: 2; }
.pcard:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); }
.pcard-media { position: relative; display: block; aspect-ratio: 1 / 0.8; background: linear-gradient(180deg, #fff 0%, #f7f8fc 100%); border-bottom: 1px solid #f0f2f8; overflow: hidden; }
.pcard-media img { position: absolute; top: 18px; left: 18px; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: contain; mix-blend-mode: multiply; transition: transform 0.6s var(--ort-ease); }
.pcard:hover .pcard-media img { transform: scale(1.04); }
.pcard-noimg { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: color-mix(in srgb, var(--c, #2e3192) 10%, #fff); color: var(--c, #2e3192); font-size: 34px; }
.pmodal-media .pcard-noimg, .pd-media .pcard-noimg { position: static; margin: 0; }
.pcard-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 16px 18px 6px; }
.pcard-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 11px/1 "Titillium Web", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.pcard-sec { color: color-mix(in srgb, var(--c, #2e3192) 62%, #171a4a); }   /* the section colour, deepened so the small label stays readable */
.pcard-brand { padding: 4px 8px; border-radius: 5px; background: #f1f3f9; color: #566074; letter-spacing: 0.06em; }
/* brand and video labels laid over the picture (catalogue grid and related products) */
.pcard-media .pcard-brand {
  position: absolute; top: 16px; left: 12px; z-index: 2; max-width: calc(100% - 24px); padding: 5px 10px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 8px rgba(23, 26, 74, 0.12); color: #566074;
  font: 700 11px/1.2 "Titillium Web", sans-serif; letter-spacing: 0.07em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard-flag { position: absolute; left: 12px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: rgba(23, 26, 74, 0.88); color: #fff; font: 700 11.5px/1.3 "Titillium Web", sans-serif; letter-spacing: 0.02em; }
.pcard-flag i { font-size: 9px; }
.pcard-title { margin: 2px 0 0; font: 600 17px/1.3 "Titillium Web", sans-serif; letter-spacing: 0; text-transform: none; color: var(--ort-ink); }
.pcard-title a { color: inherit; }
.pcard-title a:hover { color: #f4572e; }
.pcard-type, .pcard-sizes { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ort-muted); }
.pcard-sizes b { color: #4b5469; font-weight: 600; margin-right: 4px; }
.pcard-actions { display: flex; gap: 8px; padding: 12px 18px 18px; }
.pcard-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border-radius: var(--ort-r-sm); cursor: pointer;
  font: 700 14px "Titillium Web", sans-serif; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.pcard-btn-ghost { border: 1.5px solid var(--ort-line); color: var(--ort-navy); background: #fff; }
.pcard-btn-ghost:hover { border-color: var(--ort-navy); background: var(--ort-navy); color: #fff; }
.pcard-btn-add { border: 1.5px solid var(--ort-navy); background: var(--ort-navy); color: #fff; }
.pcard-btn-add:hover { background: #f4572e; border-color: #f4572e; color: #fff; }
.pcard-btn-add.is-added, .btn.is-added { background: #e9f7ef; border-color: #bfe6cf; color: #157347; }
.pcard-btn-add i { font-size: 11px; }

.is-list .pcard { flex-direction: row; align-items: stretch; }
.is-list .pcard-media { flex: 0 0 160px; aspect-ratio: auto; min-height: 140px; border-bottom: 0; border-right: 1px solid #f0f2f8; }
.is-list .pcard-media img { top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
.is-list .pcard-body { justify-content: center; padding: 16px 20px; }
.is-list .pcard-actions { flex-direction: column; justify-content: center; flex: 0 0 150px; padding: 16px 18px 16px 0; }

@media (max-width: 575px) {
  .pcard-body { padding: 12px 12px 4px; }
  .pcard-title { font-size: 16px; }
  .pcard-media img { top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
  .pcard-actions { padding: 10px 12px 12px; gap: 6px; }
  .pcard-btn { height: 38px; font-size: 13px; }
  .pcard-btn-add { flex: 0 0 42px; }
  .pcard-btn-add span { display: none; }
  .pcard-sizes { display: none; }
  .is-list .pcard-media { flex-basis: 96px; min-height: 110px; }
  .is-list .pcard-actions { flex-basis: 56px; padding-right: 10px; }
  .quote-fab { left: 14px; bottom: 14px; height: 48px; }
  .quote-fab-text { display: none; }
  .quote-fab { padding-left: 14px; }
}

/* ================================================================
   6. Homepage sections
   ================================================================ */
/* ---- hero: four implant animations (hip, knee, shoulder, spine) play in turn on a dark stage behind the text ----
   The clips open and close on an empty field, so one fades into the next. The stage is masked into an ellipse,
   so its edges melt into the background whatever the screen width. */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--ort-deep); }
.hero-copy { max-width: 620px; }
.hero-title { margin: 0 0 22px; font-size: clamp(40px, 3vw + 20px, 68px); font-weight: 700; line-height: 1.04; letter-spacing: -0.026em; color: #fff; }
.hero-text { max-width: 520px; margin: 0 0 38px; font-size: 19px; line-height: 1.65; color: rgba(255, 255, 255, 0.84); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); color: #fff; font-size: 13px; cursor: pointer; transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.hero-btn:hover { background: #fff; border-color: #fff; color: var(--ort-navy); }
.hero-btn[hidden] { display: none; }

.reel { --reel-bg: #0c2150; --reel-glow: #17407f; --reel-dock: 104px; display: flex; flex-direction: column; justify-content: center; min-height: 740px; padding: 70px 0 calc(var(--reel-dock) + 44px); background: radial-gradient(70% 90% at 64% 40%, var(--reel-glow) 0%, var(--reel-bg) 64%); }
/* text side stays readable: the stage fades out towards the copy and towards the search card */
.reel:after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--reel-bg) 0%, rgba(12, 33, 80, 0.86) 30%, rgba(12, 33, 80, 0) 54%), linear-gradient(0deg, var(--reel-bg) 0%, var(--reel-bg) 14%, rgba(12, 33, 80, 0) 34%); }
.reel-stage { position: absolute; z-index: -1; top: 28px; bottom: calc(var(--reel-dock) + 72px); left: calc(50% + 150px); aspect-ratio: 16 / 9; transform: translateX(-50%); pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent); mask-image: radial-gradient(closest-side, #000 74%, transparent); mix-blend-mode: screen; }
.reel-stage > img, .reel-stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--ort-ease); }
.reel-stage > .is-on { opacity: 1; }
.reel.is-video .reel-still, .reel:not(.is-video) .reel-video { display: none; }
/* faint viewfinder corners around the implant */
.reel-frame { position: absolute; inset: 9% 30%; --c: rgba(255, 255, 255, 0.3); --l: 24px; background:
  linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px var(--l),
  linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px var(--l),
  linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px var(--l),
  linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px var(--l); background-repeat: no-repeat; }

.reel-body { position: relative; }
.reel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 48px; align-items: end; }
.hero-copy > * { animation: ortRise 0.9s var(--ort-ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.1s; }
.hero-copy > :nth-child(3) { animation-delay: 0.2s; }
/* what is on screen, with a link to those products */
.reel-caps { display: grid; animation: ortRise 0.9s 0.35s var(--ort-ease) both; }
.reel-cap { grid-area: 1 / 1; align-self: end; padding: 22px 24px 20px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(9, 26, 66, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ort-ease), transform 0.5s var(--ort-ease); }
.reel-cap.is-on { opacity: 1; transform: none; }
.reel-cap-no { display: flex; align-items: center; gap: 10px; font: 700 12.5px "Titillium Web", sans-serif; letter-spacing: 0.12em; color: #ff8a66; font-variant-numeric: tabular-nums; }
.reel-cap-no:after { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.reel-cap-title { margin: 10px 0 6px; font: 700 22px/1.2 "Titillium Web", sans-serif; color: #fff; }
.reel-cap-text { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }
.reel-cap-link { display: inline-flex; align-items: center; gap: 8px; font: 700 15px "Titillium Web", sans-serif; color: #fff; }
.reel-cap-link i { font-size: 11px; color: #f4572e; transition: transform 0.25s var(--ort-ease); }
.reel-cap-link:hover { color: #ff9a7c; }
.reel-cap-link:hover i { transform: translateX(4px); }
/* chapter tabs: each line fills while its animation plays */
.reel-rail { display: flex; align-items: center; gap: 22px; margin-top: 64px; animation: ortRise 0.9s 0.45s var(--ort-ease) both; }
.reel-tabs { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.reel-tab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 6px 0 4px; background: none; border: 0; text-align: left; color: rgba(255, 255, 255, 0.5); font-family: "Titillium Web", sans-serif; cursor: pointer; transition: color 0.3s; }
.reel-tab-no { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.reel-tab-name { font-size: 17px; font-weight: 600; }
.reel-tab-bar { position: relative; flex: 0 0 100%; height: 2px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.reel-tab-bar i { position: absolute; inset: 0; background: #f4572e; transform: scaleX(0); transform-origin: left; }
.reel-tab.is-on .reel-tab-no { color: #ff8a66; }
.reel-tab:hover, .reel-tab.is-on { color: #fff; }
.reel-tab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.reel.is-video .reel-tab:not(.is-on) .reel-tab-bar i { transform: scaleX(0) !important; }

/* ---- product finder and key figures, laid over the bottom of the hero ---- */
.find-dock { position: relative; z-index: 6; margin-top: -104px; padding: 0 !important; }
.find-card { overflow: hidden; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r-lg); box-shadow: 0 1px 3px rgba(13, 14, 67, 0.06), 0 30px 64px -26px rgba(13, 14, 67, 0.34); }
.find-main { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.4fr); gap: 40px; align-items: center; padding: 36px 44px 32px; }
.find-intro h2 { margin: 0 0 6px; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.012em; color: var(--ort-navy); }
.find-intro p { margin: 0; font-size: 16px; }
.find-form form { position: relative; display: flex; align-items: center; height: 62px; padding: 0 7px 0 22px; border: 1.5px solid var(--ort-line-2); border-radius: var(--ort-r); background: var(--ort-soft); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.find-form form:focus-within { border-color: var(--ort-navy); background: #fff; box-shadow: 0 0 0 4px rgba(46, 49, 146, 0.12); }
.find-form form > i { margin-right: 14px; color: var(--ort-navy); }
.find-form input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 500 17px "Titillium Web", sans-serif; color: var(--ort-ink); }
.find-form input::placeholder { color: #6b7489; font-weight: 400; }
.find-form input:focus-visible { outline: 0; }
.find-form button { flex: none; height: 48px; padding: 0 28px; border-radius: var(--ort-r-sm); background: #f4572e; color: #fff; font: 700 15px "Titillium Web", sans-serif; cursor: pointer; transition: background-color 0.2s; }
.find-form button:hover { background: var(--ort-orange-d); }
.find-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--ort-muted); }
.find-pop a { padding: 5px 13px; border: 1px solid var(--ort-line); border-radius: 30px; background: #fff; color: var(--ort-navy); font-weight: 500; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.find-pop a:hover { border-color: var(--ort-navy); background: var(--ort-navy); color: #fff; }
.find-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ort-line); background: var(--ort-soft); }
.find-stats li { display: flex; align-items: center; gap: 16px; padding: 24px 32px; }
.find-stats li + li { border-left: 1px solid var(--ort-line); }
.find-stats b { flex: none; font: 700 40px/1 "Titillium Web", sans-serif; letter-spacing: -0.02em; color: var(--ort-navy); font-variant-numeric: tabular-nums; }
.find-stats span { max-width: 160px; font-size: 14px; line-height: 1.4; color: var(--ort-text); }

/* ---- catalogue sections ---- */
.sec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sec-tile { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); color: inherit; transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s; }
.sec-tile:before { content: ""; position: absolute; z-index: 2; left: 24px; top: 0; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.sec-tile:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); color: inherit; }
.sec-tile-img { display: flex; align-items: center; justify-content: center; height: 196px; background: radial-gradient(70% 80% at 50% 62%, color-mix(in srgb, var(--c) 11%, #fff) 0%, #f7f8fc 72%); }
.sec-tile-img img { max-width: 76%; max-height: 74%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.6s var(--ort-ease); }
.sec-tile-img i { font-size: 54px; color: var(--c); }
.sec-tile:hover .sec-tile-img img { transform: scale(1.04); }
/* Section photos: one 4:3 picture per section, edge to edge */
.sec-tile-img.is-photo { height: auto; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ort-soft); }
.sec-tile-img.is-photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; mix-blend-mode: multiply; transition: transform 0.8s var(--ort-ease); }
.sec-tile:hover .sec-tile-img.is-photo img { transform: scale(1.04); }
.sec-tile-title { margin: 22px 24px 6px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ort-ink); }
.sec-tile-tag { margin: 0 24px 18px; font-size: 15px; line-height: 1.55; color: var(--ort-text); }
.sec-tile-foot { display: flex; align-items: center; justify-content: space-between; margin: auto 24px 0; padding: 14px 0 20px; border-top: 1px solid #eef0f6; font-size: 13.5px; color: var(--ort-muted); }
.sec-tile-foot > span { font: 600 15px "Titillium Web", sans-serif; color: var(--ort-navy); transition: color 0.3s; }
.sec-tile:hover .sec-tile-foot > span { color: #f4572e; }
.sec-tile-foot i { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.5px solid var(--ort-line); border-radius: 50%; color: var(--ort-navy); font-size: 12px; transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.35s var(--ort-ease); }
.sec-tile:hover .sec-tile-foot i { background: var(--c); border-color: var(--c); color: #fff; transform: translateX(4px); }

/* ---- services: the list on the left, the picture of the chosen service on the right ---- */
.svcx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 64px; align-items: stretch; }
.svcx-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ort-line); }
.svcx-list li { border-bottom: 1px solid var(--ort-line); }
.svcx-item { position: relative; display: flex; align-items: center; gap: 20px; padding: 22px 8px 22px 24px; color: var(--ort-text); }
.svcx-item:hover { color: var(--ort-text); }
.svcx-item:before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 3px; background: #f4572e; transform: scaleY(0); transition: transform 0.4s var(--ort-ease); }
.svcx-item.is-on:before { transform: scaleY(1); }
.svcx-thumb { display: none; }
.svcx-text { flex: 1; min-width: 0; }
.svcx-text h3 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--ort-ink); }
.svcx-text p { max-height: 0; margin: 0; overflow: hidden; opacity: 0; font-size: 15px; line-height: 1.6; transition: max-height 0.5s var(--ort-ease), opacity 0.4s, margin-top 0.4s; }
.svcx-item.is-on .svcx-text p { max-height: 120px; margin-top: 8px; opacity: 1; }
.svcx-item > i { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1.5px solid var(--ort-line); border-radius: 50%; color: var(--ort-navy); font-size: 12px; transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.35s var(--ort-ease); }
.svcx-item.is-on > i, .svcx-item:hover > i { background: #f4572e; border-color: #f4572e; color: #fff; }
.svcx-item:hover > i { transform: translateX(4px); }
.svcx-media { position: relative; min-height: 470px; overflow: hidden; border-radius: var(--ort-r-lg); background: var(--ort-deep); box-shadow: var(--ort-sh-lg); }
.svcx-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.7s var(--ort-ease), transform 1.4s var(--ort-ease); }
.svcx-media img.is-on { opacity: 1; transform: none; }

/* why us */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.why-item { padding: 32px 30px; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s; }
.why-item:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); }
.why-item h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; text-transform: none; color: var(--ort-ink); }
.why-item p { margin: 0; font-size: 15px; }
a.why-item { display: block; color: var(--ort-text); }
a.why-item:hover { color: var(--ort-text); }
a.why-item:hover h3 { color: #f4572e; }
/* cards that are links show a small arrow after their title instead of a separate "Learn more" line */
a.why-item h3:after, .svc-card h3:after, .news-card h3:after { content: "\f061"; display: inline-block; margin-left: 10px; font: 900 0.55em "Font Awesome 5 Free"; vertical-align: 0.2em; color: #f4572e; transition: transform 0.2s; }
a.why-item:hover h3:after, .svc-card:hover h3:after, .news-card:hover h3:after { transform: translateX(4px); }
.why-more { display: inline-block; margin-top: 14px; font: 700 14px "Titillium Web", sans-serif; color: var(--ort-navy); }
.why-more i { margin-left: 6px; font-size: 11px; transition: transform 0.2s; }
a.why-item:hover .why-more i { transform: translateX(4px); }

/* services row */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.svc-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: var(--ort-r); color: var(--ort-text); box-shadow: var(--ort-sh); transition: box-shadow 0.3s var(--ort-ease); }
.svc-card:hover { box-shadow: var(--ort-sh-lg); color: var(--ort-text); }
.svc-card img { width: 100%; height: 190px; object-fit: cover; }
.svc-card-body { position: relative; padding: 24px 26px 26px; flex: 1; display: flex; flex-direction: column; }
.svc-card h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; text-transform: none; color: var(--ort-ink); }
.svc-card p { margin: 0; font-size: 15px; flex: 1; }

/* branches */
.branch-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.branch { display: flex; flex-direction: column; padding: 24px 22px; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s; }
.branch:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); }
.branch-role { margin-bottom: 8px; font: 700 11px/1 "Titillium Web", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #f4572e; }
.branch h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; text-transform: none; }
.branch p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; flex: 1; }
.branch a.map { font: 700 13.5px "Titillium Web", sans-serif; color: var(--ort-navy); word-break: break-word; }
.branch a.map i { margin-right: 6px; color: #f4572e; }
.branch.is-hq { background: var(--ort-navy); border-color: var(--ort-navy); }
.branch.is-hq h3, .branch.is-hq p { color: #fff; }
.branch.is-hq p { opacity: 0.85; }
.branch.is-hq .branch-role { color: #ff9a7c; }
.branch.is-hq a.map { color: #fff; }

/* closing call to action: deep navy band with the honeycomb texture */
.quote-band { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0 !important; color: #fff; background: linear-gradient(135deg, var(--ort-deep) 0%, var(--ort-navy-d) 55%, var(--ort-navy) 100%); }
.quote-band:before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ort-hex); -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 90%); mask-image: linear-gradient(90deg, transparent 20%, #000 90%); }
.quote-band h2 { margin-bottom: 14px; font-size: clamp(30px, 1.5vw + 19px, 44px); font-weight: 700; line-height: 1.14; letter-spacing: -0.018em; color: #fff; }
.quote-band p { max-width: 620px; margin-bottom: 0; font-size: 17px; color: rgba(255, 255, 255, 0.84); }
.quote-band-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; }
.quote-band-btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* about */
.about-ort-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 80px; align-items: center; }
.about-ort-media { position: relative; padding: 0 0 64px; }
.about-ort-media .main { display: block; width: 80%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ort-r-lg); box-shadow: var(--ort-sh-lg); }
.about-ort-media .sub { position: absolute; right: 0; bottom: 0; width: 50%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ort-r-lg); border: 8px solid var(--ort-soft); box-shadow: var(--ort-sh-lg); }
.about-ort-badge { position: absolute; left: -20px; top: 40px; padding: 18px 22px 16px; border-radius: var(--ort-r); background: var(--ort-navy); color: #fff; box-shadow: var(--ort-sh-lg); }
.about-ort-badge b { display: block; font: 700 38px/1 "Titillium Web", sans-serif; letter-spacing: -0.01em; }
.about-ort-badge span { display: block; max-width: 118px; margin-bottom: 8px; font-size: 12.5px; line-height: 1.35; opacity: 0.85; }
.about-ort-text > p { margin: 0; font-size: 17px; line-height: 1.75; }
.about-ort-list { display: grid; gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; }
.about-ort-list li { display: flex; gap: 16px; align-items: flex-start; font-size: 15px; line-height: 1.6; }
.about-ort-list li > i { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: #e4e7f8; color: var(--ort-navy); font-size: 12px; }
.about-ort-list b { display: block; color: var(--ort-ink); font: 600 18px "Titillium Web", sans-serif; }
.about-ort-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; margin-top: 34px; }
.about-ort-person { display: flex; align-items: center; gap: 14px; }
.about-ort-person img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid #fff; box-shadow: var(--ort-sh); }
.about-ort-person b { display: block; color: var(--ort-ink); font: 700 17px "Titillium Web", sans-serif; }
.about-ort-person span { font-size: 13.5px; color: var(--ort-muted); }

/* light variant of the service cards */
.svc-grid.is-light .svc-card { border: 1px solid var(--ort-line); box-shadow: none; transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s; }
.svc-grid.is-light .svc-card:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); }

/* service pages: "what it includes" grid, sub headings, process steps */
.ort-sub { margin: 0 0 22px; font-size: 26px; text-transform: none; color: var(--ort-ink); }
.inc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 48px; padding: 0; list-style: none; }
.inc-grid li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); }
.inc-grid li > i { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; background: #e4e7f8; color: var(--ort-navy); font-size: 12px; }
.inc-grid b { display: block; margin-bottom: 2px; color: var(--ort-ink); font: 600 17px "Titillium Web", sans-serif; }
.inc-grid span { font-size: 15px; line-height: 1.6; }
.proc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.proc { position: relative; padding: 36px 28px 30px; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); }
.proc:before { content: ""; position: absolute; left: 28px; top: 0; width: 44px; height: 4px; border-radius: 0 0 4px 4px; background: #f4572e; }
.proc-no { display: block; margin-bottom: 14px; font: 700 40px/1 "Titillium Web", sans-serif; color: var(--ort-navy); }
.proc h3 { margin: 0 0 8px; font-size: 20px; text-transform: none; color: var(--ort-ink); }
.proc p { margin: 0; font-size: 15px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 72px; align-items: stretch; }
.faq-media { position: relative; min-height: 440px; }
.faq-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--ort-r-lg); box-shadow: var(--ort-sh-lg); }
.faq-more { display: inline-block; margin-top: 26px; }
.faq-main .accordion-item:first-child .accordion-header { border-top: 0; }
/* "Still have a question?" under the answers */
.faq-card { display: flex; align-items: center; gap: 20px; margin-top: 30px; padding: 20px 24px; border: 1px solid var(--ort-line); border-radius: var(--ort-r); background: var(--ort-soft); }
.faq-card-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 50px; height: 56px; background: #f4572e; color: #fff; font-size: 19px; -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.faq-card-body { min-width: 0; }
.faq-card-title { display: block; color: var(--ort-ink); font: 700 19px/1.3 "Titillium Web", sans-serif; }
.faq-card-text { display: block; margin: 2px 0 10px; font-size: 15px; line-height: 1.6; }
.faq-card-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.faq-card-links a { font: 700 15px "Titillium Web", sans-serif; color: var(--ort-navy); }
.faq-card-links a i { margin-right: 8px; color: #f4572e; }
.faq-card-links a:hover { color: #f4572e; }

/* Latest updates beside the questions: the newest articles stacked, one open with its picture and the others as
   strips. main.js opens the next one every 7 seconds (the line along the bottom fills meanwhile) and the one pointed
   at or tabbed to; .is-auto turns that on, .is-held makes it wait. */
.upd { --upd-strip: 76px; position: sticky; top: 110px; z-index: 0; display: flex; flex-direction: column; height: 100%; min-height: 560px; max-height: min(820px, calc(100vh - 130px)); padding: 10px; border-radius: var(--ort-r-lg); background: var(--ort-night); box-shadow: var(--ort-sh-lg); isolation: isolate; }
.upd:before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(90% 55% at 100% 0%, rgba(80, 86, 210, 0.24), transparent 70%), var(--ort-hex); background-size: auto, 42px 72px; pointer-events: none; }
.upd-top { display: flex; align-items: center; gap: 18px; padding: 10px 10px 18px 16px; }
.upd-head { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; margin: 0; font: 700 20px/1.2 "Titillium Web", sans-serif; text-transform: none; color: #fff; }
.upd-live { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #f4572e; }
.upd-live:after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #f4572e; animation: updPing 2.4s var(--ort-ease) infinite; }
.upd-all { display: inline-flex; flex: none; align-items: center; gap: 8px; font: 700 15px "Titillium Web", sans-serif; color: rgba(255, 255, 255, 0.8); }
.upd-all i { font-size: 11px; color: #f4572e; transition: transform 0.25s var(--ort-ease); }
.upd-all:hover { color: #fff; }
.upd-all:hover i { transform: translateX(4px); }
.upd-toggle { width: 36px; height: 36px; background: transparent; font-size: 11px; }
.upd-list { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; margin: 0; padding: 0; list-style: none; }
.upd-item { display: flex; flex: 0 0 var(--upd-strip); min-height: 0; transition: flex-grow 0.8s var(--ort-ease); }
.upd-item.is-on { flex-grow: 1; }
.upd-card { position: relative; flex: 1 1 auto; display: block; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--ort-r-sm); background: var(--ort-deep); color: #fff; isolation: isolate; }
.upd-card:hover { color: #fff; }
/* the picture breathes slowly while its update is open */
.upd-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; animation: updZoom 16s linear infinite alternate both; animation-play-state: paused; }
.upd.is-auto:not(.is-held) .upd-item.is-on .upd-card img { animation-play-state: running; }
/* open: a shade under the words; closed: a dark strip with the picture showing through */
.upd-card:before, .upd-card:after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.upd-card:before { background: linear-gradient(180deg, rgba(13, 14, 67, 0.2) 0%, rgba(13, 14, 67, 0) 26%, rgba(13, 14, 67, 0.55) 56%, rgba(13, 14, 67, 0.95) 100%); }
.upd-card:after { background: linear-gradient(90deg, rgba(13, 14, 67, 0.94) 30%, rgba(13, 14, 67, 0.7)); transition: opacity 0.6s var(--ort-ease); }
.upd-item.is-on .upd-card:after { opacity: 0; }
.upd-strip { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px; height: var(--upd-strip); padding: 0 18px 0 22px; transition: opacity 0.45s 0.25s var(--ort-ease); }
.upd-item.is-on .upd-strip { opacity: 0; transition: opacity 0.2s var(--ort-ease); }
.upd-no { flex: none; font: 700 13px/1 "Titillium Web", sans-serif; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: #ff8a66; }
.upd-strip-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 16px/1.3 "Titillium Web", sans-serif; color: rgba(255, 255, 255, 0.92); }
.upd-strip-go { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1.5px solid rgba(255, 255, 255, 0.3); border-radius: 50%; font-size: 11px; transition: background-color 0.25s, border-color 0.25s; }
.upd-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 96px 30px 28px; }
.upd-cap > * { opacity: 0; transform: translateY(14px); transition: opacity 0.2s, transform 0.2s; }
.upd-item.is-on .upd-cap > * { opacity: 1; transform: none; transition: opacity 0.7s var(--ort-ease), transform 0.7s var(--ort-ease); }
.upd-item.is-on .upd-cap > :nth-child(1) { transition-delay: 0.3s; }
.upd-item.is-on .upd-cap > :nth-child(2) { transition-delay: 0.38s; }
.upd-item.is-on .upd-cap > :nth-child(3) { transition-delay: 0.46s; }
.upd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font: 700 12.5px/1.4 "Titillium Web", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #ff8a66; }
.upd-meta .upd-no { display: inline-flex; align-items: center; gap: 12px; font-size: inherit; letter-spacing: inherit; }
.upd-meta .upd-no:after { content: ""; width: 26px; height: 1.5px; background: currentColor; }
.upd-meta .upd-no:only-child:after { display: none; }
.upd-meta-t { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.upd-sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.upd-title { display: -webkit-box; margin: 10px 0 8px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font: 700 24px/1.22 "Titillium Web", sans-serif; text-transform: none; color: #fff; }
.upd-text { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.upd-go { position: absolute; right: 26px; bottom: 30px; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: #f4572e; color: #fff; font-size: 14px; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s; }
.upd-go i { transition: transform 0.3s var(--ort-ease); }
.upd-item.is-on .upd-go { opacity: 1; transform: none; transition: opacity 0.5s 0.45s var(--ort-ease), transform 0.5s 0.45s var(--ort-ease); }
.upd-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.14); opacity: 0; transition: opacity 0.3s; }
.upd.is-auto .upd-item.is-on .upd-bar { opacity: 1; }
.upd-bar i { position: absolute; inset: 0; background: #f4572e; transform: scaleX(0); transform-origin: left; }
.upd.is-auto .upd-item.is-on .upd-bar i { animation: updFill 7s linear both; }
.upd.is-auto.is-held .upd-item.is-on .upd-bar i { animation-play-state: paused; }
@media (hover: hover) {
  .upd-card:hover:after { opacity: 0.8; }
  .upd-card:hover .upd-strip-go { background: #f4572e; border-color: #f4572e; }
  .upd-card:hover .upd-go i { transform: translateX(3px); }
}
@keyframes updPing { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes updZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes updFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1199px) {
  .upd-cap { padding: 0 84px 26px 24px; }
  .upd-title { font-size: 22px; }
  .upd-go { right: 22px; bottom: 26px; width: 46px; height: 46px; }
  .upd-strip-title { font-size: 15px; }
}
@media (max-width: 991px) {
  .upd { position: relative; top: auto; height: auto; min-height: 0; max-height: none; }
  .upd-list { flex: none; height: 540px; }
}
@media (max-width: 575px) {
  .faq-card { align-items: flex-start; gap: 16px; padding: 18px; }
  .faq-card-ic { width: 42px; height: 48px; font-size: 16px; }
  .upd { --upd-strip: 64px; padding: 8px; }
  .upd-top { gap: 12px; padding: 8px 6px 14px 12px; }
  .upd-head { gap: 10px; font-size: 18px; }
  .upd-all { font-size: 14px; }
  .upd-toggle { width: 34px; height: 34px; }
  .upd-list { height: 470px; }
  .upd-strip { gap: 12px; padding: 0 14px 0 16px; }
  .upd-strip-title { font-size: 15px; }
  .upd-strip-go { width: 30px; height: 30px; }
  .upd-cap { padding: 0 20px 22px; }
  .upd-title { margin: 8px 0 6px; font-size: 20px; }
  .upd-text { font-size: 14px; }
  .upd-go { top: 16px; right: 16px; bottom: auto; width: 42px; height: 42px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .upd-live:after, .upd .upd-card img { animation: none !important; }
  .upd-item, .upd-strip, .upd-card:after, .upd-cap > *, .upd-go { transition: none !important; }
  .upd-cap > *, .upd-go { transform: none !important; }
}

/* branch links */
.branch-links { display: flex; flex-direction: column; gap: 8px; }
.branch-links a.map { display: inline-flex; align-items: center; }

/* FAQ page */
.faqp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 44px; }
.faqp-search { position: relative; flex: 1 1 360px; max-width: 460px; margin: 0; }
.faqp-search i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #9aa3b8; font-size: 15px; pointer-events: none; }
.faqp-search input { width: 100%; height: 54px; padding: 0 20px 0 48px; border: 1.5px solid var(--ort-line-2); border-radius: 30px; background: #fff; color: var(--ort-ink); font: 400 16px "Roboto", sans-serif; transition: border-color 0.2s, box-shadow 0.2s; }
.faqp-search input::placeholder { color: #9aa3b8; }
.faqp-search input:focus { outline: 0; border-color: var(--ort-navy); box-shadow: 0 0 0 4px rgba(46, 49, 146, 0.12); }
.faqp-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.faqp-chips button { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 8px 0 18px; border: 1.5px solid var(--ort-line-2); border-radius: 30px; background: #fff; color: var(--ort-navy); font: 600 15px "Titillium Web", sans-serif; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.faqp-chips button span { min-width: 28px; padding: 3px 8px; border-radius: 20px; background: #eef0fb; color: var(--ort-navy); font: 700 12px/1.3 "Titillium Web", sans-serif; text-align: center; }
.faqp-chips button:hover { border-color: var(--ort-navy); }
.faqp-chips button.is-on { background: var(--ort-navy); border-color: var(--ort-navy); color: #fff; }
.faqp-chips button.is-on span { background: rgba(255, 255, 255, 0.2); color: #fff; }
.faqp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.faqp-group + .faqp-group { margin-top: 52px; }
.faqp-group[hidden], .faqp .accordion-item[hidden], .faqp-empty[hidden] { display: none; }
.faqp-group-title { margin: 0 0 22px; font-size: 26px; text-transform: none; color: var(--ort-ink); }
.faqp .accordion { border-top: 4px solid var(--ort-navy); }
.faqp .accordion-item:first-child { border-top: 0; }
.faqp .accordion-body p { font-size: 16px; line-height: 1.75; }
.faqp .accordion-body a { color: var(--ort-navy); text-decoration: underline; text-underline-offset: 2px; }
.faqp .accordion-body a:hover { color: #f4572e; }
.faqp-empty { padding: 44px 28px; text-align: center; border: 1.5px dashed #d6dbea; border-radius: var(--ort-r); background: #fafbfe; }
.faqp-empty h2 { margin: 0 0 8px; font-size: 24px; text-transform: none; color: var(--ort-ink); }
.faqp-empty p { margin: 0 0 22px; }
.faqp-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.help-card { padding: 32px 28px 30px; border-radius: var(--ort-r-lg); color: rgba(255, 255, 255, 0.85); background: linear-gradient(135deg, #14165c, #2e3192); }
.help-card h2 { margin: 0 0 8px; color: #fff; font-size: 22px; text-transform: none; }
.help-card p { margin: 0 0 16px; color: rgba(255, 255, 255, 0.82); font-size: 15px; }
.help-card ul { margin: 0 0 24px; padding: 0; list-style: none; }
.help-card li { display: flex; align-items: center; gap: 14px; padding: 7px 0; font-size: 15px; }
.help-card li i { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--ort-r-sm); background: rgba(255, 255, 255, 0.12); color: #ff9a7c; font-size: 14px; }
.help-card li a { color: #fff; font-weight: 600; word-break: break-word; }
.help-card li a:hover { color: #ff9a7c; }
.faqp-links { padding: 24px 28px 14px; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); }
.faqp-links h2 { margin: 0 0 6px; font-size: 20px; text-transform: none; color: var(--ort-ink); }
.faqp-links a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid #eef0f6; color: var(--ort-navy); font: 600 15px "Titillium Web", sans-serif; }
.faqp-links h2 + a { border-top: 0; }
.faqp-links a i { font-size: 11px; color: #f4572e; transition: transform 0.2s; }
.faqp-links a:hover { color: #f4572e; }
.faqp-links a:hover i { transform: translateX(4px); }

/* news cards + article page */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.news-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); color: var(--ort-text); transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s; }
.news-card:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); color: var(--ort-text); }
.news-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ort-soft); }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ort-ease); }
.news-card:hover .news-card-img img { transform: scale(1.04); }
.news-card-body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.news-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #f4572e; font: 700 12px/1 "Titillium Web", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.news-card-meta time { color: var(--ort-muted); font-weight: 600; letter-spacing: 0.03em; text-transform: none; }
.news-card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; text-transform: none; color: var(--ort-ink); }
.news-card:hover h3 { color: var(--ort-navy); }
.news-card p { flex: 1; margin: 0; font-size: 15px; line-height: 1.65; }
.art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; }
.art-hero { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 34px; border-radius: var(--ort-r-lg); box-shadow: var(--ort-sh-lg); }
.art-body p { margin: 0 0 20px; font-size: 17px; line-height: 1.85; }
.art-foot { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.art-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.art-more { padding: 24px 28px 10px; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); }
.art-more h2 { margin: 0 0 8px; font-size: 20px; text-transform: none; color: var(--ort-ink); }
.art-more a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid #eef0f6; }
.art-more h2 + a { border-top: 0; }
.art-more img { flex: none; width: 78px; height: 60px; border-radius: 8px; object-fit: cover; }
.art-more span { display: block; margin-bottom: 5px; color: #f4572e; font: 700 11px/1 "Titillium Web", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.art-more b { color: var(--ort-ink); font: 600 16px/1.35 "Titillium Web", sans-serif; }
.art-more a:hover b { color: #f4572e; }

/* testimonials + narrow form wrapper */
.form-narrow { max-width: 880px; margin: 0 auto; }
.tst-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tst-card { position: relative; margin: 0; padding: 34px 32px 30px; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); }
.tst-card blockquote { margin: 0 0 22px; padding: 0; border: 0; font-size: 16px; line-height: 1.75; color: var(--ort-text); }
.tst-card figcaption b { display: block; color: var(--ort-ink); font: 700 18px "Titillium Web", sans-serif; }
.tst-card figcaption span { font-size: 14px; color: var(--ort-muted); }
.photo-strip.is-two { grid-template-columns: repeat(2, 1fr); }

/* careers */
.job-card { padding: 44px 48px 48px; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r-lg); box-shadow: var(--ort-sh-sm); }
.job-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.job-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.job-tag { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 30px; background: #eef0fb; color: var(--ort-navy); font: 700 14px "Titillium Web", sans-serif; }
.job-tag.is-closed { background: #fdeceb; color: #b3361b; }
.job-tag.is-open { background: #e6f6ec; color: #157347; }
.job-deadline { text-align: right; font-size: 13.5px; color: var(--ort-muted); }
.job-deadline b { display: block; color: var(--ort-navy); font: 700 18px "Titillium Web", sans-serif; }
.job-title { margin: 0 0 14px; font-size: 36px; text-transform: none; color: var(--ort-ink); }
.job-intro { margin: 0 0 28px; font-size: 17px; line-height: 1.75; }
.job-more > summary { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border: 1.5px solid var(--ort-line-2); border-radius: 30px; color: var(--ort-navy); font: 700 15px "Titillium Web", sans-serif; cursor: pointer; list-style: none; transition: background-color 0.2s, border-color 0.2s; }
.job-more > summary::-webkit-details-marker { display: none; }
.job-more > summary:hover { border-color: var(--ort-navy); background: var(--ort-soft); }
.job-more > summary i { font-size: 11px; transition: transform 0.25s; }
.job-more[open] > summary i { transform: rotate(180deg); }
.job-more .when-open, .job-more[open] .when-closed { display: none; }
.job-more[open] .when-open { display: inline; }
.job-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 48px; margin-top: 34px; }
.job-cols h4 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ort-line); font-size: 19px; text-transform: none; color: var(--ort-ink); }
.job-list { margin: 0 0 30px; padding: 0; list-style: none; }
.job-list li { display: flex; align-items: flex-start; gap: 14px; padding: 0 0 12px; font-size: 15px; line-height: 1.65; }
.job-list li > i { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #e4e7f8; color: var(--ort-navy); font-size: 9px; }
.job-terms { margin-top: 12px; padding: 28px 30px; border-radius: var(--ort-r); background: var(--ort-soft); }
.job-terms h4 { margin: 0 0 10px; font-size: 19px; text-transform: none; color: var(--ort-ink); }
.job-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.job-terms .job-apply .btn { color: #fff; text-decoration: none; }
.job-terms p { margin: 0; font-size: 16px; line-height: 1.75; }
.job-terms p + p { margin-top: 12px; font-size: 14px; color: var(--ort-muted); }
.job-terms a { color: var(--ort-navy); text-decoration: underline; text-underline-offset: 2px; }

/* team cards (Leadership, Board) */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.team-card { width: calc((100% - 78px) / 4); overflow: hidden; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s; }
.team-grid.is-3 .team-card { width: calc((100% - 52px) / 3); }
.team-card:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); }
.team-card-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #eef0fb; }
.team-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.team-card-photo span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 68px/1 "Titillium Web", sans-serif; letter-spacing: 0.04em; background: linear-gradient(135deg, #14165c, #2e3192); }
.team-card-body { padding: 22px 24px 24px; border-top: 3px solid #f4572e; }
.team-card-body h3 { margin: 0 0 4px; font-size: 20px; text-transform: none; color: var(--ort-ink); }
.team-card-body p { margin: 0; font-size: 15px; color: var(--ort-muted); }

/* values: five cards, the last two centred */
.val-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.val-grid .why-item { grid-column: span 2; }
.val-grid .why-item:nth-child(4) { grid-column: 2 / span 2; }
.val-grid .why-item:nth-child(5) { grid-column: 4 / span 2; }

/* contact page */
.ct-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ct-card { display: flex; flex-direction: column; align-items: center; padding: 30px 26px; text-align: center; background: #fff; border: 1px solid var(--ort-line); border-top: 3px solid transparent; border-radius: var(--ort-r); transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s; }
.ct-card:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); border-top-color: #f4572e; }
.ct-card-ic { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: #eef0fb; color: var(--ort-navy); font-size: 20px; transition: background-color 0.3s, color 0.3s; }
.ct-card:hover .ct-card-ic { background: var(--ort-navy); color: #fff; }
.ct-card.is-wa .ct-card-ic { background: #e5f6ea; color: #1f9d55; }
.ct-card h3 { margin: 0 0 6px; font-size: 20px; text-transform: none; color: var(--ort-ink); }
.ct-card p { flex: 1; margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.ct-card .val { display: block; font: 700 17px/1.4 "Titillium Web", sans-serif; color: var(--ort-navy); word-break: break-word; }
.ct-card .val + .val { margin-top: 4px; }
.ct-card .val:hover { color: #f4572e; }
.ct-map { overflow: hidden; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); }
.ct-map iframe { display: block; width: 100%; height: 250px; border: 0; background: var(--ort-soft); }
.ct-map-body { padding: 22px 26px 24px; }
.ct-map-body h2 { margin: 0 0 6px; font-size: 20px; text-transform: none; color: var(--ort-ink); }
.ct-map-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.ct-map-body a { font: 700 14px "Titillium Web", sans-serif; color: var(--ort-navy); }
.ct-map-body a i { margin-left: 4px; font-size: 11px; }
.ct-map-body a:hover { color: #f4572e; }

/* mission & vision rows */
.mv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; }
.mv-row + .mv-row { margin-top: 104px; }
.mv-row.is-rev .mv-media { order: 2; }
.mv-media { position: relative; z-index: 0; }
.mv-media::before { content: ""; position: absolute; z-index: -1; inset: 22px -22px -22px 22px; border-radius: var(--ort-r-lg); background: #e9ecf9; }
.mv-row.is-rev .mv-media::before { inset: 22px 22px -22px -22px; }
.mv-media img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--ort-r-lg); box-shadow: var(--ort-sh-lg); }
.mv-text > p { margin: 0; font-size: 17px; line-height: 1.8; }

/* legal page: side menu + one document at a time */
.legal-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 44px; align-items: start; }
.legal-nav { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--ort-soft); border: 1px solid var(--ort-line); border-radius: var(--ort-r); }
.legal-nav a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--ort-r-sm); color: var(--ort-ink); font: 600 16px "Titillium Web", sans-serif; transition: background 0.2s, color 0.2s; }
.legal-nav a i { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 6px; background: #fff; color: var(--ort-navy); font-size: 15px; box-shadow: 0 1px 2px rgba(23, 26, 74, 0.08); transition: background 0.2s, color 0.2s; }
.legal-nav a:hover { background: #fff; color: var(--ort-navy); }
.legal-nav a.is-on { background: var(--ort-navy); color: #fff; }
.legal-nav a.is-on i { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }
.legal-doc { padding: 44px 48px 48px; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r-lg); box-shadow: var(--ort-sh-sm); }
.legal-doc + .legal-doc { margin-top: 28px; }
.js .legal-doc:not(.is-on) { display: none; }
.legal-doc > header { margin-bottom: 6px; padding-bottom: 22px; border-bottom: 1px solid var(--ort-line); }
.legal-title { margin: 0 0 10px; font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-transform: none; color: var(--ort-ink); }
.legal-date { display: flex; align-items: baseline; gap: 9px; margin: 0; color: var(--ort-muted); font-size: 15px; line-height: 1.6; }
.legal-date i { color: #f4572e; }
.legal-sec { margin-top: 34px; }
.legal-sec h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; text-transform: none; color: var(--ort-ink); }
.legal-sec p { margin: 0 0 12px; font-size: 16px; line-height: 1.8; }
.legal-sec p:last-child { margin-bottom: 0; }
.legal-sec ul { margin: 14px 0 0; padding: 0; list-style: none; }
.legal-sec li { position: relative; margin: 0 0 9px; padding-left: 24px; font-size: 16px; line-height: 1.7; }
.legal-sec li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: #f4572e; }
.legal-sec strong { color: var(--ort-ink); font-weight: 600; }
.legal-sec a, .legal-note a, .legal-doc .rq-check a { color: var(--ort-navy); text-decoration: underline; text-underline-offset: 2px; }
.legal-sec a:hover, .legal-note a:hover, .legal-doc .rq-check a:hover { color: #f4572e; }
.legal-note { margin-top: 18px; padding: 22px 26px; background: var(--ort-soft); border: 1px solid var(--ort-line); border-left: 3px solid var(--ort-navy); border-radius: var(--ort-r); }
.legal-note p { margin: 0 0 8px; font-size: 16px; line-height: 1.8; }
.legal-note ul { margin-top: 8px; }
.legal-note li { font-size: 16px; margin-bottom: 6px; }
.legal-note i { width: 20px; color: #f4572e; text-align: center; }
.legal-doc .rq-card { margin-top: 22px; padding: 0; border: 0; box-shadow: none; }
.legal-doc .rq-done { margin-top: 22px; padding: 44px 24px; border: 1px solid var(--ort-line); background: var(--ort-soft); }

/* ================================================================
   7. Cards used across inner pages
   ================================================================ */
.video-card {
  background: #fff; border: 1px solid var(--ort-line); border-bottom-width: 1px; border-radius: var(--ort-r);
  box-shadow: none; transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s;
}
.video-card:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); }
.video-card { display: flex; flex-direction: column; height: calc(100% - 30px); overflow: hidden; margin-bottom: 30px; }
.video-card-body { flex: 1; }
.video-card-media { position: relative; background: #0d0e43; aspect-ratio: 16 / 9; }
.video-card-media video, .video-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-card-media a { display: block; width: 100%; height: 100%; }
.video-card-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: #f4572e; font-size: 20px; }
.video-card-body { padding: 22px 26px 26px; }
.video-card-title { font-size: 20px; margin-bottom: 6px; text-transform: none; }
.video-card-desc { margin-bottom: 0; font-size: 15px; }
.video-card-link { display: inline-block; margin-top: 12px; font: 700 14px "Titillium Web", sans-serif; color: #f4572e; }
.video-card-link i { margin-left: 6px; font-size: 11px; }
.video-feature { position: relative; border-radius: var(--ort-r-lg); overflow: hidden; background: #0d0e43; box-shadow: var(--ort-sh-lg); }
.video-feature video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* catalogue downloads (Catalogues page) */
.cat-doc { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s; }
.cat-doc:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); }
.cat-doc-cover { position: relative; display: block; padding: 22px 22px 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, #fff), #fff); overflow: hidden; height: 270px; }
.cat-doc-cover img { display: block; width: 100%; box-shadow: 0 14px 34px rgba(13, 14, 67, 0.28); border-radius: 4px 4px 0 0; transform: translateY(0); transition: transform 0.5s var(--ort-ease); }
.cat-doc:hover .cat-doc-cover img { transform: translateY(-4px); }
.cat-doc-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.cat-doc-meta { display: flex; justify-content: space-between; margin-bottom: 8px; font: 700 11px/1 "Titillium Web", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 62%, #171a4a); }
.cat-doc-meta span:last-child { color: var(--ort-muted); letter-spacing: 0.06em; }
.cat-doc h3 { margin: 0 0 6px; font-size: 20px; text-transform: none; }
.cat-doc p { margin: 0 0 16px; font-size: 15px; flex: 1; }
.cat-doc-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-doc-btns a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border-radius: var(--ort-r-sm); font: 700 14px "Titillium Web", sans-serif; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.cat-doc-btns .primary { background: var(--ort-navy); color: #fff; }
.cat-doc-btns .primary:hover { background: #f4572e; }
.cat-doc-btns .ghost { border: 1.5px solid var(--ort-line); color: var(--ort-navy); }
.cat-doc-btns .ghost:hover { border-color: var(--ort-navy); background: var(--ort-soft); }
.cat-doc.is-feature { flex-direction: row; grid-column: 1 / -1; }
.cat-doc.is-feature .cat-doc-cover { flex: 0 0 340px; height: auto; padding: 30px 30px 0; background: linear-gradient(160deg, #14165c, #2e3192); }
.cat-doc.is-feature .cat-doc-body { padding: 40px 44px; justify-content: center; }
.cat-doc.is-feature h3 { font-size: 32px; margin-bottom: 12px; }
.cat-doc.is-feature p { font-size: 17px; max-width: 560px; flex: none; margin-bottom: 24px; }
.cat-doc.is-feature .cat-doc-btns a { flex: 0 0 auto; padding: 0 24px; height: 50px; }
.doc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.cat-doc-extra { display: block; margin: -4px 0 16px; font-size: 13px; color: var(--ort-muted); }
.cat-doc.is-photo .cat-doc-cover { height: 200px; padding: 0; background: #0d0e43; }
.cat-doc.is-photo .cat-doc-cover img { width: 100%; height: 100%; object-fit: cover; box-shadow: none; border-radius: 0; }
.cat-doc.is-photo:hover .cat-doc-cover img { transform: scale(1.04); }
.doc-note { margin: 32px 0 0; padding: 16px 20px; border-radius: var(--ort-r); background: #fff; border: 1px solid var(--ort-line); font-size: 15px; }
.doc-note a { font-weight: 700; color: var(--ort-navy); }
.doc-note a:hover { color: #f4572e; }

/* ================================================================
   8. Existing components (gallery, strips, service pages)
   ================================================================ */
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 40px; padding: 0; list-style: none; }
.gallery-filters button { font-family: "Titillium Web", sans-serif; font-weight: 600; font-size: 15px; padding: 10px 24px; border: 1.5px solid var(--ort-line-2); border-radius: 30px; background: #fff; color: #2e3192; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.gallery-filters button:hover { border-color: #2e3192; }
.gallery-filters button.active { background: #2e3192; border-color: #2e3192; color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.gallery-item { position: relative; display: block; overflow: hidden; border-radius: var(--ort-r); aspect-ratio: 4 / 3; background: var(--ort-soft); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ort-ease); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item .gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; color: #fff; font-weight: 600; font-size: 15px; background: linear-gradient(180deg, rgba(13, 14, 67, 0) 0%, rgba(13, 14, 67, 0.85) 100%); opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s var(--ort-ease); }
.gallery-item:hover .gallery-caption { opacity: 1; transform: none; }
.gallery-item.is-hidden { display: none; }
.photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.photo-strip a { display: block; border-radius: var(--ort-r); overflow: hidden; aspect-ratio: 4 / 3; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ort-ease); }
.photo-strip a:hover img { transform: scale(1.04); }
@media (max-width: 767px) { .photo-strip { grid-template-columns: repeat(2, 1fr); } }
/* service pages: side panels */
.sidebar .widget { padding: 32px; border: 1px solid var(--ort-line); border-radius: var(--ort-r-lg); box-shadow: var(--ort-sh-sm); }
.widget-banner { isolation: isolate; color: #fff; border: 0 !important; }
.widget-banner:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(23, 26, 74, 0.95), rgba(46, 49, 146, 0.86)); }
.widget-banner:after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ort-hex); -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%); }
.widget-banner .widget-desc { margin-bottom: 28px; font-size: 16px; color: rgba(255, 255, 255, 0.86); }
.widget-banner .phone-number { font: 700 19px "Titillium Web", sans-serif; }
.widget-banner .phone-number:hover { color: #ffb199 !important; }
.service-sidebar-list { padding: 0; margin: 0; list-style: none; }
.service-sidebar-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ort-line); font: 600 16px "Titillium Web", sans-serif; color: #2e3192; transition: color 0.2s; }
.service-sidebar-list a:after { content: "\f061"; font: 900 10px "Font Awesome 5 Free"; color: #f4572e; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s, transform 0.25s var(--ort-ease); }
.service-sidebar-list a:hover:after, .service-sidebar-list a.active:after { opacity: 1; transform: none; }
.service-sidebar-list a:hover, .service-sidebar-list a.active { color: #f4572e; }
.service-sidebar-list li:last-child a { border-bottom: 0; }

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

/* ================================================================
   9. Footer
   ================================================================ */
.footer { background: var(--ort-night); }
.footer .footer-primary { padding-top: 96px; padding-bottom: 40px; background-color: var(--ort-night); }
.footer .footer-primary:after { opacity: 0.5; }
.footer .footer-widget-title { margin-bottom: 22px; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; color: #fff; }
.footer .footer-widget-nav li a { display: inline-block; margin-bottom: 12px; font-size: 15px; color: rgba(255, 255, 255, 0.78); transition: color 0.2s; }
.footer .footer-widget-nav li a:hover { color: #fff; }
.footer-logo img { display: block; width: 240px; height: auto; margin-bottom: 10px; filter: brightness(0) invert(1); }
.footer-about { max-width: 330px; margin: 14px 0 18px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); }
.footer .contact-list li { font-size: 18px; line-height: 1.9; }
.footer .contact-list li a { color: #fff; }
.footer .contact-list li a:hover { color: #ff9a7c; }
.footer .contact-list li a .contact-icon { color: #f4572e; }
.footer .footer-widget-contact p { font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.footer .footer-widget-time { padding: 34px 32px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--ort-r-lg); background: rgba(255, 255, 255, 0.04); }
.footer-hours { margin: 0 0 26px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.footer .nl-title { margin: 0 0 10px; }
/* newsletter */
.nl-box { margin-top: 4px; }
.nl-box p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.nl-form { display: flex; align-items: stretch; gap: 8px; }
.nl-form input[type=email] { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--ort-r-sm); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 15px; transition: border-color 0.2s, background-color 0.2s; }
.nl-form input[type=email]::placeholder { color: rgba(255, 255, 255, 0.6); }
.nl-form input[type=email]:focus { outline: 0; border-color: #ff8a68; background: rgba(255, 255, 255, 0.14); }
.nl-form button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 48px; padding: 0; border: 0; border-radius: var(--ort-r-sm); background: #f4572e; color: #fff; font-size: 17px; cursor: pointer; transition: background-color 0.2s; }
.nl-form button:hover { background: var(--ort-orange-d); }
.nl-form button[disabled] { opacity: 0.7; cursor: wait; }
.nl-msg { min-height: 20px; margin: 10px 0 0 !important; font-size: 13.5px !important; }
.nl-msg.is-ok { color: #8be0ad !important; }
.nl-msg.is-err { color: #ffb4a6 !important; }
/* bottom bar: social links, legal links, copyright */
.footer .footer-secondary { padding: 26px 0; background: rgba(0, 0, 0, 0.22); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer .footer-secondary:after { display: none; }
.footer .footer-secondary .social-icons li a { width: 40px; height: 40px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.22) inset; transition: background-color 0.25s, box-shadow 0.25s; }
.footer .footer-secondary .social-icons li a i { width: auto; height: auto; background: none; color: #fff; font-size: 14px; }
.footer .footer-secondary .social-icons li a:hover { background: #f4572e; box-shadow: 0 0 0 1.5px #f4572e inset; }
.footer .footer-secondary .social-icons li a:hover i { background: none; color: #fff; }
.footer .footer-copyright-links li a { color: rgba(255, 255, 255, 0.86); }
.footer .footer-copyright-links li a:before { content: "\00b7"; color: rgba(255, 255, 255, 0.45); }
.footer .footer-copyright-links li a:hover { color: #fff; }
.footer-copy { margin: 4px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.footer .footer-secondary .col-12 { align-items: center; }
/* the web developer's mark: the logo on its own at the far right, brightening on hover */
.footer-maker { display: inline-flex; align-items: center; margin-left: auto; transition: filter 0.3s; }
.footer-maker img { display: block; width: 96px; height: auto; opacity: 0.9; }
.footer-maker:hover, .footer-maker:focus-visible { filter: brightness(1.15); }
.footer-maker:hover img, .footer-maker:focus-visible img { opacity: 1; }
@media (max-width: 767px) {
  .footer-maker { margin: 18px 0 0; }
  .footer .footer-secondary .social-icons { flex: 0 0 100%; margin: 0 0 18px !important; }
}
/* back to top: the ring fills as you read down the page */
#scrollTopBtn { width: 52px; height: 52px; bottom: 24px; box-shadow: none; background: conic-gradient(#f4572e calc(var(--p, 0) * 1%), rgba(46, 49, 146, 0.16) 0); }
#scrollTopBtn i { width: 44px; height: 44px; background: var(--ort-navy); font-size: 16px; }
#scrollTopBtn:hover i { background: #f4572e; }
#scrollTopBtn.actived { right: 24px; }

/* ================================================================
   10. Responsive
   ================================================================ */
@media (max-width: 1199px) {
  .about-ort-grid { gap: 48px; }
  .about-ort-badge { left: 14px; top: 14px; }
  .sec-grid, .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .branch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .find-main { grid-template-columns: 1fr; gap: 20px; }
  .why-grid, .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-doc.is-feature .cat-doc-cover { flex-basis: 280px; }
  .team-card { width: calc((100% - 52px) / 3); }
}
@media (max-width: 991px) {
  .mv-row { grid-template-columns: 1fr; gap: 40px; }
  .mv-row + .mv-row { margin-top: 72px; }
  .mv-row.is-rev .mv-media { order: 0; }
  .mv-media::before { display: none; }
  .legal-grid { grid-template-columns: 1fr; gap: 24px; }
  .legal-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .legal-nav a { flex: 1 1 auto; justify-content: center; }
  section, .ort-section { padding-top: 72px; padding-bottom: 72px; }
  .about-ort-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-media { min-height: 360px; }
  .team-card, .team-grid.is-3 .team-card { width: calc((100% - 26px) / 2); }
  .job-card { padding: 34px 30px 36px; }
  .job-cols { grid-template-columns: 1fr; }
  .tst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-grid { grid-template-columns: 1fr; gap: 40px; }
  .art-side { position: static; }
  .val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .val-grid .why-item, .val-grid .why-item:nth-child(4) { grid-column: auto; }
  .val-grid .why-item:nth-child(5) { grid-column: 1 / -1; }
  .faqp-grid { grid-template-columns: 1fr; gap: 40px; }
  .faqp-side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .about-ort-media { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 767px) {
  .sec-grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-tile:before { left: 14px; width: 32px; }
  .sec-tile-img { height: 118px; }
  .sec-tile-img.is-photo { height: auto; }
  .sec-tile-title { margin: 14px 14px 4px; font-size: 17px; }
  .sec-tile-tag { display: none; }
  .sec-tile-foot { margin: auto 14px 0; padding: 10px 0 14px; font-size: 12.5px; }
  .sec-tile-foot > span { font-size: 14px; }
  .sec-tile-foot i { width: 30px; height: 30px; }
  .why-grid, .svc-grid, .proc-grid, .inc-grid, .ct-cards { grid-template-columns: 1fr; }
  .val-grid { grid-template-columns: 1fr; }
  .val-grid .why-item:nth-child(5) { grid-column: auto; }
  .tst-grid, .news-grid { grid-template-columns: 1fr; }
  .art-body p { font-size: 16px; }
  .job-card { padding: 26px 20px 28px; }
  .job-title { font-size: 28px; }
  .job-deadline { text-align: left; }
  .faqp-side { grid-template-columns: 1fr; }
  .faqp-bar { margin-bottom: 32px; }
  .faqp-search { flex-basis: 100%; max-width: none; }
  .faqp-group-title { font-size: 22px; }
  .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-grid { grid-template-columns: 1fr; }
  .cat-doc.is-feature { flex-direction: column; }
  .cat-doc.is-feature .cat-doc-cover { flex-basis: auto; height: 300px; }
  .cat-doc.is-feature .cat-doc-body { padding: 26px 24px; }
  .cat-doc.is-feature h4 { font-size: 26px; }
  .cat-doc.is-feature .cat-doc-btns a { flex: 1 1 100%; padding: 0 16px; }
}
@media (max-width: 575px) {
  .legal-nav { flex-direction: column; }
  .legal-nav a { justify-content: flex-start; }
  .legal-doc { padding: 28px 20px 30px; border-radius: var(--ort-r); }
  .legal-title { font-size: 30px; }
  .legal-sec { margin-top: 28px; }
  .legal-sec h3 { font-size: 21px; }
  .legal-note { padding: 18px 18px; }
  .legal-doc .rq-fields { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .team-card, .team-grid.is-3 .team-card { width: 100%; max-width: 340px; }
  .team-card-photo span { font-size: 56px; }
  .branch-grid { grid-template-columns: 1fr; }
  .head-row { margin-bottom: 28px; }
}

/* ================================================================
   11. October rework: figure cards, featured products, ORT Difference, photo cards, locations map, logo marquee, newsletter
   ================================================================ */

/* ---- featured products ---- */
.feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.feat-grid.feat-n1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.feat-grid.feat-n2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.feat-grid.feat-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feat-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); overflow: hidden; transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s; }
.feat-card:hover { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); }
.feat-media { position: relative; display: block; aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid var(--ort-line); overflow: hidden; }
.feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 18px; opacity: 0; transition: opacity 0.9s ease; }
.feat-media img.is-on { opacity: 1; }
.feat-media .pcard-noimg { width: 120px; height: 120px; margin: -60px 0 0 -60px; font-size: 44px; }   /* a centred placeholder when a featured item has no picture */
.feat-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.feat-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(46, 49, 146, 0.25); transition: all 0.3s; }
.feat-dots i.is-on { width: 20px; border-radius: 4px; background: var(--ort-navy); }
.feat-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 18px; }
.feat-label { font: 700 11.5px/1 "Titillium Web", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ort-navy); }
.feat-title { margin: 8px 0 8px; font-size: 20px; line-height: 1.3; text-transform: none; }
.feat-title a { color: var(--ort-ink); }
.feat-title a:hover { color: #f4572e; }
.feat-desc { margin: 0 0 16px; font-size: 15px; line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feat-actions { display: flex; gap: 8px; margin-top: auto; }
.feat-actions .pcard-btn { flex: 1; justify-content: center; text-align: center; }
@media (max-width: 767px) {
  .feat-actions .pcard-btn { flex: none; width: 100%; height: 38px; }
  .feat-actions .pcard-btn-add span { display: inline; }
}
/* related products on the product page: same card as the catalogue grid */
.pd-related-grid .pcard-btn-add { flex: none; width: 100%; height: 44px; border-radius: var(--ort-r-sm); font-size: 15px; }
.pd-related-grid .pcard-btn-add span { display: inline; }
.pd-related-grid .pcard-btn-add i { font-size: 12px; }
@media (max-width: 575px) { .pd-related-grid .pcard-btn-add { height: 40px; padding: 0 6px; font-size: 13px; } }

/* ---- The ORT Difference: statement on the left, four promises on the right ---- */
.ort-diff { position: relative; isolation: isolate; overflow: hidden; padding: 128px 0 !important; color: #fff; background: var(--ort-deep); }
.ort-diff-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; mix-blend-mode: luminosity; }
.ort-diff:before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(23, 26, 74, 0.92) 0%, rgba(23, 26, 74, 0.72) 100%); }
.ort-diff:after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ort-hex); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
.ort-diff-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 88px; align-items: center; }
.ort-diff-eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 13px/1 "Titillium Web", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #ff8a68; }
.ort-diff-eyebrow:before { content: ""; width: 34px; height: 2px; background: currentColor; }
.ort-diff-title { margin: 22px 0 24px; font-size: clamp(32px, 1.9vw + 18px, 50px); font-weight: 700; line-height: 1.12; letter-spacing: -0.022em; color: #fff; text-transform: none; }
.ort-diff-title em { font-style: normal; color: #f4572e; }
.ort-diff-text { margin: 0; font-size: 18px; line-height: 1.75; color: rgba(255, 255, 255, 0.84); }
.ort-diff-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.ort-diff-points li { position: relative; padding: 30px 0 30px 34px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.ort-diff-points li:nth-last-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.ort-diff-points li:before { content: ""; position: absolute; left: 0; top: 35px; width: 16px; height: 18px; background: #f4572e; -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ort-diff-points b { display: block; margin-bottom: 6px; font: 700 22px/1.25 "Titillium Web", sans-serif; color: #fff; }
.ort-diff-points span { display: block; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }

/* ---- cards with a photo behind them, content centred ---- */
.why-grid.is-photo .why-item { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 270px; padding: 34px 28px; text-align: center; border: 0; color: #fff; background: #14165c center / cover no-repeat; isolation: isolate; }
.why-grid.is-photo .why-item:before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 18, 76, 0.5) 0%, rgba(16, 18, 76, 0.72) 45%, rgba(16, 18, 76, 0.9) 100%); transition: opacity 0.35s; }
.why-grid.is-photo .why-item:after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(46, 49, 146, 0.32); opacity: 0; transition: opacity 0.35s; }
.why-grid.is-photo .why-item:hover:after { opacity: 1; }
.why-grid.is-photo .why-item h3 { color: #fff; }
.why-grid.is-photo .why-item p { color: rgba(255, 255, 255, 0.86); }
.why-grid.is-photo a.why-item h3, .why-grid.is-photo a.why-item:hover h3 { color: #fff; }
.why-grid.is-photo a.why-item h3:after { color: #ff9a7c; }
/* plain white cards, centred */
.why-grid.is-center .why-item { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding-top: 38px; }
.why-grid.is-center .why-item:hover { box-shadow: inset 0 3px 0 #f4572e, var(--ort-sh); }

/* ---- Our locations ---- */
.loc-section { position: relative; color: #fff; background: radial-gradient(900px 600px at 80% 40%, rgba(80, 86, 210, 0.45), transparent 70%), linear-gradient(160deg, #0e104a, #1c1e63 60%, #14165c); overflow: hidden; }
.loc-section:before { content: ""; position: absolute; inset: 0; background: var(--ort-hex); -webkit-mask-image: radial-gradient(700px 520px at 78% 45%, #000, transparent 75%); mask-image: radial-gradient(700px 520px at 78% 45%, #000, transparent 75%); pointer-events: none; }
.loc-section .container { position: relative; }
.loc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 50px; align-items: center; }
.loc-list { display: grid; gap: 12px; margin: 30px 0 34px; }
.loc-item { display: flex; gap: 14px; padding: 15px 20px; border-radius: var(--ort-r); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); transition: background 0.25s, border-color 0.25s; }
.loc-item:hover, .loc-item.is-lit { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 138, 104, 0.7); }
.loc-item.is-hq { background: rgba(244, 87, 46, 0.18); border-color: rgba(255, 138, 104, 0.6); }
.loc-item h3 { margin: 0 0 3px; font-size: 19px; text-transform: none; color: #fff; }
.loc-item h3 small { margin-left: 8px; font: 700 11px "Titillium Web", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #ffb199; }
.loc-item p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.loc-item a { font: 700 13px "Titillium Web", sans-serif; color: #ff9a7c; }
.loc-item a i { margin-left: 4px; font-size: 10px; }
.loc-map { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 760 / 860; }
.loc-map-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.loc-pin { position: absolute; width: 0; height: 0; z-index: 2; }
.loc-pin i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28); transition: transform 0.25s; }
.loc-pin em { position: absolute; left: 12px; top: -10px; padding: 3px 9px; border-radius: 6px; background: rgba(14, 16, 74, 0.82); border: 1px solid rgba(255, 255, 255, 0.25); font: 600 12px/1.2 "Titillium Web", sans-serif; font-style: normal; color: #fff; white-space: nowrap; }
.loc-pin[data-pin="Kijabe"] em { left: auto; right: 12px; }
.loc-pin.is-lit i { transform: scale(1.6); background: #ff8a68; }
.loc-pin.is-hq i { left: -11px; top: -11px; width: 22px; height: 22px; background: #f4572e; box-shadow: 0 0 0 4px rgba(244, 87, 46, 0.35), 0 6px 16px rgba(0, 0, 0, 0.4); z-index: 2; }
.loc-pin.is-hq i:before, .loc-pin.is-hq i:after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(244, 87, 46, 0.8); animation: ortping 2.4s ease-out infinite; }
.loc-pin.is-hq i:after { animation-delay: 1.2s; }
.loc-pin.is-hq em { left: 20px; top: -13px; padding: 5px 12px; background: #f4572e; border-color: #f4572e; font-size: 13.5px; font-weight: 700; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
@keyframes ortping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }

/* ---- partner logos: a carousel beside its title (main.js) ---- */
.clients { padding: 76px 0 !important; border-top: 1px solid var(--ort-line); }
.clients-row { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: center; }
.clients-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--ort-navy); }
.clients-nav { display: flex; gap: 10px; margin-top: 20px; }
.clients-nav[hidden] { display: none; }
.logo-carousel { min-width: 0; }
.logo-carousel:not(.slick-initialized) { display: flex; gap: 16px; overflow: hidden; }
.logo-carousel .slick-list { margin: 0 -8px; padding: 6px 0 10px; }
.logo-item { padding: 0 8px; }
.logo-carousel:not(.slick-initialized) .logo-item { flex: 0 0 200px; padding: 0; }
.logo-item img { display: block; width: 100%; height: 108px; padding: 20px 26px; object-fit: contain; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r); transition: border-color 0.3s, box-shadow 0.3s var(--ort-ease); }
.logo-item:hover img { border-color: var(--ort-line-2); box-shadow: var(--ort-sh); }

@media (max-width: 1199px) {
  .feat-grid, .feat-grid.feat-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid.feat-n1 { grid-template-columns: minmax(0, 420px); }
  .loc-grid { grid-template-columns: 1fr; gap: 40px; }
  .loc-map { max-width: 460px; order: -1; }
  .ort-diff-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 767px) {
  .feat-grid, .feat-grid.feat-n2, .feat-grid.feat-n3 { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-body { padding: 14px 12px; }
  .feat-title { font-size: 16px; }
  .feat-desc { display: none; }
  .feat-actions { flex-direction: column; }
  .ort-diff { padding: 84px 0 !important; }
  .ort-diff-text { font-size: 17px; }
  .ort-diff-points { grid-template-columns: 1fr; }
  .ort-diff-points li { padding: 22px 0 22px 30px; }
  .ort-diff-points li:before { top: 27px; }
  .ort-diff-points li:nth-last-child(2) { border-bottom: 0; }
  .ort-diff-points b { font-size: 19px; }
  .why-grid.is-photo .why-item { min-height: 220px; }
}
@media (max-width: 480px) {
  .feat-grid.feat-n1 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .loc-pin.is-hq i:before, .loc-pin.is-hq i:after { animation: none; }
  .feat-media img { transition: none; }
}

/* ---- leadership rows ---- */
.team-grid.is-2 .team-card { width: 340px; max-width: 100%; }
.team-gap { height: 26px; }
@media (max-width: 767px) { .team-grid.is-2 .team-card { width: calc((100% - 26px) / 2); } }
@media (max-width: 480px) { .team-grid.is-2 .team-card { width: 100%; max-width: 340px; } }

/* ---- values: centred cards with a short orange rule under the title ---- */
.val-grid .why-item { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 40px 28px 34px; text-align: center; border-top: 3px solid transparent; background: #fff; }
.val-grid .why-item:hover { border-top-color: #f4572e; }
.val-grid .why-item h3 { position: relative; margin-bottom: 10px; padding-bottom: 14px; }
.val-grid .why-item h3:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 34px; height: 3px; margin-left: -17px; border-radius: 2px; background: #f4572e; }

@media (max-width: 767px) { .loc-pin.is-hq em { left: -34px; top: -46px; } .loc-pin em { font-size: 11px; padding: 2px 7px; } }

.legal-glance { margin: 22px 0 0; padding: 20px 24px; border-radius: var(--ort-r); background: #f2f4fc; border: 1px solid #dfe3f5; }
.legal-glance b { display: block; margin-bottom: 8px; font: 700 15px "Titillium Web", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ort-navy); }
.legal-glance ul { margin: 0; padding-left: 20px; }
.legal-glance li { margin: 0 0 6px; font-size: 16px; line-height: 1.65; }

/* ---------- Visitor statistics notice ---------- */
.ort-notice { position: fixed; z-index: 1200; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(760px, calc(100% - 28px)); display: flex; align-items: center; gap: 18px;
  padding: 14px 18px; border-radius: var(--ort-r); background: #171a4a; color: #dfe3f5; box-shadow: 0 18px 40px -12px rgba(10, 12, 40, .5); font-size: 14px; line-height: 1.5; }
.ort-notice p { margin: 0; flex: 1; }
.ort-notice a { color: #fff; text-decoration: underline; }
.ort-notice div { display: flex; gap: 8px; flex: none; }
.ort-notice button { height: 38px; padding: 0 16px; border: 0; border-radius: var(--ort-r-sm); background: #f4572e; color: #fff; font: 700 13.5px "Titillium Web", sans-serif; cursor: pointer; }
.ort-notice button.is-ghost { background: transparent; color: #dfe3f5; border: 1.5px solid rgba(255, 255, 255, .3); }
.ort-notice button:hover { filter: brightness(1.1); }
@media (max-width: 575px) { .ort-notice { flex-direction: column; align-items: stretch; gap: 10px; bottom: 10px; padding: 12px 14px; font-size: 13px; } .ort-notice div button { flex: 1; } }

/* ---- what clients say: one quote at a time, the next ones stacked behind it ---- */
.tsx-section { position: relative; overflow: hidden; background: var(--ort-soft); }
.tsx-section:before { content: ""; position: absolute; right: -120px; top: -60px; width: 520px; height: 600px; background: var(--ort-navy); opacity: 0.04; -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tsx { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; }
.tsx-nav { display: flex; align-items: center; gap: 12px; margin: 30px 0 28px; }
.tsx-nav[hidden] { display: none; }
.tsx-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1.5px solid #cfd4e6; border-radius: 50%; background: #fff; color: var(--ort-navy); font-size: 14px; cursor: pointer; transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.tsx-btn:hover { background: var(--ort-navy); border-color: var(--ort-navy); color: #fff; }
.tsx-count { display: inline-flex; align-items: baseline; gap: 6px; margin: 0 6px; font: 600 15px "Titillium Web", sans-serif; color: var(--ort-muted); font-variant-numeric: tabular-nums; }
.tsx-count b { font-size: 26px; color: var(--ort-navy); }
.tsx-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.tsx-share { font: 600 15px "Titillium Web", sans-serif; color: var(--ort-muted); text-decoration: underline; text-underline-offset: 3px; }
.tsx-share:hover { color: #f4572e; }
.tsx-stage { position: relative; display: grid; gap: 24px; }
.tsx-card { position: relative; display: flex; flex-direction: column; margin: 0; padding: 52px 54px 42px; background: #fff; border-radius: var(--ort-r-lg); box-shadow: var(--ort-sh-lg); }
.tsx-mark { position: absolute; top: -26px; left: 48px; display: flex; align-items: center; justify-content: center; width: 60px; height: 66px; background: #f4572e; color: #fff; font-size: 22px; -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tsx-card blockquote { margin: 0 0 30px; padding: 0; border: 0; font: 400 20px/1.65 "Titillium Web", sans-serif; color: var(--ort-deep); }
.tsx-card .tsx-by { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--ort-line); }
.tsx-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 58px; background: linear-gradient(135deg, var(--ort-navy), var(--ort-deep)); color: #fff; font: 700 18px "Titillium Web", sans-serif; letter-spacing: 0.04em; -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tsx-card .tsx-by b { display: block; font: 700 18px/1.3 "Titillium Web", sans-serif; color: var(--ort-navy); }
.tsx-card .tsx-by small { display: block; margin-top: 2px; font-size: 14px; color: var(--ort-muted); }
/* once the script runs: the cards share one place, the current one in front and the next two peeking out behind */
.tsx.is-ready .tsx-stage { gap: 0; padding: 26px 34px 34px 0; }
.tsx.is-ready .tsx-card { grid-area: 1 / 1; opacity: 0; transform-origin: 100% 100%; transform: translate(34px, 20px) scale(0.94); transition: opacity 0.6s var(--ort-ease), transform 0.7s var(--ort-ease), box-shadow 0.6s; pointer-events: none; }
.tsx.is-ready .tsx-card.is-next { opacity: 0.75; transform: translate(16px, 16px) scale(0.97); box-shadow: var(--ort-sh); }
.tsx.is-ready .tsx-card.is-next2 { opacity: 0.45; transform: translate(32px, 32px) scale(0.94); box-shadow: var(--ort-sh); }
.tsx.is-ready .tsx-card.is-on { z-index: 3; opacity: 1; transform: none; pointer-events: auto; }
.tsx.is-ready .tsx-card.is-next { z-index: 2; }
.tsx.is-ready .tsx-card.is-next2 { z-index: 1; }
.tsx.is-ready .tsx-card.is-out { z-index: 4; opacity: 0; transform: translate(-40px, 0) rotate(-2deg); }
.tsx.is-ready .tsx-card:not(.is-on) > * { visibility: hidden; }
@media (max-width: 991px) {
  .tsx { grid-template-columns: 1fr; gap: 36px; }
  .tsx-card { padding: 46px 30px 30px; }
  .tsx-card blockquote { font-size: 18px; }
  .tsx-mark { left: 28px; }
}
@media (max-width: 575px) {
  .tsx.is-ready .tsx-stage { padding: 26px 18px 22px 0; }
  .tsx-card blockquote { font-size: 17px; }
}

/* ---- homepage: tablets and phones ---- */
@media (max-width: 1199px) {
  .reel { min-height: 680px; }
  .reel-stage { left: calc(50% + 130px); }
  .reel-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; }
  .svcx { gap: 40px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .find-stats li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 26px; }
  .find-stats span { max-width: none; }
}
@media (max-width: 991px) {
  .page-hero { padding-top: clamp(150px, 34vw, 280px); }
  .page-hero-stage { bottom: auto; height: calc(clamp(150px, 34vw, 280px) + 120px); }
  .page-hero-stage img { object-position: center; }
  .page-hero-panel { width: auto; padding: 38px 40px 48px; }
  /* tablets and phones: the stage moves above the text, the caption shrinks to a line with its link */
  .reel { justify-content: flex-start; min-height: 0; padding: clamp(292px, 58vw, 420px) 0 calc(var(--reel-dock) + 36px); background: radial-gradient(90% 46% at 50% 22%, var(--reel-glow) 0%, var(--reel-bg) 72%); }
  .reel:after { background: linear-gradient(0deg, var(--reel-bg) 0%, var(--reel-bg) 52%, rgba(12, 33, 80, 0) 76%); }
  .reel-stage { top: 0; bottom: auto; left: 50%; height: clamp(310px, 62vw, 460px); }
  .reel-frame { inset: 10% 33%; --l: 18px; }
  .reel-grid { grid-template-columns: 1fr; gap: 0; }
  .reel-caps { order: -1; margin-bottom: 18px; }
  .reel-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .reel-cap-title { margin: 0; font-size: 17px; }
  .reel-cap-text { display: none; }
  .reel-cap-link { font-size: 14px; color: #ff9a7c; }
  .reel-rail { margin-top: 44px; }
  .find-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .find-stats li:nth-child(3) { border-left: 0; }
  .find-stats li:nth-child(n+3) { border-top: 1px solid var(--ort-line); }
  .svcx { grid-template-columns: 1fr; gap: 0; }
  .svcx-media { display: none; }
  .svcx-item { gap: 16px; padding: 16px 0; }
  .svcx-item:before { display: none; }
  .svcx-thumb { display: block; flex: none; width: 104px; height: 78px; border-radius: 12px; object-fit: cover; }
  .svcx-text h3 { font-size: 18.5px; }
  .svcx-text p { max-height: none; margin-top: 4px; opacity: 1; font-size: 15px; }
  .svcx-item.is-on .svcx-text p { margin-top: 4px; }
  .svcx-item > i { display: none; }
  .clients-row { grid-template-columns: 1fr; gap: 24px; }
  .clients-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .clients-nav { margin-top: 0; }
}
@media (max-width: 767px) {
  .hero-text { margin-bottom: 30px; font-size: 17px; }
  .page-hero-panel { margin: 0 calc(-1 * var(--ort-gutter)); padding: 30px var(--ort-gutter) 60px; border-radius: var(--ort-r-lg) var(--ort-r-lg) 0 0; }
  .page-hero-panel:after { right: -96px; bottom: -126px; }
  .page-hero-title { margin-bottom: 14px; }
  .page-hero-desc { font-size: 16px; }
  .reel { --reel-dock: 96px; }
  .reel-rail { gap: 14px; margin-top: 36px; }
  .reel-tabs { gap: 12px; }
  .reel-tab { gap: 0 6px; }
  .reel-tab-no { display: none; }
  .reel-tab-name { font-size: 15px; }
  .hero-btn { width: 40px; height: 40px; }
  .find-dock { margin-top: -96px; }
  .find-card { border-radius: var(--ort-r-lg); }
  .find-main { padding: 24px 20px 22px; gap: 16px; }
  .find-intro h2 { font-size: 22px; }
  .find-intro p { font-size: 15px; }
  .find-form form { height: 56px; padding: 0 5px 0 16px; }
  .find-form form > i { margin-right: 10px; }
  .find-form input { font-size: 16px; }
  .find-form button { height: 44px; padding: 0 16px; font-size: 14px; }
  .find-stats li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px; }
  .find-stats b { font-size: 30px; }
  .find-stats span { font-size: 13px; }
  .svcx-thumb { width: 88px; height: 70px; }
  .clients { padding: 56px 0 !important; }
  .clients-title { font-size: 21px; }
  .logo-item img { height: 88px; padding: 14px 18px; }
}

/* ---- page side margins: a little more air on tablets and phones; the logo and the menu button line up with the page ---- */
@media (max-width: 1199px) {
  :root { --ort-gutter: 24px; }
  .container { padding-left: var(--ort-gutter); padding-right: var(--ort-gutter); }
  .header .navbar > .container-fluid { padding-left: var(--ort-gutter); padding-right: var(--ort-gutter); }
  .header .navbar-brand { margin-left: 0; }
  .header .navbar .navbar-toggler { margin-right: 0; }
}
@media (max-width: 575px) {
  :root { --ort-gutter: 20px; }
  .footer .footer-widget-nav ul { columns: 2; column-gap: 24px; }
  .footer .footer-widget-nav li { break-inside: avoid; }
  section, .ort-section { padding-top: 64px; padding-bottom: 64px; }
  .quote-band { padding: 64px 0 !important; }
}

/* ================================================================
   12. Accessibility helpers
   ================================================================ */
/* Keyboard users can jump straight to the page content */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 3000; padding: 10px 18px; border-radius: 8px; background: var(--ort-navy); color: #fff; font: 700 14px "Titillium Web", sans-serif; transition: top 0.2s; }
.skip-link:focus { top: 12px; color: #fff; }
main:focus { outline: 0; }
/* Spam trap field in the forms: invisible to people, filled in by bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================================================================
   13. Motion: blocks rise into view as the page scrolls (main.js marks them with .rv)
   ================================================================ */
/* the state only lasts until the block is in place, so it may overrule the block's own settings */
.rv { opacity: 0 !important; transform: translateY(16px) !important; transition: opacity 0.7s var(--ort-ease), transform 0.7s var(--ort-ease) !important; transition-delay: var(--rv-d, 0s) !important; }
.rv.is-in { opacity: 1 !important; transform: none !important; }
@media print { .rv { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-copy > *, .reel-caps, .reel-rail { animation: none; }
  .page-hero-stage img, .page-hero-panel, .page-hero-panel > *, .page-hero-panel:after, .page-hero-title:after { animation: none; }
  .reel-stage > img, .reel-stage > video, .reel-cap { transition: none; }
  .svcx-media img { transition: none; }
  .tsx.is-ready .tsx-card, .js-img img[loading="lazy"] { transition: none; }
}

/* ---------- Vacancies from Talanta (careers + vacancy pages) ---------- */
.job-title a { color: inherit; }
.job-title a:hover { color: var(--ort-navy-d); }
.job-salary { font: 700 15px "Titillium Web", sans-serif; color: var(--ort-navy); }
.vac-body h2 { margin: 28px 0 12px; font-size: 22px; text-transform: none; color: var(--ort-ink); }
.vac-body h2:first-child { margin-top: 0; }
.vac-text { font-size: 16px; line-height: 1.75; }
.vac-text ul, .vac-text ol { margin: 0 0 12px; padding-left: 22px; }
.vac-text li { margin: 6px 0; }
.vac-text h3, .vac-text h4 { margin: 18px 0 8px; font-size: 18px; text-transform: none; color: var(--ort-ink); }
.vac-note { margin: 22px 0 0; padding: 14px 18px; border-radius: var(--ort-r); background: var(--ort-soft, #f5f7fb); font-size: 15px; }
.vac-wide { grid-column: 1 / -1; }
.vac-err { display: block; margin-top: 6px; font-size: 13.5px; color: #d93025; }
.vac-q { display: block; margin: 0 0 9px; font: 700 13.5px "Titillium Web", sans-serif; letter-spacing: 0.02em; color: #171a4a; }
.rq-field input.vac-file { height: auto; padding: 12px 14px; border-style: dashed; background: #fafbfe; cursor: pointer; }
.vac-k { display: block; font: 600 12px "Titillium Web", sans-serif; letter-spacing: 0.03em; color: var(--ort-muted); text-transform: uppercase; }
.rq-contact li span { min-width: 0; color: #171a4a; font-weight: 600; }
@media (max-width: 991px) { .vac-grid { grid-template-columns: minmax(0, 1fr); } .vac-grid .rq-side { position: static; } }
@media (max-width: 575px) { .rq-fields { grid-template-columns: minmax(0, 1fr); } .rq-card { padding: 24px 20px; } }
/* Vacancy: hand-off to the recruitment portal */
.vac-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.vac-apply-text { flex: 1 1 320px; }
.vac-apply-text h2 { margin: 0 0 6px; font-size: 22px; text-transform: none; color: var(--ort-ink); }
.vac-apply-text p { margin: 0; }
.vac-apply .rq-fine { flex: 1 1 100%; margin: 0; }

/* ==========================================================================
   Careers (jobs from Talanta)
   ========================================================================== */
.cr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.cr-title { margin: 0 0 10px; font-size: clamp(30px, 1.5vw + 19px, 44px); font-weight: 700; line-height: 1.14; letter-spacing: -0.018em; text-transform: none; color: var(--ort-ink); }
.cr-lead { margin: 0; max-width: 620px; font-size: 17px; }
.cr-count { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 104px; height: 104px; border-radius: 50%; background: var(--ort-deep) var(--ort-hex); color: rgba(255, 255, 255, 0.8); font: 600 14px/1 "Titillium Web", sans-serif; }
.cr-count b { font-size: 40px; line-height: 1; color: #fff; margin-bottom: 2px; }
.cr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cr-card { position: relative; display: flex; flex-direction: column; padding: 30px 32px 28px; background: #fff; border: 1px solid var(--ort-line); border-radius: var(--ort-r-lg); box-shadow: none; overflow: hidden; transition: box-shadow 0.3s var(--ort-ease), border-color 0.3s; }
.cr-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ort-orange); transform: scaleY(0); transform-origin: top; transition: transform 0.35s var(--ort-ease); }
.cr-card:hover, .cr-card:focus-within { box-shadow: var(--ort-sh); border-color: var(--ort-line-2); }
.cr-card:hover::before, .cr-card:focus-within::before { transform: scaleY(1); }
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cr-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 30px; background: var(--ort-soft); color: var(--ort-text); font: 600 14px "Titillium Web", sans-serif; }
.cr-chip i { color: var(--ort-orange); font-size: 12px; }
.cr-chip.is-mode { background: #eef0fb; color: var(--ort-navy); }
.cr-job { margin: 0 0 10px; font-size: 24px; line-height: 1.25; text-transform: none; }
.cr-job a { color: var(--ort-ink); }
.cr-job a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cr-job a:focus-visible { outline: none; }
.cr-card:focus-within { outline: 3px solid var(--ort-orange); outline-offset: 2px; }
.cr-sum { margin: 0 0 22px; font-size: 16px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cr-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px dashed var(--ort-line); }
.cr-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-pay { font: 700 17px "Titillium Web", sans-serif; color: var(--ort-navy); }
.cr-dl { font-size: 13.5px; color: var(--ort-muted); }
.cr-go { display: inline-flex; align-items: center; gap: 10px; flex: none; font: 700 15px "Titillium Web", sans-serif; color: var(--ort-navy); white-space: nowrap; }
.cr-go i { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ort-orange); color: #fff; font-size: 13px; transition: transform 0.25s var(--ort-ease); }
.cr-card:hover .cr-go i { transform: translateX(4px); }
.cr-notice { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 28px; padding: 22px 26px; border-radius: var(--ort-r); background: rgba(244, 87, 46, 0.07); border: 1px solid rgba(244, 87, 46, 0.3); }
.cr-notice > i { font-size: 26px; color: var(--ort-orange); margin-top: 2px; }
.cr-notice b { display: block; font: 700 17px "Titillium Web", sans-serif; color: var(--ort-deep); margin-bottom: 4px; }
.cr-notice p { margin: 0; }
.cr-notice a, .cr-help a, .cr-empty a:not(.btn) { color: var(--ort-navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ort-orange); text-underline-offset: 3px; }
.cr-help { display: flex; gap: 10px; align-items: baseline; margin: 30px 0 0; font-size: 15px; }
.cr-help i { color: var(--ort-navy); }
.cr-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 30px 34px; border-radius: var(--ort-r-lg); background: var(--ort-soft); }
.cr-empty p { margin: 0; font-size: 17px; }
.cr-why { position: relative; padding: 96px 0; background: var(--ort-deep) var(--ort-hex); color: rgba(255, 255, 255, 0.82); overflow: hidden; }
.cr-why-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.cr-why h2 { margin: 0 0 16px; font-size: clamp(30px, 1.5vw + 19px, 44px); font-weight: 700; line-height: 1.14; letter-spacing: -0.018em; text-transform: none; color: #fff; }
.cr-why-intro p { margin: 0 0 26px; font-size: 17px; }
.cr-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.cr-points li { padding: 24px 24px 22px; border-radius: var(--ort-r); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); transition: background 0.25s, border-color 0.25s; }
.cr-points li:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); }
.cr-points b { display: block; margin-bottom: 6px; font: 700 19px "Titillium Web", sans-serif; color: #fff; }
.cr-points b::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: 14px; border-radius: 3px; background: var(--ort-orange); }
.cr-points span { font-size: 15px; line-height: 1.6; }
.cr-steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 34px 0 0; padding: 0; list-style: none; position: relative; }
.cr-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 27px; border-top: 2px dashed rgba(46, 49, 146, 0.25); }
.cr-steps li { position: relative; text-align: center; padding: 0 8px; }
.cr-steps span { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ort-navy); color: var(--ort-navy); font: 700 21px "Titillium Web", sans-serif; position: relative; z-index: 1; transition: background 0.25s, color 0.25s; }
.cr-steps li:first-child span { background: var(--ort-orange); border-color: var(--ort-orange); color: #fff; }
.cr-steps li:hover span { background: var(--ort-navy); color: #fff; }
.cr-steps b { display: block; margin-bottom: 6px; font: 700 19px "Titillium Web", sans-serif; color: var(--ort-ink); }
.cr-steps p { margin: 0; font-size: 15px; }
.cr-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 16px; }
.cr-mosaic figure { position: relative; margin: 0; border-radius: var(--ort-r); overflow: hidden; background: var(--ort-soft); }
.cr-mosaic figure:first-child { grid-row: span 2; }
.cr-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ort-ease); }
.cr-mosaic figure:hover img { transform: scale(1.04); }
.cr-mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px; background: linear-gradient(transparent, rgba(13, 14, 67, 0.82)); color: #fff; font: 600 15px "Titillium Web", sans-serif; }
@media (max-width: 991px) {
  .cr-grid, .cr-why-grid { grid-template-columns: minmax(0, 1fr); }
  .cr-why { padding: 70px 0; }
  .cr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .cr-steps::before { display: none; }
  .cr-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 260px 170px 170px; }
  .cr-mosaic figure:first-child { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 575px) {
  .cr-head { align-items: flex-start; }
  .cr-count { display: none; }
  .cr-card { padding: 24px 22px 22px; }
  .cr-job { font-size: 22px; }
  .cr-foot { flex-direction: column; align-items: flex-start; }
  .cr-points, .cr-steps { grid-template-columns: minmax(0, 1fr); }
  .cr-mosaic { grid-template-rows: 220px 150px 150px; }
}
@media (prefers-reduced-motion: reduce) { .cr-card, .cr-card::before, .cr-mosaic img, .cr-points li { transition: none; } }