/* FiKHSONS brand layer on the Tekmino system.
   Colour order per owner: green carries the most, blue second, orange only for highlights.
   Every value below is derived from the logo: green #0F5A73, blue #1E3B70, orange #E05A32 to #FF7445.
   Decisions: D-040, D-041, D-043, D-044 in docs/16. */

/* Self-hosted text fonts (SIL Open Font License 1.1): Inter by Rasmus Andersson, Manrope by Mikhail Sharanda. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* orange highlight, the softened tone the owner approved in the 26 August preview */
  --tj-color-theme-primary: #D27A5C;
  --tj-color-border-2: rgba(210, 122, 92, 0.5);

  /* dark theme: the 26 August preview's ramp, one step lighter. The page takes the preview's panel tone,
     panels its card tone and cards the tone above, so the whole page reads deep green rather than black. */
  --tj-color-common-black:   #050708;   /* deepest */
  --tj-color-common-black-2: #101A1D;   /* page background */
  --tj-color-theme-dark:     #1B2C33;   /* cards, header bar */
  --tj-color-theme-bg:       #16242A;   /* section panels */
  --tj-color-border-1:       #294049;
  --tj-color-theme-dark-2:   #34505B;
  --tj-color-theme-dark-3:   #3FA9C6;
  --tj-color-grey-4:         rgba(232, 241, 244, 0.08);   /* glass surfaces */
  --tj-color-text-body:      #BDD0D7;
  --tj-color-text-body-2:    #849EA8;
  --tj-color-heading-primary:#E8F1F4;

  /* thin type (owner, 2026-09-19: every font thin): the template's bold, semibold, medium and regular tokens all become light,
     body copy is light, headings and display figures are extra light (set explicitly below) */
  --tj-fw-bold:    300;
  --tj-fw-sbold:   300;
  --tj-fw-medium:  300;
  --tj-fw-regular: 300;
  --tj-fw-normal:  300;
}

/* light theme keeps the approved light surfaces; its dark accents become the same deep ramp and the orange its light-ground tone */
.tj-light-mode {
  --tj-color-theme-primary: #D2664A;
  --tj-color-border-2: rgba(210, 102, 74, 0.5);
  --tj-color-theme-bg-dm:  #16242A;
  --tj-color-border-1-dm:  #294049;
  --tj-color-text-body-dm: #BDD0D7;
}

/* ---------- contrast pass, both themes (D-089, measured on every public page on 2026-09-19) ----------
   each rule lifts one pair the in-page probe found under 4.5:1 for text or 3:1 for icons; nothing else changes */
.tj-light-mode {
  --tj-color-text-body-2: #4F6A73;   /* fact labels, the rail's FiKHSONS prefix, the sidebar region label: #849EA8 read 2.4:1 on the light surfaces */
  --tj-color-theme-dark-3: #62635D;  /* designations, counter labels, blog meta: the template's #6d6e68 read 4.29:1 */
}
/* the template paints these glyphs heading-black in light mode; on the navy disc they vanished (1.43:1) */
.tj-light-mode .choose-box .choose-icon, .tj-light-mode .service-icon, .tj-light-mode .process-step { color: #FFFFFF; }
/* button label: #16242A on the light orange read 4.35:1 */
.tj-light-mode .tj-primary-btn .btn-text { color: #0B1418; }
/* the template's light footer rules gave a black glyph on a black disc; the discs take the brand teal */
.tj-light-mode .fik-footer-social ul li a { background-color: var(--fik-teal); color: #FFFFFF; }
/* inline links in body copy: the light orange on the page ground read 3.05:1, so they carry the brand teal there */
.tj-light-mode .choose-box .desc a, .tj-light-mode .fik-business-site { color: var(--fik-teal); }
/* the business card's corner number is the highlight colour (owner, 2026-09-24): the digits carry the
   orange and the notch keeps a hairline of the same tone, so the corner reads as a deliberate accent
   rather than an orange block. Measured on the card: 4.59:1 dark, 4.65:1 light */
.service-item .item-count { color: var(--tj-color-theme-primary); transition: color .3s ease, border-color .3s ease; }
.tj-light-mode .service-item .item-count { color: #B84F33; }
.service-item .item-count,
.service-item .item-count::before, .service-item .item-count::after { border-color: rgba(210, 122, 92, .45); }
.tj-light-mode .service-item .item-count,
.tj-light-mode .service-item .item-count::before, .tj-light-mode .service-item .item-count::after { border-color: rgba(184, 79, 51, .4); }
.service-item:hover .item-count,
.service-item:hover .item-count::before, .service-item:hover .item-count::after { border-color: rgba(210, 122, 92, .85); }
.tj-light-mode .service-item:hover .item-count,
.tj-light-mode .service-item:hover .item-count::before, .tj-light-mode .service-item:hover .item-count::after { border-color: rgba(184, 79, 51, .8); }
.service-item:hover .item-count { color: #E5936F; }

/* ---------- the card's link row (D-095) ----------
   The business's own website and its social profiles sit in the band beside Learn More, each glyph in
   its official colour. The row scales with the viewport so it stays small and even on a phone and
   comfortable on a desktop, and every glyph keeps a 24 px target. */
/* ---------- the card's bottom band (owner, 2026-09-24) ----------
   One strip under the card holds the Learn More tab on the left and, right after it, the business's
   links. The tab and its notch merge into the card, so the corner they meet is square and the free
   corner keeps its radius. The links have nothing behind them: they sit on the open band, centred in
   its height so the space above and below them is equal, and they start where the tab ends, because
   both live in the same flex row and no measurement is guessed. */
.service-item .service-inner { border-radius: 10px 10px 10px 0; }
.fik-card-band {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 3;
  display: flex; align-items: stretch; gap: clamp(10px, 1.2vw, 18px);
  /* the template's own height: the strip below the card plus the one pixel of the card's bottom
     border, so the tab covers that border instead of leaving a line above the label */
  height: 43px;
}
.service-item .service-btn {
  position: relative; inset: auto; flex: 0 0 auto;
}
.service-item .service-btn::before {
  inset-inline-start: auto; inset-inline-end: -20px;
  box-shadow: -10px 0 0 0 var(--tj-color-theme-bg);
  border-start-end-radius: 0; border-start-start-radius: 10px;
  border-inline-end: 0; border-inline-start: 1px solid var(--tj-color-border-1);
}
/* the label is the lightest weight the family carries, so the tab stays quiet */
.service-item .service-btn .tj-text-btn { font-weight: 200; font-size: 15px; letter-spacing: .015em; }

.fik-card-links {
  --fik-icon: clamp(22px, 1.9vw, 26px);
  flex: 1 1 auto; min-width: 0; align-self: center;
  display: flex; align-items: center; justify-content: flex-start; gap: clamp(3px, .55vw, 7px);
  margin: 0; padding: 0; list-style: none;
  /* the notch curve of the tab needs its own space before the first mark */
  padding-inline-start: 6px;
}
.fik-card-links li { display: flex; }
.fik-card-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--fik-icon); height: var(--fik-icon); border-radius: 50%; flex: 0 0 auto;
  font-size: clamp(13px, 1.15vw, 16px); line-height: 1; text-decoration: none;
  color: var(--fik-brand, var(--tj-color-text-body));
  transition: transform .25s ease, opacity .25s ease;
}
.fik-card-link:hover { transform: translateY(-2px); }
.fik-card-link:focus-visible { outline: 2px solid var(--tj-color-theme-primary); outline-offset: 2px; border-radius: 4px; }

/* official colours. On the dark ground the marks that are officially black (X, TikTok) are white,
   as their own brand guidance requires, and the website glyph takes the brand teal that reads there.
   Every value measured on the tab it sits on: 3.9:1 or better. */
.fik-brand-website  { --fik-brand: #3FA9C6; }
.fik-brand-facebook { --fik-brand: #4595F5; }
.fik-brand-instagram { --fik-brand: #F25C8A; }
.fik-brand-linkedin { --fik-brand: #3A8DD8; }
.fik-brand-youtube  { --fik-brand: #FF3B3B; }
.fik-brand-x        { --fik-brand: #FFFFFF; }
.fik-brand-tiktok   { --fik-brand: #FFFFFF; }
.tj-light-mode .fik-brand-website  { --fik-brand: #105B75; }
.tj-light-mode .fik-brand-facebook { --fik-brand: #1877F2; }
.tj-light-mode .fik-brand-instagram { --fik-brand: #E1306C; }
.tj-light-mode .fik-brand-linkedin { --fik-brand: #0A66C2; }
.tj-light-mode .fik-brand-youtube  { --fik-brand: #FF0000; }
.tj-light-mode .fik-brand-x        { --fik-brand: #050505; }
.tj-light-mode .fik-brand-tiktok   { --fik-brand: #050505; }
/* Instagram's mark is a gradient in its own guidance; the glyph carries it where the browser allows */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .fik-brand-instagram i {
    background: linear-gradient(45deg, #F9CE34 4%, #EE2A7B 48%, #6228D7 96%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
/* the template's strip is shorter at these widths */
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) {
  .fik-card-band { height: 39px; }
}
/* a narrow card holds the same row in less space: the marks keep their 22 px target and tighten up */
.tj-service-section [class*="col-"] { container-type: inline-size; container-name: fik-card; }
@container fik-card (max-width: 400px) {
  .fik-card-band { gap: 8px; }
  .fik-card-links { --fik-icon: 22px; gap: 3px; }
}
@container fik-card (max-width: 345px) {
  /* measured: a 311 px card holds a 138 px tab and seven 22 px marks only at these spacings */
  .fik-card-band { gap: 4px; }
  .fik-card-links { gap: 2px; padding-inline-start: 2px; }
}
@container fik-card (max-width: 336px) {
  /* the narrowest card the grid ever makes is 301 px wide beside a 138 px tab: 20 px marks fit, 22 do not */
  .fik-card-links { --fik-icon: 20px; }
}
@container fik-card (max-width: 322px) {
  /* a 320 px phone: the tab gives back eight pixels of its side padding so the marks keep their size */
  .service-item .service-btn { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) { .fik-card-link { transition: none; } .fik-card-link:hover { transform: none; } }

.tj-light-mode .service-item:hover .item-count { color: #A8442B; }

/* ---------- the three brand colours, each with a role (D-025, D-082) ----------
   teal #105B75 is the brand surface (page ramp, logo backdrop, profile discs), navy #1E4084 is every icon disc and mark,
   orange is the action and highlight colour (buttons, counters, eyebrows, hover fills). Nothing else carries a hue. */
/* the navy sits two steps of 20% deeper than the logo sample (owner, 2026-09-19): #1E4084 to #18336A to #132955 */
:root { --fik-teal: #105B75; --fik-navy: #132955; --fik-navy-deep: #0E1E44; --fik-navy-light: #1B3668; }
.choose-box .choose-icon { background-color: var(--fik-navy); border-color: var(--fik-navy); color: #FFFFFF; }
.service-icon { background-color: var(--fik-navy); border-color: var(--fik-navy); color: #FFFFFF; }
.process-step { background-color: var(--fik-navy); color: #FFFFFF; }

/* the one big orange surface stays a calmer tone of the same orange */
.tj-cta-section .cta-area { background-color: #7E3D26; }
.tj-cta-section .cta-area .cta-content .title, .tj-cta-section .cta-area .cta-social .title { color: #FFF0E9; }
.tj-cta-section .cta-area .cta-form input { color: #FFF0E9; }
.tj-cta-section .cta-area .cta-form input::placeholder { color: rgba(255, 240, 233, 0.7); }
.tj-light-mode .tj-cta-section .cta-area { background-color: #C98470; }
.tj-light-mode .tj-cta-section .cta-area .cta-content .title, .tj-light-mode .tj-cta-section .cta-area .cta-social .title { color: #2A0F06; }
.tj-light-mode .tj-cta-section .cta-area .cta-form input { color: #2A0F06; }
.tj-light-mode .tj-cta-section .cta-area .cta-form input::placeholder { color: rgba(42, 15, 6, 0.7); }
.tj-light-mode .fik-consent-note { color: rgba(42, 15, 6, 0.85); }
/* the newsletter heading sits on two lines, not three: smaller than the template's 74px (owner, 2026-09-19) */
.cta-content .title { font-size: 60px; }
@media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta-content .title { font-size: 54px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) { .cta-content .title { font-size: 44px; } }
/* D-124: on phones the newsletter heading reads in the computer's two lines (Do Not Miss What / Comes Next.):
   that first line is 7.43 times the font size, so the size is the box width divided by 7.6, at most 60 px */
@media (max-width: 575px) {
  .tj-cta-section .cta-content { container-type: inline-size; }
  .tj-cta-section .cta-content .title { font-size: min(60px, calc(100cqw / 7.6)); }
}

/* every font is thin (owner, 2026-09-19): headings and display figures extra light (200, the lightest Manrope carries);
   hierarchy comes from size and colour, never from weight. D-145 (owner, 2026-10-03): body text and controls at 100, the
   lightest Inter carries (were 300); text set in Manrope shows at its own lightest, 200. The small orange section labels
   keep 300 */
body, p, .desc, li, a, button, input, select, textarea, label, .tj-primary-btn, .tj-text-btn,
.nice-select, .nice-select .option, .contact-form .form-input .nice-select .list .option.selected, .mean-container .mean-nav ul li a { font-weight: 200; }
.sub-title { font-weight: 300; }
/* D-145: no body text above 16 px: the client feedback quote (22 px on computers, 18 on phones) and the hero's phone number (18) */
.testimonial-wrapper .testimonial-item .desc, .testimonial-wrapper .testimonial-item .desc p { font-size: 15px; }
.banner-content .btn-area .number { font-size: 15px; }
/* the template sets these with their own, more specific weights; they follow D-145 too (Manrope ones show at 200) */
.banner-img-area .trusted .text, .service-item .list-style-2 li, .count-text, .about-content-area .count-text, .banner-scroll .text,
.banner-content .list-area .list-style-1 li, .banner-content .btn-area .number, .banner-content .btn-area .number span { font-weight: 200; }
h1, h2, h3, h4, h5, h6,
.banner-title, .sec-title, .customers-number, .counter, .count-plus,
.cta-content .title, .experience-area .countup-item, .about-funfact .countup-item,
.service-item .item-count, .process-step, .blog-date .date, .marquee-text {
  font-weight: 200 !important;
}

/* ---------- accessibility helpers ---------- */
.fik-visually-hidden, .fik-honeypot {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fik-skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 10px 16px; border-radius: 6px;
  background: var(--tj-color-theme-primary); color: #101A1D; font-weight: 300; transition: top .2s ease;
}
.fik-skip-link:focus { top: 16px; outline: 2px solid #fff; outline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--tj-color-theme-primary); outline-offset: 3px;
}
address.fik-address { font-style: normal; display: block; }
/* the trademark sign after every FiKHSONS, sized like the TM in the logo */
.fik-tm {
  font-size: .22em; font-weight: 400; line-height: 0; letter-spacing: .02em;
  /* tight against the S: in letter-spaced settings the parent's tracking (--fik-ls) is pulled back */
  margin-inline-start: calc(.05em - var(--fik-ls, 0px));
  /* raised so the top of TM sits just under the cap height of the S beside it */
  position: relative; vertical-align: baseline; top: -2.25em;
}
/* the section sub-title and the contact links are flex boxes in the template: the mark would become its own flex item,
   centred and with the spaces around it dropped, so they flow as inline text instead */
.sec-heading .sub-title { display: inline-block; --fik-ls: 2.25px; }
@media (max-width: 991px) { .sec-heading .sub-title { --fik-ls: 1.95px; } }
.contact-info .contact-item a.contact-link, .contact-info .contact-item span.contact-link { display: inline-block; }

/* ---------- logo lockup: the file switches with the theme, no JavaScript ---------- */
/* lockup = original monogram bitmap + the lockup's own wordmark, spaced exactly as in the official file (7.56 of 50.5 units) */
.fik-lockup { display: inline-flex; align-items: center; height: 40px; gap: 6px; }
.fik-lockup-mark { height: 40px; width: auto; max-width: none; }
.fik-lockup-word { height: 40px; width: auto; max-width: none; }
.fik-logo-light { display: none; }
/* D-135: the video placeholder's two lines, once drawn inside the picture (cut on every screen once the picture was
   cropped to the box), are text over it: the label top left, the caption bottom left, wrapping inside the box */
.video-content-area .fik-video-note {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  padding: clamp(22px, 7%, 92px); display: flex; flex-direction: column; justify-content: space-between;
}
.video-content-area .fik-video-label { margin: 0; font-size: clamp(12px, 1.2vw, 15px); font-weight: 300; letter-spacing: .25em; color: #849EA8; }
.video-content-area .fik-video-caption {
  margin: 0; max-width: 100%; font-family: var(--tj-ff-heading); font-weight: 300; line-height: 1.2;
  font-size: clamp(20px, 2.6vw, 34px); color: #E8F1F4;
}
/* D-136: the fixed back-to-top button (50 px wide, at the container's right edge) covered the last region link,
   Bangladesh, at the foot of the page on every screen up to 1599 px. Where the copyright is one row, the row keeps
   the button's column free; on phones, where it stacks in the middle, the row ends above the button */
@media (min-width: 576px) and (max-width: 1399px) { .tj-copyright-area .copyright-content-area { padding-inline-end: 66px; } }
/* 1400 to 1599 px: the row ends at half the width plus 660 px and the button starts 110 px from the right, so the room
   needed is 778 px minus half the width (78 px at 1400, none from 1560); 8 px more covers a desktop scrollbar */
@media (min-width: 1400px) and (max-width: 1599px) { .tj-copyright-area .copyright-content-area { padding-inline-end: max(0px, calc(786px - 50vw)); } }
/* 1200 to 1399 px: the container ends further right of the button, so the free column is wider (measured: 78 px plus a gap) */
@media (min-width: 1200px) and (max-width: 1399px) { .tj-copyright-area .copyright-content-area { padding-inline-end: 86px; } }
/* the row's own 23 px under it plus the button's 50 px and a little air */
@media (max-width: 575px) { .tj-copyright-area .copyright-content-area { padding-bottom: 76px; } }
/* D-134: round portraits crop to fill their circle instead of stretching (the template sized the picture to the box):
   the founder card's photo is 1216 x 1294 in a 65 px circle, the feedback thumbnails 576 x 680 in an 84 px circle */
.author-area .author-img img, .testimonial-wrapper .client-thumb .thumb-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
/* D-131: a business logo drawn for each theme; only hidden here, so each picture keeps its own layout rules */
body:not(.tj-light-mode) .fik-on-light-only, .tj-light-mode .fik-on-dark-only { display: none !important; }
.tj-light-mode .fik-logo-dark { display: none; }
.tj-light-mode .fik-logo-light { display: inline-block; }

/* ---------- theme controls ---------- */
/* header: one round button; a native details dropdown lists System, Light and Dark beneath it */
.fik-theme-menu { position: relative; display: inline-flex; margin-inline-end: 6px; }
.fik-theme-menu > summary { list-style: none; }
.fik-theme-menu > summary::-webkit-details-marker { display: none; }
.fik-theme-toggle {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--tj-color-border-1);
  background: transparent; color: var(--tj-color-heading-primary);
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .3s ease; text-decoration: none;
}
.fik-theme-toggle:hover, .fik-theme-menu[open] > .fik-theme-toggle { border-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); }
.fik-theme-toggle .fik-icon { display: none; }
.fik-theme-menu[data-theme-current="system"] > .fik-theme-toggle .fik-icon-system,
.fik-theme-menu[data-theme-current="light"] > .fik-theme-toggle .fik-icon-light,
.fik-theme-menu[data-theme-current="dark"] > .fik-theme-toggle .fik-icon-dark { display: block; }
.fik-theme-menu-panel {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 120; min-width: 150px; padding: 6px;
  border-radius: 12px; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-theme-bg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
.fik-theme-menu-panel .fik-theme-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  color: var(--tj-color-text-body); font-size: 14px; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.fik-theme-menu-panel .fik-theme-option:hover { background: var(--tj-color-grey-4); color: var(--tj-color-heading-primary); }
.fik-theme-menu-panel .fik-theme-option.is-active { background: var(--tj-color-theme-primary); color: #101A1D; }
/* the full pill inside the mobile drawer */
.fik-theme-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--tj-color-border-1); background: var(--tj-color-grey-4);
}
.fik-theme-switch .fik-theme-option {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--tj-color-text-body); text-decoration: none; transition: background .25s ease, color .25s ease;
}
.fik-theme-switch .fik-theme-option:hover { color: var(--tj-color-heading-primary); }
.fik-theme-switch .fik-theme-option.is-active { background: var(--tj-color-theme-primary); color: #101A1D; }
.tj-light-mode .fik-theme-switch { background: rgba(8, 25, 31, .06); }
.fik-drawer-theme .fik-theme-switch { margin: 0; }
.fik-mobile-actions { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
@media (max-width: 575px) {
  .fik-lockup, .fik-lockup-mark, .fik-lockup-word { height: 30px; }
  .fik-lockup { gap: 4px; }
  .fik-mobile-actions { gap: 8px; }
  .fik-mobile-actions .fik-theme-toggle { width: 38px; height: 38px; }
}

/* ---------- region switcher: a keyboard-operable version of the template's language dropdown ---------- */
.header-top-content .header-info .info-item .fik-region .fik-region-current {
  font-size: 15px; display: inline-flex; padding-inline-end: 17px; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit; position: relative;
}
.header-top-content .header-info .info-item .fik-region .fik-region-current::after {
  content: "\e91b"; font-family: "tekmino-icon"; font-size: 12px; position: absolute; inset-inline-end: 0; top: 50%;
  transform: translateY(-50%); transition: transform .3s ease-in-out; pointer-events: none;
}
.header-top-content .header-info .info-item .fik-region:hover .fik-region-current::after,
.header-top-content .header-info .info-item .fik-region:focus-within .fik-region-current::after { transform: translateY(-50%) rotate(180deg); }
.header-top-content .header-info .info-item .fik-region:focus-within ul { transform: scaleY(1); opacity: 1; visibility: visible; }
.header-top-content .header-info .info-item .fik-region ul li { padding: 0; }
.header-top-content .header-info .info-item .fik-region ul li a { display: block; width: 100%; padding: 8px 20px; color: inherit; }
.header-top-content .header-info .info-item .fik-region ul li.is-active a { color: var(--tj-color-theme-primary); }
.header-top-content .header-info .info-item a { color: inherit; }
.header-top-content .header-info .info-item a:hover { color: var(--tj-color-theme-primary); }

/* ---------- single header that sticks on scroll-up (replaces the template's duplicate header) ---------- */
.header-area.header-absolute.fik-fixed {
  position: fixed; top: 0; padding: 0; z-index: 99; visibility: hidden;
  transform: translateY(-100%); transition: transform .4s ease, visibility .4s ease;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
}
.header-area.header-absolute.fik-fixed .header-top { display: none !important; }
.header-area.header-absolute.fik-fixed .header-bottom { padding: 0; }
.header-area.header-absolute.fik-fixed .header-wrapper {
  background-color: var(--tj-color-theme-bg); border-start-start-radius: 0; border-start-end-radius: 0;
}
.header-area.header-absolute.fik-fixed.sticky { transform: translateY(0); visibility: visible; }

/* ---------- hero: the group logo sits in the photo slot; the fact card replaces the template's review sample ---------- */
.tj-banner-section .banner-img img { object-fit: cover; height: auto; }
/* the slot keeps the template's frame exactly (the demo photo's box, the template's own mask with the notch for the fact card,
   the template's own card anchoring); the frame is filled with the deep teal ramp the owner approved for the logo backdrop,
   and the logo sits smaller inside it, left of the notch. The card text is one line so the card is the demo card's height */
.tj-banner-section .banner-img.fik-hero-logo {
  aspect-ratio: 753 / 848; position: relative; /* the demo photo's ratio, so the card lands exactly where the template puts it */
  background:
    radial-gradient(circle at 50% 42%, rgba(98, 158, 167, 0.14), rgba(98, 158, 167, 0) 62%),
    linear-gradient(160deg, #062A31 0%, #041F25 48%, #021519 100%);
}
.tj-light-mode .tj-banner-section .banner-img.fik-hero-logo {
  background:
    radial-gradient(circle at 50% 42%, rgba(15, 90, 115, 0.10), rgba(15, 90, 115, 0) 62%),
    linear-gradient(160deg, #FFFFFF 0%, #F6F7F7 55%, #EAEBE6 100%);
}
.tj-banner-section .banner-img.fik-hero-logo img {
  position: absolute; top: 7%; left: 6%; width: 66%; height: 86%;
  object-fit: contain; object-position: center; display: block;
}
/* D-104: the card ends where the owner drew the line, 423 of the shape's 502 units (15.74% off the
   right). The box keeps its size, so the logo and both floating cards stay exactly where they were;
   only the visible card is narrower. Where the template masks the card, the mask is its own shape with
   that edge moved; where it does not (992 to 1199, under 768), the same cut with the template's radius. */
@media (min-width: 1200px), (min-width: 768px) and (max-width: 991px) {
  .tj-banner-section .banner-img-area .banner-img.fik-hero-logo {
    -webkit-mask-image: url(../images/shapes/fik-hero-logo-shape.svg);
            mask-image: url(../images/shapes/fik-hero-logo-shape.svg);
  }
}
@media (min-width: 992px) and (max-width: 1199px), (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-banner-section .banner-img-area .banner-img.fik-hero-logo { clip-path: inset(0 15.74% 0 0 round 16px); }
}
@media (max-width: 767px) {
  .tj-banner-section .banner-img-area .banner-img.fik-hero-logo { clip-path: inset(0 15.74% 0 0 round 12px); }
}
/* D-106: phone and tablet (under 992 px), where the hero stacks under the text. The logo card is the
   trimmed card itself (423/502 of the template card: 753 x 423/502 = 634.5 by 848), so it lines up with
   the businesses card under it instead of showing a cut-off box. Inside, the logo keeps the desktop
   proportions (6% and 66% of 502 = 7.12% and 78.32% of 423). Both cards share one centred width taken
   from the template: 502 x 84.26% = 423 px up to 767 px, 460 x 84.26% = 388 px from 768 to 991 px, the
   full column on phones. The Trusted badge sits on the card's bottom edge, centred on one line, so it
   never covers the logo, even at the top of its 15 px bounce. */
@media (max-width: 991px) {
  .tj-banner-section:where(:not(.fik-media-desk)) .banner-img-area {
    container-type: inline-size; max-width: 423px; width: 100%; margin-inline: auto;
  }
  .tj-banner-section:where(:not(.fik-media-desk)) .banner-img-area .banner-img.fik-hero-logo {
    max-width: none; width: 100%; aspect-ratio: 634.5 / 848; clip-path: none;
    -webkit-mask-image: none; mask-image: none;
  }
  .tj-banner-section:where(:not(.fik-media-desk)) .banner-img-area .banner-img.fik-hero-logo img { left: 7.12%; width: 78.32%; }
  /* still here: the 15 px bounce on top of the -50% the entrance animation stores inline would reach the
     logo on a 320 px phone (29 px free under GROUP), so the badge rests 12 px into the card instead */
  .tj-banner-section:where(:not(.fik-media-desk)) .banner-img-area .trusted {
    top: calc(100cqw * 848 / 634.5 - 12px); bottom: auto; inset-inline: 0; margin-inline: auto;
    width: max-content; max-width: calc(100% - 16px); padding: 10px 18px; align-items: center;
    -webkit-animation: none; animation: none; transform: none !important;
  }
  .tj-banner-section:where(:not(.fik-media-desk)) .banner-img-area .customers-box {
    position: relative; inset: auto; max-width: none; width: 100%; margin-top: 56px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .tj-banner-section:where(:not(.fik-media-desk)) .banner-img-area { max-width: 388px; }
}
/* one line on the narrowest phones: at 16 px the badge needs 251 px and a 320 px screen offers 244 */
@media (max-width: 359px) {
  .tj-banner-section .banner-img-area .trusted { padding: 10px 14px; }
  .tj-banner-section .banner-img-area .trusted .text { font-size: 15px; }
}
.customers ul li { position: relative; }
.customers ul li + li { margin-inline-start: -14px; } /* less overlap than the template so every code stays readable */
/* first mark on top, last at the back: US, DE, BD */
.customers ul li:nth-child(1) { z-index: 3; }
.customers ul li:nth-child(2) { z-index: 2; }
.customers ul li:nth-child(3) { z-index: 1; }
.customers ul li .fik-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%;
  font-family: var(--tj-ff-heading); font-size: 13px; letter-spacing: .14em; font-weight: 300; color: #FFFFFF;
  border: 1px solid transparent;
  /* navy marks (D-082) inside the teal to navy ring */
  background:
    linear-gradient(160deg, var(--fik-navy-light) 0%, var(--fik-navy-deep) 100%) padding-box,
    linear-gradient(135deg, #3FA9C6 0%, #223870 55%, #0F5A73 100%) border-box;
  box-shadow: 0 0 0 3px var(--tj-color-theme-dark), inset 0 1px 0 rgba(232, 241, 244, .18), 0 10px 22px rgba(0, 0, 0, .35);
}
.tj-light-mode .customers ul li .fik-mark {
  color: #FFFFFF;
  background:
    linear-gradient(160deg, var(--fik-navy-light) 0%, var(--fik-navy-deep) 100%) padding-box,
    linear-gradient(135deg, #3FA9C6 0%, #223870 55%, #0F5A73 100%) border-box;
  box-shadow: 0 0 0 3px #F6F7F7, inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 22px rgba(8, 25, 31, .12);
}
/* the marks are links: hover or focus only turns the ring the brand orange, with a small 1px lift (owner, 2026-09-19: minimal) */
.customers ul li .fik-mark { text-decoration: none; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.customers ul li:hover, .customers ul li:focus-within { z-index: 4; }
.customers ul li .fik-mark:hover, .customers ul li .fik-mark:focus-visible {
  transform: translateY(-1px); outline: none;
  background:
    linear-gradient(160deg, var(--fik-navy-light) 0%, var(--fik-navy-deep) 100%) padding-box,
    linear-gradient(135deg, #F3B097 0%, #D27A5C 55%, #7E3D26 100%) border-box;
}
.tj-light-mode .customers ul li .fik-mark:hover, .tj-light-mode .customers ul li .fik-mark:focus-visible {
  background:
    linear-gradient(160deg, var(--fik-navy-light) 0%, var(--fik-navy-deep) 100%) padding-box,
    linear-gradient(135deg, #F3B097 0%, #D2664A 55%, #8E3A22 100%) border-box;
}
.customers ul li .fik-mark[aria-current="true"] { box-shadow: 0 0 0 3px var(--tj-color-theme-dark), 0 0 0 4px rgba(232, 241, 244, .35), inset 0 1px 0 rgba(232, 241, 244, .18), 0 10px 22px rgba(0, 0, 0, .35); }
.tj-light-mode .customers ul li .fik-mark[aria-current="true"] { box-shadow: 0 0 0 3px #F6F7F7, 0 0 0 4px rgba(8, 25, 31, .25), inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 22px rgba(8, 25, 31, .12); }
@media (prefers-reduced-motion: reduce) { .customers ul li .fik-mark { transition: none; } .customers ul li .fik-mark:hover, .customers ul li .fik-mark:focus-visible { transform: none; } }
@media (max-width: 1599px) { .customers ul li .fik-mark { width: 54px; height: 54px; } }
@media (max-width: 1399px) { .customers ul li .fik-mark { width: 50px; height: 50px; font-size: 12px; } }
.fik-fact-label { font-size: 12px; line-height: 1.2; color: var(--tj-color-text-body-2); letter-spacing: .5px; text-transform: uppercase; }
.rating-area { display: flex; align-items: center; gap: 10px; }

/* about: any image in the slot scales with its column so the template's shape-2 mask lines up */
.about-img img { width: 100%; height: auto; display: block; }
/* the founder's signature is wide (4.6:1): the name column takes only what the name needs and the signature fills the rest of the row */
.author-area .author-info { flex: 0 0 auto; width: auto; max-width: none; }
.author-area .author-text { white-space: nowrap; }
.author-area .signature { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }
.author-area .signature .fik-signature { width: 100%; height: auto; display: block; }
/* the signature is black ink on a transparent ground; dark surfaces show it in the heading colour */
.author-area .signature .fik-signature { filter: invert(1) brightness(.93); }
.tj-light-mode .author-area .signature .fik-signature { filter: none; opacity: .9; }
/* where the card is too narrow for one row (the template stacks it at 992-1199 and under 768) the signature takes its own row at a readable width */
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .author-area .author-info { width: 100%; max-width: none; flex-direction: row; align-items: center; padding: 20px 0; border-inline-end: 0; border-bottom: 1px solid var(--tj-color-border-1); }
  .author-area .signature { flex: 0 0 auto; width: 120px; margin-inline-start: 0; padding: 20px 0; }
}

/* about: the group seal. A flat disc in the card tone with a thin ring, the original monogram on a darker inner disc,
   and the group line set around it in the heading face (inline SVG so it uses the site's own font) */
/* the seal's outer disc is the brand navy in both themes (owner, 2026-09-19); the inner disc behind the monogram is untouched */
.circle-text-wrap.award-circle { background-color: var(--fik-navy); border: 1px solid var(--tj-color-border-1); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
.circle-text-wrap.award-circle .circle-text { width: 162px; height: 162px; background: none; }
.fik-seal-ring { display: block; width: 100%; height: 100%; overflow: visible; }
.fik-seal-text { font-family: var(--tj-ff-heading); font-weight: 300; font-size: 11px; letter-spacing: 3.05px; fill: #BDD0D7; }
.circle-text-wrap.award-circle .circle-icon span { width: 91px; height: 91px; background-color: var(--tj-color-common-black-2); border: 1px solid var(--tj-color-grey-4); } /* 20% larger than the first cut (owner, 2026-09-19) */
.fik-seal-mark { width: auto; height: 60px; display: block; } /* the monogram itself 20% larger again (owner, 2026-09-19) */
.tj-light-mode .circle-text-wrap.award-circle { box-shadow: 0 14px 34px rgba(5, 5, 5, .10); }
.tj-light-mode .circle-text-wrap.award-circle .circle-icon span { background-color: var(--tj-color-theme-bg); border-color: var(--tj-color-border-1); }
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px) {
  .circle-text-wrap.award-circle .circle-text { width: 144px; height: 144px; }
  .circle-text-wrap.award-circle .circle-icon span { width: 82px; height: 82px; }
  .fik-seal-mark { height: 55px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .circle-text-wrap.award-circle .circle-text { width: 104px; height: 104px; }
  .circle-text-wrap.award-circle .circle-icon span { width: 60px; height: 60px; }
  .fik-seal-mark { height: 41px; }
}
@media (prefers-reduced-motion: reduce) { .circle-text { animation: none; } }

/* about: the picture slot holds three flag panels; the open panel is wide, the others narrow, all inside the template's mask */
.fik-regions-gallery { display: flex; gap: 10px; width: 100%; aspect-ratio: 645 / 489; }
/* position: relative so an open panel's text sits on that panel; without it the text box took the
   whole gallery as its frame and always began over the first flag (D-107) */
.fik-region-panel { position: relative; flex: 1 1 0; min-width: 0; transition: flex-grow .55s cubic-bezier(.4, 0, .2, 1); }
.fik-region-panel.is-open { flex-grow: 2.6; }
.fik-region-panel-button {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  background: var(--tj-color-theme-dark); cursor: pointer; text-align: start;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 30px rgba(0, 0, 0, .35);
  transition: box-shadow .3s ease, transform .3s ease;
}
.fik-region-panel-button:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 18px 36px rgba(0, 0, 0, .4); }
.fik-region-panel-button:focus-visible { outline: 2px solid var(--tj-color-theme-primary); outline-offset: 3px; }
.fik-region-panel .fik-flag { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: saturate(.55) contrast(.88); }
.fik-region-panel-shade {
  position: absolute; inset: 0; pointer-events: none;
  /* a light dim over the whole flag plus a darker band at the top so the name reads on every colour */
  /* clean but muted: a milky wash lowers the flag's presence without blur or darkening; the top band stays dark so the name reads */
  background:
    linear-gradient(180deg, rgba(3, 12, 16, .58) 0%, rgba(3, 12, 16, .24) 28%, rgba(3, 12, 16, 0) 55%),
    rgba(232, 241, 244, .30);
}
.fik-region-panel-name {
  position: absolute; left: 14px; top: 13px; right: 10px; z-index: 1;
  font-family: var(--tj-ff-heading); font-weight: 300; font-size: 13px; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase;
  color: #FFFFFF; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
/* D-167: a narrow closed flag (992 to 1100 px) had less room than BANGLADESH needs; the label shrinks with its own flag only
   there (13 px wherever it fits, as before), so the full name always shows */
.fik-region-panel-name { font-size: clamp(10px, calc((100cqi - 24px) / 7), 13px); }
/* the open panel says the country's name in full below, so the small label steps aside */
.fik-region-panel.is-open .fik-region-panel-name { opacity: 0; }

/* ---------- what an open panel holds (D-101) ----------
   The entity, where it sits, who leads it there and the way in: all of it facts the site already
   publishes elsewhere. A closed panel keeps none of it in the tab order. */
.fik-region-panel { container-type: inline-size; container-name: fik-region; }
.fik-region-panel-body { display: none; }
.fik-region-panel.is-open .fik-region-panel-body {
  display: grid; gap: 2px; z-index: 2; align-content: start;
  /* the top of the panel, because the experience card and the founder card overlap its bottom 65 px */
  position: absolute; inset-inline: 0; top: 0;
  padding: clamp(14px, 1.3vw, 18px) clamp(14px, 1.4vw, 20px) 72px;
  /* the flag keeps its colour; the text sits on a deep wash that fades downward, so it always reads */
  background: linear-gradient(180deg, rgba(4, 14, 18, .94) 0%, rgba(4, 14, 18, .86) 48%, rgba(4, 14, 18, .55) 78%, rgba(4, 14, 18, 0) 100%);
  border-radius: 12px 12px 0 0;
  animation: fik-region-body-in .45s ease both;
}
@keyframes fik-region-body-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fik-region-panel-title {
  margin: 0; font-family: var(--tj-ff-heading); font-weight: 200; color: #FFFFFF;
  font-size: clamp(20px, 4cqi + 12px, 32px); line-height: 1.1; letter-spacing: -.01em;
}
.fik-region-panel-entity, .fik-region-panel-place, .fik-region-panel-lead, .fik-region-panel-contact { margin: 0; font-size: 13px; line-height: 1.45; color: #DCE7EB; }
.fik-region-panel-entity { color: #7FD0E4; letter-spacing: .04em; }
.fik-region-panel-lead { display: none; color: #C7D6DC; }
.fik-region-panel-lead-name { display: block; color: #FFFFFF; }
.fik-region-panel-contact { display: none; margin-top: 2px; }
.fik-region-panel-contact a { color: #FFFFFF; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.fik-region-panel-contact a:hover { border-bottom-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); }
.fik-region-panel-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; justify-self: start;
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .34);
  color: #FFFFFF; font-size: 13px; text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.fik-region-panel-cta i { font-size: 11px; }
.fik-region-panel-cta:hover { background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); color: #101A1D; }
.fik-region-panel-cta:focus-visible { outline: 2px solid var(--tj-color-theme-primary); outline-offset: 2px; }
/* the visitor's own region says so instead of linking to the page they are already on */
.fik-region-panel-cta.is-current { border-color: rgba(255, 255, 255, .22); color: #DCE7EB; cursor: default; }
.fik-region-panel-cta.is-current::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tj-color-theme-primary); }
/* D-128: the country lead's photo in the open panel, as the owner's mockup draws it: a circle half the panel's width
   (157 of 318 px there), centred under the button, on a soft shadow (no ring since D-130); it follows the panel's width on every
   screen. The dark wash behind the text keeps its old height, so the flag shows in its colours behind the photo.
   Two classes on the photo, so the about picture rule (.about-img img, width 100%) does not stretch it */
.fik-region-panel-body { --fik-photo: 49cqi; --fik-photo-room: calc(var(--fik-photo) + 10px); }
/* the column is the panel's own width, so a button wider than a phone's panel (Open Bangladesh at 360 px) does not
   widen it and pull the photo off centre */
.fik-region-panel.is-open .fik-region-panel-body { grid-template-columns: minmax(0, 1fr); }
.fik-region-panel.is-open .fik-region-panel-body:has(> .fik-region-panel-photo) { background-size: 100% calc(100% - var(--fik-photo-room)); background-repeat: no-repeat; }
.fik-region-panel .fik-region-panel-photo {
  justify-self: center; width: var(--fik-photo); height: auto; aspect-ratio: 1; margin-top: 8px;
  border-radius: 50%; object-fit: cover; object-position: center top;
  /* D-130: no ring; a soft, light shadow lifts it off the flag */
  box-shadow: 0 14px 30px -12px rgba(2, 10, 14, .5), 0 3px 8px rgba(2, 10, 14, .14);
}
/* a phone's flag is short and its text wraps more, so the photo takes a little less of the width there */
@media (max-width: 575px) { .fik-region-panel-body { --fik-photo: 44cqi; } }
/* the narrowest phones: a little smaller on a 160 to 179 px flag (360 to 389 px screens); under 160 px (phones under
   360 px) the country's text alone fills the flag, so the photo stays off rather than run past its bottom */
@container fik-region (max-width: 179px) { .fik-region-panel-body { --fik-photo: 38cqi; } }
@container fik-region (max-width: 159px) {
  .fik-region-panel-body { --fik-photo-room: 0px; }
  .fik-region-panel .fik-region-panel-photo { display: none; }
}
/* a wide enough open panel also carries the country lead and the phone */
@container fik-region (min-width: 240px) {
  .fik-region-panel-lead, .fik-region-panel-contact { display: block; }
  .fik-region-panel-entity, .fik-region-panel-place, .fik-region-panel-lead, .fik-region-panel-contact { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fik-region-panel.is-open .fik-region-panel-body { animation: none; }
  .fik-region-panel-cta { transition: none; }
}
.tj-light-mode .fik-region-panel-button { box-shadow: inset 0 0 0 1px rgba(8, 25, 31, .12), 0 14px 30px rgba(8, 25, 31, .14); }
.fik-region-panel-code { display: none; }
@media (max-width: 575px) {
  .fik-regions-gallery { gap: 6px; }
  /* narrow panels show the country code; the open one shows the full name */
  .fik-region-panel-name { display: none; }
  .fik-region-panel-code {
    display: block; position: absolute; left: 10px; top: 10px; z-index: 1;
    font-family: var(--tj-ff-heading); font-weight: 300; font-size: 11px; letter-spacing: .1em; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  }
  .fik-region-panel.is-open .fik-region-panel-code { display: none; }
  .fik-region-panel.is-open .fik-region-panel-name { display: block; left: 12px; top: 10px; font-size: 12px; letter-spacing: .1em; }
}

/* why: the four cards fill their columns so a row's cards share one height whatever their text length (the template sized each to its own text) */
.tj-choose-section .choose-box { height: 100%; }

/* ---------- group rail: business names set as wordmarks instead of client logos ---------- */
.client-logo.fik-wordmark a {
  display: inline-block; white-space: nowrap; font-family: var(--tj-ff-heading); font-weight: 300; font-size: 22px;
  letter-spacing: .5px; color: var(--tj-color-heading-primary); opacity: .82; transition: all .3s ease;
}
.client-logo.fik-wordmark a:hover { opacity: 1; color: var(--tj-color-theme-primary); }
/* the group line pill hugs its one line of text (the template fixed it at 420px, which is narrower than the line); on phones it wraps inside the column */
.client-content { width: max-content; max-width: 100%; }
.client-logo.fik-wordmark .fik-wordmark-brand { font-size: 12px; letter-spacing: 3px; --fik-ls: 3px; text-transform: uppercase; color: var(--tj-color-text-body-2); margin-inline-end: 6px; }
/* a tile hugs its wordmark (the template's fixed tile widths are narrower than the longest names); short names keep the template's tile size */
.client-logo.fik-wordmark { width: auto; min-width: 285px; padding-inline: 24px; }
@media only screen and (min-width: 768px) and (max-width: 1199px) { .client-logo.fik-wordmark { min-width: 230px; } }
@media (max-width: 767px) {
  .client-logo.fik-wordmark { min-width: 180px; padding-inline: 18px; }
  .client-logo.fik-wordmark a { font-size: 18px; }
  .client-logo.fik-wordmark .fik-wordmark-brand { font-size: 11px; letter-spacing: 2.5px; --fik-ls: 2.5px; }
}

/* ---------- forms ---------- */
.fik-consent { display: flex; align-items: flex-start; gap: 12px; }
/* investor or partner: two plain radio choices in the form's own field style (D-102) */
.fik-choice-group { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.fik-choice-group legend { width: 100%; float: none; margin-bottom: 4px; padding: 0; }
.fik-choice { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--tj-color-text-body); cursor: pointer; }
.fik-choice input { width: 17px; height: 17px; margin: 0; accent-color: var(--tj-color-theme-primary); }
.fik-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--tj-color-theme-primary); }
.fik-consent label { font-size: 14px; line-height: 1.5; color: var(--tj-color-text-body); }
/* audit 2026-10-04: every consent line links to the privacy policy (GDPR Art. 13, at the time of collection) */
.fik-consent-link { color: var(--tj-color-theme-primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.fik-consent-link:hover, .fik-consent-link:focus-visible { color: var(--tj-color-heading-primary); }
.fik-form-status { margin: 0 0 20px; padding: 14px 18px; border-radius: 8px; font-size: 15px; line-height: 1.5; border: 1px solid var(--tj-color-border-1); }
.fik-form-status[hidden] { display: none; }
.fik-form-status.is-success { border-color: #3FA9C6; color: var(--tj-color-heading-primary); background: rgba(63, 169, 198, .16); }
.fik-form-status.is-error { border-color: var(--tj-color-theme-primary); color: var(--tj-color-heading-primary); background: rgba(210, 122, 92, .14); }
.fik-form-status a { color: var(--tj-color-theme-primary); text-decoration: underline; }
.contact-form .form-input.is-invalid input, .contact-form .form-input.is-invalid textarea { border-color: var(--tj-color-theme-primary); }
.fik-field-error { display: block; margin-top: 6px; font-size: 13px; color: var(--tj-color-theme-primary); }
.fik-consent-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.cta-content .fik-form-status { margin-top: 16px; margin-bottom: 0; }
form[data-public-form].is-sending button[type="submit"] { opacity: .6; pointer-events: none; }

/* ---------- footer and drawers ---------- */
.fik-footer-social { margin-top: 24px; }
/* D-126: iPad portrait at 576 to 767 px (iPad Mini 744), where the template stacks every footer column: the logo
   part keeps its full row, left aligned; under it two columns, The Group with the office under it on the left,
   the Businesses list on the right; the copyright line and the region links share one row as from 768 px,
   their text shrunk only as far as the row needs */
@media (min-width: 576px) and (max-width: 767px) {
  .tj-footer-section .footer_widget_wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 30px; }
  .tj-footer-section .footer_widget_wrapper > .footer-col-1 { grid-column: 1 / -1; }
  .tj-footer-section .footer_widget_wrapper > .widget-nav-menu:nth-child(2) { grid-column: 1; grid-row: 2; }
  .tj-footer-section .footer_widget_wrapper > .widget-nav-menu:nth-child(3) { grid-column: 2; grid-row: 2 / span 2; }
  .tj-footer-section .footer_widget_wrapper > .widget-contact { grid-column: 1; grid-row: 3; }
  .tj-copyright-area .copyright-content-area { flex-wrap: nowrap; container-type: inline-size; }
  .tj-copyright-area .copyright-content-area .copyright-text { text-align: start; }
  .tj-copyright-area .copyright-content-area .copyright-menu ul { flex-wrap: nowrap; white-space: nowrap; }
  .tj-copyright-area .copyright-content-area .copyright-text p,
  .tj-copyright-area .copyright-content-area .copyright-menu ul,
  .tj-copyright-area .copyright-content-area .copyright-menu ul li,
  .tj-copyright-area .copyright-content-area .copyright-menu ul li a { font-size: min(15px, calc(100cqw / 41)); }
}
/* D-125: on phones every footer column is centred: logo, text, social icons, headings, link lists, address and
   contact lines (the copyright row was centred already). Each contact link keeps its own line */
@media (max-width: 575px) {
  .tj-footer-section .footer-widget { text-align: center; }
  .tj-footer-section .footer-logo { margin-inline: auto; }
  .tj-footer-section .fik-footer-social ul { justify-content: center; }
  .tj-footer-section .footer-contact-info { margin-inline: auto; }
  .tj-footer-section .footer-contact-info .contact-item a { display: table; margin-inline: auto; }
}
.fik-offcanvas-regions .contact-item a.contact-link { display: block; }
.fik-offcanvas-regions .contact-item a.contact-link + a.contact-link { margin-top: 6px; }
.fik-noscript-menu { list-style: none; padding: 0; margin: 0 0 30px; }
.fik-noscript-menu li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--tj-color-border-1); color: var(--tj-color-heading-primary); }
.fik-feature-box .feature-content { position: relative; z-index: 1; }

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- group rail: each tile is the business's own logo beside its wordmark (D-085) ---------- */
.client-logo.fik-wordmark a, .client-logo.fik-wordmark .fik-rail-static { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.client-logo.fik-wordmark .fik-rail-static { font-family: var(--tj-ff-heading); font-weight: 300; font-size: 22px; letter-spacing: .5px; color: var(--tj-color-heading-primary); opacity: .82; }
.fik-rail-logo { width: 106px; height: 106px; flex: 0 0 auto; object-fit: contain; } /* transparent, the artwork as supplied; 10% larger (owner, 2026-09-19) */
.fik-rail-logo.fik-logo-lisra { width: 86px; height: 86px; margin-inline: 10px; } /* the Lisra mark reads larger, so it sits 10% under the old size */
/* the tile keeps the template's 121px height; its vertical padding gives way so the larger logo fits (owner, 2026-09-19: 50% larger) */
.client-logo.fik-wordmark { padding-block: 7px; }
@media (max-width: 767px) { .fik-rail-logo { width: 72px; height: 72px; } .fik-rail-logo.fik-logo-lisra { width: 60px; height: 60px; margin-inline: 6px; } .client-logo.fik-wordmark { padding-block: 6px; } }
/* companies marquee and business page: the logo sits directly on the surface, no tile, as the owner prefers */
.tech-icon.fik-tech-logo { background: transparent; border: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; max-width: 62px; height: 62px; }
.tech-icon.fik-tech-logo img.fik-logo-lisra { width: 82%; height: 82%; }
.tech-icon.fik-tech-logo img { width: 100%; height: 100%; object-fit: contain; }
.fik-business-logo { width: 106px; height: 106px; object-fit: contain; margin-bottom: 22px; display: block; }
.fik-business-logo.fik-logo-lisra { width: 86px; height: 86px; }
.fik-business-logo-link { display: inline-block; }
.fik-business-site { color: var(--tj-color-theme-primary); font-weight: 300; }
/* business cards: the logo replaces the navy icon disc, transparent (owner, 2026-09-19); the hover fill stays off behind the logo */
.service-icon.fik-service-logo { background-color: transparent; border-color: transparent; padding: 0; width: 88px; height: 88px; }
.service-icon.fik-service-logo img.fik-logo-lisra { width: 82%; height: 82%; }
.service-icon.fik-service-logo img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
/* D-148: HandiEco's logo 5% larger on its Our Businesses card only (every other place keeps the file's size); grown from the
   centre by size, not by transform, so the hover zoom still works */
.service-icon.fik-service-logo.fik-card-logo-handieco img { width: 105%; height: 105%; margin: -2.5%; max-width: none; }
.service-item:hover .service-icon.fik-service-logo::before { transform: scale(0); }

/* logo hover (owner, 2026-09-19): a slow ease, a 12% zoom and a soft lift shadow; the wordmark beside it brightens */
.fik-rail-logo, .fik-service-logo img, .fik-tech-logo img, .fik-business-logo {
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .5s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.client-logo.fik-wordmark a:hover .fik-rail-logo, .client-logo.fik-wordmark a:focus-visible .fik-rail-logo,
.client-logo.fik-wordmark .fik-rail-static:hover .fik-rail-logo,
.service-item:hover .fik-service-logo img,
.tech-item:hover .fik-tech-logo img,
.fik-business-logo:hover {
  transform: scale(1.12) translateY(-2px);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)) brightness(1.06);
}
.tj-light-mode .client-logo.fik-wordmark a:hover .fik-rail-logo, .tj-light-mode .service-item:hover .fik-service-logo img,
.tj-light-mode .tech-item:hover .fik-tech-logo img, .tj-light-mode .fik-business-logo:hover {
  filter: drop-shadow(0 10px 18px rgba(8, 25, 31, .22)) brightness(1.02);
}
.client-logo.fik-wordmark a:hover { opacity: 1; }
.service-icon.fik-service-logo, .tech-icon.fik-tech-logo { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .fik-rail-logo, .fik-service-logo img, .fik-tech-logo img, .fik-business-logo { transition: none; }
  .client-logo.fik-wordmark a:hover .fik-rail-logo, .service-item:hover .fik-service-logo img, .tech-item:hover .fik-tech-logo img, .fik-business-logo:hover { transform: none; }
}

/* ---------- companies marquee: icon font instead of vendor logos ---------- */
/* the template fades the marquee edges with its own near-black (rgb 5,5,5); on our page ground that painted a darker band over the
   cards at both ends, in light mode a dark smear. The fades now use the page ground itself, so the cards dissolve into the section */
/* the template mirrors ::after with scaleX(-1), so both fades share one left-to-right gradient */
.technologies-item-wrap::before, .technologies-item-wrap::after {
  background: linear-gradient(to right, var(--tj-color-common-black-2) 0%, rgba(16, 26, 29, 0) 100%);
}
.tj-light-mode .technologies-item-wrap::before, .tj-light-mode .technologies-item-wrap::after {
  background: linear-gradient(to right, #F6F7F7 0%, rgba(246, 247, 247, 0) 100%);
}
.tech-icon.fik-tech-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--tj-color-theme-dark); border: 1px solid var(--tj-color-border-1); }
.tech-icon.fik-tech-icon i { font-size: 26px; color: var(--tj-color-theme-primary); line-height: 1; }
.tech-content .title a { color: inherit; }
.team-img img { width: 100%; height: auto; aspect-ratio: 576 / 680; object-fit: cover; }
/* the three cards in a row share one height whatever the name length (the template sized each to its own text) */
.tj-team-section .team-item { height: 100%; }
/* profile discs in the brand teal of D-025 (#105B75), the hover fill is the brand orange; the template used its own bright accent */
.team-item .social-links ul li a { background-color: #105B75; color: #FFFFFF; }
/* the share control is a real button (template: a span); a tap or keyboard focus opens the links like the template's hover */
.team-item .social-links .share-icon { border: 0; padding: 0; cursor: pointer; }
.team-item.is-open .share-icon, .team-item .social-links:focus-within .share-icon { opacity: 0; visibility: hidden; }
.team-item.is-open .social-links ul, .team-item .social-links:focus-within ul { gap: 10px; opacity: 1; }
.team-item.is-open .social-links ul li, .team-item .social-links:focus-within ul li { margin: 0; }

/* draft preview (D-109): only a signed-in editor ever sees this bar */
.fik-preview-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 9999; padding: 10px 16px; text-align: center;
  font-size: 14px; font-weight: 300; color: #FFFFFF; background: rgba(16, 91, 117, .96); box-shadow: 0 -6px 18px rgba(0, 0, 0, .25);
}
.fik-preview-bar a { color: #FFFFFF; text-decoration: underline; margin-inline-start: 8px; }

/* *words* in edited text (D-109): the highlight colour wherever the template has no rule of its own for a
   span in that heading; the template's own span styles (the logo strip's badge, the form titles) are more specific and win */
.fik-hl { color: var(--tj-color-theme-primary); }

/* D-112: on phones (the template's smallest step, up to 575 px) the logo card comes first and the text
   follows it; tablets and iPads keep the text first, as before */
@media (max-width: 575px) {
  .tj-banner-section .fik-hero-media { order: 1; }
  /* the template's 30 px between text and picture sat under the word list; in this order it sits above the text */
  .tj-banner-section .fik-hero-text { order: 2; margin-top: 30px; }
  .tj-banner-section .fik-hero-text .banner-content .list-area { margin-bottom: 0; }
  /* D-119: the gap from the header bar to the logo card was 78 px (padding 160 under a bar ending at 97);
     the owner asked for 60% less, so 31 px: everything in the hero moves up 47 px */
  .tj-banner-section { padding-top: 113px; }
  /* D-120: the text under the logo part is one size step smaller, everything by the same 0.786 (heading 45 to
     35 px, button 56 to 44 px, the smallest comfortable tap height, words 16 to 12.6 px, every gap with them),
     so it sits in balance with the smaller logo part */
  .tj-banner-section .fik-hero-text .banner-content { zoom: 0.786; }
  /* D-121: two lines, "Building Growth Across / Borders, Together.": the first line is 9.58 times the font size,
     so hero.njk sets the size to the room divided by 9.8, at most 45 px; and the four words stay on one row,
     shrunk (icons and gaps with them) only as much as the row needs */
  .tj-banner-section .fik-hero-text .banner-title { font-size: var(--fik-title-fit, 45px); }
  .tj-banner-section.fik-list-fit .banner-content .list-area .list-style-1 { flex-wrap: nowrap; zoom: var(--fik-list-zoom, 1); }
  .tj-banner-section.fik-list-fit .banner-content .list-area .list-style-1 li { white-space: nowrap; }
  /* D-122: the Explore button 20% smaller (its words, arrow and padding together); the number beside it keeps its size */
  .tj-banner-section .fik-hero-text .banner-content .btn-area .tj-primary-btn { zoom: 0.8; }
  /* with the shorter text the template's 865 px minimum left 216 px empty under the words; the hero now ends
     on its own 60 px bottom padding */
  .tj-banner-section { min-height: 0; }
}

/* D-113: a section out of view stops its endless animations; fikhsons.js sets the class */
.fik-offscreen, .fik-offscreen * { animation-play-state: paused !important; }
/* D-113: the two endless animations that are always in view at the top (the badge's bounce and the top
   bar's spark) play when the page opens and then rest, because any one of them alone keeps the screen
   redrawing 60 times a second (measured: 60% of a core with both, 16% with neither) */
.banner-img-area .trusted.tj-bounce { -webkit-animation-iteration-count: 3; animation-iteration-count: 3; }
.header-top .topbar-text i { -webkit-animation-iteration-count: 4; animation-iteration-count: 4; }
/* a visitor who asked the device for less motion gets no endless animation at all */
@media (prefers-reduced-motion: reduce) {
  .tj-bounce, .scroll-slider .scroll-wrapper, .circle-text, .video-btn, .header-top .topbar-text i { -webkit-animation: none !important; animation: none !important; }
}

/* D-116: iPad landscape and other screens of 992 to 1199 px show the top bar and the hero as the computer
   (1440 px) does, only smaller. The template's own step for these widths wraps the top bar onto two rows and
   lays the businesses card over the logo with no gap; here both keep the computer's design. A few lines in
   header.njk and hero.njk set the class and the zoom: the top bar stays one row (text left, contact right),
   shrunk only as much as it must to fit; the hero is laid out at the computer's 1350 px container with the
   template's 1400 to 1599 px values (heading 74 px, words 160 px lower, the notched logo card with the
   businesses card in its notch, the badge 125 px left at 45%) and zoomed by the room it has.
   Every other width is untouched. */
.fik-instant, .fik-instant * { transition: none !important; }
@media (min-width: 992px) and (max-width: 1199px) {
  .header-top-content.fik-top-fit { flex-wrap: nowrap; width: var(--fik-top-width, 100%); zoom: var(--fik-top-zoom, 1); }
  .header-top-content.fik-top-fit .topbar-text, .header-top-content.fik-top-fit .header-info { flex: 0 0 auto; white-space: nowrap; }
  .tj-banner-section.fik-hero-desk > .container { width: 1350px; max-width: none; zoom: var(--fik-hero-zoom, 1); }
  .tj-banner-section.fik-hero-desk .banner-title { font-size: 74px; }
  .tj-banner-section.fik-hero-desk .banner-content { padding-top: 40px; }
  .tj-banner-section.fik-hero-desk .banner-content .list-area { margin-top: 160px; padding-inline-start: 40px; }
  .tj-banner-section.fik-hero-desk .banner-img-area { margin-inline-start: 0; }
  .tj-banner-section.fik-hero-desk .banner-img-area .banner-img.fik-hero-logo {
    -webkit-mask-image: url(../images/shapes/fik-hero-logo-shape.svg); mask-image: url(../images/shapes/fik-hero-logo-shape.svg); clip-path: none;
  }
  .tj-banner-section.fik-hero-desk .banner-img-area .trusted { inset-inline-start: -125px; top: 45%; }
  .tj-banner-section.fik-hero-desk .banner-img-area .customers-box { max-width: 290px; padding: 26px 24px 24px 24px; inset-inline-end: -15px; bottom: -22px; }
  .tj-banner-section.fik-hero-desk .banner-img-area .customers-number { font-size: 60px; }
}

/* D-117 (phones too since D-118): under 992 px the text keeps its place (on top on tablets, under the logo
   part on phones, D-112), and the logo part
   is the iPad landscape (computer) design, only smaller: the notched logo card, the Trusted badge on its
   left, the businesses card in the notch with its gap. The part is laid out with the computer's values
   (1440 px: area 645 px, card 480 px, badge 205 px at 125 px left and 45%, businesses card 290 px at
   15 px right and 22 px low; the whole part spans 785 px from the badge to the card) and zoomed by a few
   lines in hero.njk: never larger than the same device shows it in landscape, centred in the column.
   While this class is on, the D-106 stacked rules step aside (they now carry :where(), which adds no
   weight, so phones are untouched). */
@media (max-width: 991px) {
  .tj-banner-section.fik-media-desk .fik-hero-media { zoom: var(--fik-media-zoom, 1); }
  .tj-banner-section.fik-media-desk .banner-img-area {
    max-width: 645px; width: 645px; margin-inline-start: calc((100% - 785px + var(--fik-badge-pull, 0px)) / 2 + 125px - var(--fik-badge-pull, 0px)); margin-inline-end: 0; margin-bottom: 22px;
  }
  .tj-banner-section.fik-media-desk .banner-img-area .banner-img.fik-hero-logo {
    max-width: 480px; border-radius: 16px; clip-path: none;
    -webkit-mask-image: url(../images/shapes/fik-hero-logo-shape.svg); mask-image: url(../images/shapes/fik-hero-logo-shape.svg);
  }
  .tj-banner-section.fik-media-desk .banner-img-area .trusted { max-width: 205px; padding: 20px; inset-inline-start: calc(-125px + var(--fik-badge-pull, 0px)); top: 45%; }
  .tj-banner-section.fik-media-desk .banner-img-area .customers-box {
    position: absolute; max-width: 290px; width: 100%; margin-top: 0; padding: 26px 24px 24px 24px; inset-inline-end: -15px; bottom: -22px;
  }
  .tj-banner-section.fik-media-desk .banner-img-area .customers-number { font-size: 60px; }
}
/* D-141: the data credit DB-IP's licence asks for, quiet under the copyright line */
.tj-copyright-area .copyright-text .fik-geo-credit { margin: 2px 0 0; font-size: 12px; line-height: 1.4; opacity: .7; }
.tj-copyright-area .copyright-text .fik-geo-credit a { color: inherit; }
/* D-142, D-143: the header reads thinner and a size smaller than the rest of the text (owner, 2026-10-03): the top line,
   email, phone, country switch, menu and the Contact Us button at weight 100 (was 300), at the template's 16 px (D-144) */
.header-area .header-top-content, .header-area .header-top-content a, .header-area .header-top-content span, .header-area .header-top-content p,
.header-area .mainmenu ul li a, .header-area .tj-primary-btn, .header-area .tj-primary-btn .btn-text, .header-area .tj-primary-btn .btn-text span { font-weight: 200; }

/* D-151 (owner, 2026-10-03): Careers, one page for the whole group (D-152: not on the home page). Cards, the facts box and the form use the template's
   own surfaces (the choose-box background and border, the contact form) and the site's thin type; nothing new in colour. */
.fik-careers-intro { padding-bottom: 50px; }
.fik-careers-intro.tj-choose-section .sec-heading .desc { max-width: 520px; }
.fik-careers-intro .sec-heading .desc p:last-child { margin-bottom: 0; }
.fik-careers-intro .fik-careers-facts { margin-top: 50px; }
.fik-careers-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fik-careers-facts li { display: grid; gap: 6px; padding: 22px 16px; border-radius: 12px; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); text-align: center; }
.fik-careers-fact-value { font-family: var(--tj-ff-heading); font-weight: 200; font-size: 44px; line-height: 1; color: var(--tj-color-heading-primary); }
.fik-careers-fact-label { font-size: 14px; line-height: 1.3; color: var(--tj-color-text-body); }
.fik-jobs-section { padding-bottom: 120px; }
.fik-job-filter.contact-form { margin: 0 0 40px; padding: 30px 30px 26px; border: 1px solid var(--tj-color-border-1); }
.fik-job-filter .form-input { margin-bottom: 16px; }
.fik-job-filter .form-input .nice-select { margin-bottom: 0; }
/* a long company name stops before the arrow, and the open list is as wide as its longest name (within the screen) */
.fik-job-filter.contact-form .form-input .nice-select .current { display: block; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 18px; }
.fik-job-filter.contact-form .form-input .nice-select .list { width: max-content; min-width: 100%; max-width: min(360px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.fik-job-filter.contact-form .form-input .nice-select .option { overflow: hidden; text-overflow: ellipsis; }
/* on phones the right-hand column opens its list leftwards, so it stays on the screen */
@media (max-width: 991px) { .fik-job-filter.contact-form .fik-job-select-end .nice-select .list { inset-inline-start: auto; inset-inline-end: 0; } }
/* on the narrowest phones each choice takes the full row, so its name is never cut */
@media (max-width: 359px) { .fik-job-filter .row > .col-6 { flex: 0 0 100%; max-width: 100%; } .fik-job-filter.contact-form .fik-job-select-end .nice-select .list { inset-inline-start: 0; inset-inline-end: auto; } }
/* the template floats its select; the box must hold it so every field keeps the same gap below */
.fik-job-filter .tj-nice-select-box { display: flow-root; }
.fik-job-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.fik-job-filter-reset { color: var(--tj-color-theme-primary); text-decoration: underline; text-underline-offset: 3px; }
.fik-job-count { margin: 0 0 0 auto; color: var(--tj-color-text-body); }
.fik-job-card { display: flex; flex-direction: column; height: 100%; padding: 30px 28px; border-radius: 12px; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); transition: border-color .3s ease-in-out; }
.fik-job-card:hover, .fik-job-card:focus-within { border-color: var(--tj-color-theme-primary); }
.fik-job-company { margin: 0 0 10px; font-size: 14px; letter-spacing: .02em; color: var(--tj-color-theme-primary); }
.fik-job-title { margin: 0 0 14px; font-size: 24px; font-weight: 200; line-height: 1.3; }
.fik-job-title a { color: inherit; }
.fik-job-meta { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--tj-color-text-body); }
.fik-job-meta li { display: inline-flex; align-items: center; gap: 7px; }
.fik-job-meta i { color: var(--tj-color-theme-primary); font-size: 15px; line-height: 1; }
.fik-job-summary { margin: 0 0 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fik-job-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--tj-color-border-1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.fik-job-date { font-size: 14px; color: var(--tj-color-text-body); }
.fik-jobs-empty { padding: 50px 30px; border-radius: 12px; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); text-align: center; }
.fik-jobs-empty .title { font-weight: 200; margin-bottom: 12px; }
.fik-jobs-empty .desc { max-width: 620px; margin: 0 auto; }
.fik-jobs-empty .desc a { color: var(--tj-color-theme-primary); text-decoration: underline; text-underline-offset: 3px; }
/* the role's own page */
.fik-job-heading { font-weight: 200; margin: 0 0 20px; }
.fik-job-lead { font-size: 17px; line-height: 1.7; margin-bottom: 30px; color: var(--tj-color-heading-primary); }
.fik-job-subheading { font-weight: 200; font-size: 26px; margin: 34px 0 16px; }
.fik-job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fik-job-list li { position: relative; padding-left: 26px; line-height: 1.6; }
.fik-job-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--tj-color-theme-primary); }
.fik-job-facts { position: sticky; top: 120px; padding: 30px 28px; border-radius: 12px; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); }
.fik-job-facts dl { margin: 0 0 24px; display: grid; gap: 14px; }
.fik-job-facts dl div { display: grid; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--tj-color-border-1); }
.fik-job-facts dt { font-weight: 200; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tj-color-text-body); }
.fik-job-facts dd { margin: 0; color: var(--tj-color-heading-primary); }
.fik-job-back { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 18px; color: var(--tj-color-text-body); }
.fik-job-back:hover { color: var(--tj-color-theme-primary); }
.fik-apply-form.contact-form.style-2 { max-width: 860px; margin: 70px 0 0; scroll-margin-top: 120px; }
.fik-apply-form .form-status, .fik-apply-form .fik-form-status { scroll-margin-top: 140px; }
.fik-apply-form input[type=text], .fik-apply-form input[type=email] { width: 100%; }
.fik-field-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--tj-color-text-body); }
.fik-file-input input[type=file] { display: block; width: 100%; padding: 14px; border: 1px dashed var(--tj-color-border-1); border-radius: 8px; background: transparent; color: var(--tj-color-text-body); font-size: 15px; font-weight: 200; cursor: pointer; }
.fik-file-input input[type=file]::file-selector-button { margin-right: 14px; padding: 8px 16px; border: 1px solid var(--tj-color-border-1); border-radius: 999px; background: var(--tj-color-theme-bg); color: var(--tj-color-heading-primary); font: inherit; cursor: pointer; }
.fik-file-input.is-invalid input[type=file] { border-color: var(--tj-color-theme-primary); }
.fik-job-others { margin-top: 90px; }
/* the template's process row holds three steps; hiring has four, so they share one row from 992 px (below, the template stacks them) */
@media (min-width: 992px) { .fik-hiring-process .process-wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .fik-hiring-process .process-item { padding: 90px 24px 44px; } }
@media (max-width: 1199px) { .fik-jobs-section { padding-bottom: 100px; } }
@media (max-width: 991px) {
  .fik-jobs-section { padding-bottom: 70px; }
  .fik-job-facts { position: static; }
  .fik-apply-form.contact-form.style-2 { margin-top: 50px; }
  .fik-job-others { margin-top: 60px; }
}
@media (max-width: 575px) {
  .fik-careers-facts li { padding: 18px 8px; }
  .fik-careers-fact-value { font-size: 34px; }
  .fik-careers-fact-label { font-size: 13px; }
  .fik-job-filter.contact-form { padding: 22px 16px 20px; }
  .fik-job-count { margin-left: 0; width: 100%; }
  .fik-job-card { padding: 24px 18px; }
  .fik-job-title { font-size: 21px; }
  .fik-job-subheading { font-size: 22px; }
  .fik-apply-form.contact-form.style-2 { padding: 35px 18px 40px; }
}

/* D-154 (owner approved the mockup, 2026-10-03): the careers page made modern. Hero with the search, the companies hiring,
   the roles as rows, the talent pool, life with us, the hiring steps and the questions. Surfaces, borders and type are the
   site's own tokens (choose-box background and border, primary accent, weight 200 headings). */
/* one framed hero for the careers and the investor pages (D-156: the investor page takes the careers background) */
.fik-cx-hero, .fik-iq-hero { position: relative; margin: 15px 15px 0; border-radius: 20px; overflow: hidden; padding: 190px 0 70px; background: var(--tj-color-theme-bg) center / cover; /* the picture comes from the head style with its version (D-196) */ }
.fik-cx-hero::before, .fik-iq-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 26, 29, .55), rgba(16, 26, 29, .88)); }
.tj-light-mode .fik-cx-hero::before, .tj-light-mode .fik-iq-hero::before { background: linear-gradient(180deg, rgba(246, 247, 247, .55), rgba(246, 247, 247, .92)); }
.fik-cx-hero .container { position: relative; }
.fik-cx-eyebrow { margin: 0; }
.fik-cx-eyebrow .sub-title { margin-bottom: 0; }
.fik-cx-title { font-weight: 200; font-size: clamp(38px, 5.4vw, 76px); line-height: 1.08; max-width: 900px; margin: 14px 0 22px; }
.fik-cx-lead { max-width: 640px; font-size: 17px; line-height: 1.7; margin: 0 0 36px; }
.fik-cx-search.contact-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; margin: 0; border-radius: 16px; background: var(--tj-color-theme-dark); border: 1px solid var(--tj-color-border-1); max-width: 1000px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); }
.fik-cx-search.contact-form .form-input { margin: 0; }
.fik-cx-field-q { position: relative; }
.fik-cx-field-q i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--tj-color-theme-primary); font-size: 17px; line-height: 1; pointer-events: none; }
.fik-cx-search.contact-form .fik-cx-field-q input { padding-left: 48px; }
.fik-cx-search.contact-form .form-input .nice-select { margin-bottom: 0; }
.fik-cx-search .tj-nice-select-box { display: flow-root; }
.fik-cx-search.contact-form .form-input .nice-select .current { display: block; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 18px; }
.fik-cx-search.contact-form .form-input .nice-select .list { width: max-content; min-width: 100%; max-width: min(360px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.fik-cx-search.contact-form .form-input .nice-select .option { overflow: hidden; text-overflow: ellipsis; }
.fik-cx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: var(--tj-color-text-body); }
.fik-cx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--tj-color-border-1); color: var(--tj-color-heading-primary); font-size: 14px; line-height: 1.4; transition: border-color .2s, color .2s; }
.fik-cx-chip:hover, .fik-cx-chip.is-on { border-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); }
.fik-cx-chip small { color: var(--tj-color-text-body); font-size: 12px; }
.fik-cx-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 46px; margin: 46px 0 0; padding: 26px 0 0; border-top: 1px solid var(--tj-color-border-1); }
.fik-cx-stats b { display: block; font-family: var(--tj-ff-heading); font-weight: 200; font-size: 44px; line-height: 1; color: var(--tj-color-heading-primary); }
.fik-cx-stats span { font-size: 14px; color: var(--tj-color-text-body); }
.fik-cx-sec { padding: 100px 0 0; }
.fik-cx-faq-sec { padding-bottom: 120px; }
.fik-cx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 30px; margin-bottom: 34px; }
.fik-cx-head .sec-heading { margin: 0; width: auto; max-width: 760px; flex: 0 1 auto; }
.fik-cx-head .sec-title { font-weight: 200; margin: 0; }
.fik-cx-head-text { max-width: 420px; margin: 0; }
.fik-cx-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.fik-cx-logo { display: grid; justify-items: center; gap: 10px; height: 100%; padding: 24px 12px 18px; border-radius: 12px; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); text-align: center; transition: border-color .2s; }
.fik-cx-logo:hover, .fik-cx-logo.is-on { border-color: var(--tj-color-theme-primary); }
.fik-cx-logo-mark img { width: 56px; height: 56px; object-fit: contain; }
.fik-cx-logo strong { font-weight: 200; font-size: 15px; color: var(--tj-color-heading-primary); line-height: 1.3; }
.fik-cx-logo > span:last-child { font-size: 13px; color: var(--tj-color-theme-primary); }
.fik-cx-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.fik-cx-showing { margin: -14px 0 20px; color: var(--tj-color-text-body); }
.fik-cx-showing a { color: var(--tj-color-theme-primary); text-decoration: underline; text-underline-offset: 3px; }
.fik-cx-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tj-color-border-1); }
.fik-cx-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, .9fr) 52px; align-items: center; gap: 22px; padding: 24px 6px; border-bottom: 1px solid var(--tj-color-border-1); transition: background-color .2s; }
.fik-cx-row:hover { background: rgba(255, 255, 255, .02); }
.tj-light-mode .fik-cx-row:hover { background: rgba(0, 0, 0, .02); }
.fik-cx-mark, .fik-job-mark { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); flex: 0 0 auto; }
.fik-cx-mark img, .fik-job-mark img { width: 42px; height: 42px; object-fit: contain; }
.fik-cx-name h3 { font-weight: 200; font-size: 22px; margin: 0 0 4px; }
.fik-cx-name h3 a { color: inherit; }
/* the whole row opens the role */
.fik-cx-name h3 a::after { content: ""; position: absolute; inset: 0; }
.fik-cx-sub { font-size: 14px; color: var(--tj-color-theme-primary); }
.fik-cx-cell { font-size: 14px; color: var(--tj-color-text-body); display: grid; gap: 4px; }
.fik-cx-cell i { color: var(--tj-color-theme-primary); margin-right: 7px; }
.fik-cx-go { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--tj-color-border-1); color: var(--tj-color-heading-primary); transition: all .2s; }
.fik-cx-row:hover .fik-cx-go { background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-dark); }
.fik-cx-new { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: rgba(210, 122, 92, .16); color: var(--tj-color-theme-primary); vertical-align: middle; }
.fik-cx-pool { margin-top: 70px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; padding: 46px 50px; border-radius: 16px; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); }
.fik-cx-pool .sec-heading { margin: 0; }
.fik-cx-pool-title { font-weight: 200; font-size: 32px; margin: 8px 0 10px; }
.fik-cx-pool p { margin: 0; max-width: 640px; }
.fik-cx-life { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 14px; }
.fik-cx-life figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); }
.fik-cx-life figure:first-child { grid-row: span 2; }
.fik-cx-life img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fik-cx-life figcaption { position: absolute; left: 14px; bottom: 12px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; }
.fik-cx-perks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fik-cx-perk { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 12px; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); }
.fik-cx-perk > i { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--tj-color-theme-dark); border: 1px solid var(--tj-color-border-1); color: var(--tj-color-theme-primary); font-size: 20px; }
.fik-cx-perk h4 { font-weight: 200; font-size: 19px; margin: 0 0 6px; }
.fik-cx-perk p { margin: 0; font-size: 14px; line-height: 1.55; }
.fik-hiring-process.section-gap { padding-bottom: 0; }
.fik-cx-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 50px; }
.fik-cx-faq .sec-heading { margin: 0; }
.fik-cx-faq .sec-title { font-weight: 200; margin: 10px 0 0; }
.fik-cx-faq-text { margin: 18px 0 0; }
/* the template's accordion, opened by the browser's own details element (no script) */
.fik-cx-faq details.accordion_item > summary { display: block; list-style: none; cursor: pointer; font-weight: 200; font-size: 19px; }
.fik-cx-faq details.accordion_item > summary::-webkit-details-marker { display: none; }
.fik-cx-faq details.accordion_item[open] { border-color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-dark); }
.fik-cx-faq details.accordion_item:not([open]) > .accordion_title { color: var(--tj-color-heading-primary); }
.fik-cx-faq details.accordion_item:not([open]) > .accordion_title::after { content: "\e91f"; border-color: var(--tj-color-border-1); background-color: var(--tj-color-theme-dark); color: var(--tj-color-theme-primary); }
.fik-cx-faq .accordion_content { padding: 22px 0 26px; }
.fik-cx-faq .accordion_content p { margin: 0; }
/* the role page: logo, the facts box head, sharing, the talent pool intro and the phone Apply bar */
.fik-job-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.fik-job-top .fik-job-company { margin: 0; }
.fik-job-facts-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--tj-color-border-1); }
.fik-job-facts-head img { width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.fik-job-facts-head strong { font-weight: 200; font-size: 18px; color: var(--tj-color-heading-primary); display: block; line-height: 1.3; }
.fik-job-facts-head span { font-size: 13px; }
.fik-job-share { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tj-color-border-1); }
.fik-job-share p { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.fik-job-share > div { display: flex; flex-wrap: wrap; gap: 8px; }
.fik-job-share a, .fik-job-copy { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--tj-color-border-1); background: transparent; color: var(--tj-color-heading-primary); transition: all .2s; }
.fik-job-share a:hover, .fik-job-copy:hover { border-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); }
.fik-job-copy { width: auto; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 200; cursor: pointer; }
.fik-job-copy[hidden] { display: none; }
.fik-pool-intro { max-width: 860px; }
/* the talent pool page has no facts column, so its text and form stand in the middle */
.fik-pool-page .fik-pool-intro { margin-inline: auto; text-align: center; }
.fik-pool-page .fik-apply-form.contact-form.style-2 { margin-inline: auto; margin-top: 50px; }
.fik-pool-intro .sec-heading { margin: 0 0 10px; }
.fik-apply-bar { display: none; }
@media (max-width: 991px) {
  .fik-apply-bar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 98; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--tj-color-theme-dark); border: 1px solid var(--tj-color-border-1); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .6); transition: transform .3s ease, opacity .3s ease; }
  .fik-apply-bar.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .fik-apply-bar > div { min-width: 0; }
  .fik-apply-bar strong { font-weight: 200; font-size: 15px; color: var(--tj-color-heading-primary); display: block; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fik-apply-bar span { font-size: 12px; }
  .fik-apply-bar .tj-primary-btn { flex: 0 0 auto; }
  /* Scroll Top sits above the bar */
  .fik-has-apply-bar .back-to-top-wrapper.back-to-top-btn-show { bottom: 100px; }
}
@media (max-width: 991px) {
  .fik-cx-search.contact-form { grid-template-columns: 1fr 1fr; }
  .fik-cx-field-q { grid-column: span 2; }
  .fik-cx-search .tj-primary-btn { grid-column: span 2; justify-self: start; }
  .fik-cx-search.contact-form .fik-cx-select-end .nice-select .list { inset-inline-start: auto; inset-inline-end: 0; }
  .fik-cx-row { grid-template-columns: 56px minmax(0, 1fr) 52px; gap: 6px 16px; }
  .fik-cx-row .fik-cx-mark { grid-row: span 2; width: 56px; height: 56px; }
  .fik-cx-row .fik-cx-go { grid-column: 3; grid-row: 1 / span 2; }
  .fik-cx-row .fik-cx-cell { display: none; }
  .fik-cx-row .fik-cx-where { display: flex; flex-wrap: wrap; gap: 4px 16px; grid-column: 2; }
  .fik-cx-faq, .fik-cx-pool { grid-template-columns: 1fr; }
  .fik-cx-faq { gap: 30px; }
  .fik-cx-perks { grid-template-columns: 1fr 1fr; }
  .fik-cx-life { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px 160px; }
  .fik-cx-life figure:first-child { grid-column: span 2; grid-row: auto; }
  .fik-cx-sec { padding-top: 80px; }
  .fik-cx-faq-sec { padding-bottom: 80px; }
}
@media (max-width: 575px) {
  .fik-cx-hero { padding: 150px 0 46px; border-radius: 12px; }
  .fik-cx-lead { font-size: 15px; }
  .fik-cx-search.contact-form { grid-template-columns: 1fr; }
  .fik-cx-field-q, .fik-cx-search .tj-primary-btn { grid-column: auto; }
  .fik-cx-search.contact-form .fik-cx-select-end .nice-select .list { inset-inline-start: 0; inset-inline-end: auto; }
  .fik-cx-stats { gap: 14px 28px; }
  .fik-cx-stats b { font-size: 34px; }
  .fik-cx-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fik-cx-row { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; padding: 20px 2px; }
  .fik-cx-row .fik-cx-mark { width: 52px; height: 52px; }
  .fik-cx-row .fik-cx-go { display: none; }
  .fik-cx-name h3 { font-size: 20px; }
  .fik-cx-pool { padding: 30px 20px; }
  .fik-cx-pool-title { font-size: 26px; }
  .fik-cx-perks { grid-template-columns: 1fr; }
  .fik-cx-life { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 130px 130px; }
  .fik-cx-sec { padding-top: 70px; }
  .fik-job-share a { width: 40px; height: 40px; }
}

/* D-155 (owner approved the mockup, 2026-10-03): the investor and partner inquiry page. Corporate and quiet: the framed
   hero with three promises, the form in a large card with the two choices as cards, the facts beside it, the three offices. */
.fik-iq-hero .container { position: relative; }
.fik-iq-hero .sec-heading { margin: 0; }
.fik-iq-hero .sub-title { margin-bottom: 0; }
.fik-iq-title { font-weight: 200; font-size: clamp(38px, 4.8vw, 68px); line-height: 1.08; margin: 16px 0 22px; max-width: 900px; }
.fik-iq-lead { font-size: 17px; line-height: 1.75; max-width: 680px; margin: 0; }
.fik-iq-promises { list-style: none; margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--tj-color-border-1); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fik-iq-promises li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.fik-iq-promises i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); font-size: 16px; }
.fik-iq-promises strong { display: block; font-weight: 200; font-size: 17px; color: var(--tj-color-heading-primary); margin-bottom: 2px; }
.fik-iq-main { padding: 100px 0 0; scroll-margin-top: 100px; }
.fik-iq-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: 40px; align-items: start; }
.fik-iq-aside { order: -1; position: sticky; top: 120px; display: grid; gap: 14px; }
.fik-iq-box { border-radius: 16px; padding: 28px; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); }
.fik-iq-box h2 { font-weight: 200; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--tj-color-theme-primary); margin: 0 0 20px; }
.fik-iq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: fik-step; }
.fik-iq-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; font-size: 15px; line-height: 1.6; counter-increment: fik-step; }
.fik-iq-steps li::before { content: counter(fik-step, decimal-leading-zero); font-family: var(--tj-ff-heading); font-weight: 200; color: var(--tj-color-theme-primary); }
.fik-iq-contact a { display: flex; align-items: center; gap: 12px; color: var(--tj-color-heading-primary); padding: 10px 0; border-top: 1px solid var(--tj-color-border-1); overflow-wrap: anywhere; }
.fik-iq-contact a:first-of-type { border-top: 0; padding-top: 0; }
.fik-iq-contact i { color: var(--tj-color-theme-primary); }
.fik-iq-box.fik-iq-note { background: transparent; border-style: dashed; display: flex; gap: 14px; }
.fik-iq-note i { font-size: 22px; color: var(--tj-color-theme-primary); }
.fik-iq-note p { margin: 0; font-size: 14px; line-height: 1.6; }
.fik-iq-form.contact-form.style-2 { max-width: none; margin: 0; padding: 48px 46px; border-radius: 18px; }
.fik-iq-form.contact-form.style-2 .title { font-weight: 200; font-size: 32px; margin-bottom: 10px; }
.fik-iq-sub { margin: 0 0 30px; }
.fik-iq-group { display: block; width: 100%; margin: 0 0 24px; padding: 0 0 10px; border-bottom: 1px solid var(--tj-color-border-1); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tj-color-text-body); }
.fik-iq-group span { color: var(--tj-color-theme-primary); }
.fik-iq-form .fik-iq-choose { margin: 0 0 34px; padding: 0; border: 0; min-width: 0; }
.fik-iq-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fik-iq-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 12px; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-theme-bg); cursor: pointer; transition: border-color .2s; }
.fik-iq-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fik-iq-card:has(input:checked) { border-color: var(--tj-color-theme-primary); }
.fik-iq-card:has(input:focus-visible) { outline: 2px solid var(--tj-color-theme-primary); outline-offset: 2px; }
.fik-iq-dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--tj-color-border-1); margin-top: 3px; display: grid; place-items: center; }
.fik-iq-card:has(input:checked) .fik-iq-dot { border-color: var(--tj-color-theme-primary); }
.fik-iq-card:has(input:checked) .fik-iq-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tj-color-theme-primary); }
.fik-iq-card strong { display: block; font-weight: 200; font-size: 18px; color: var(--tj-color-heading-primary); }
.fik-iq-card strong + span { display: block; font-size: 13px; line-height: 1.5; }
.fik-iq-form.contact-form .form-input .nice-select .current { display: block; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 18px; }
.fik-iq-form.contact-form .form-input .nice-select .list { width: max-content; min-width: 100%; max-width: min(360px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.fik-iq-offices { padding: 100px 0 120px; }
.fik-iq-office-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--tj-color-border-1); border-radius: 16px; overflow: hidden; }
.fik-iq-office { padding: 28px 26px; }
.fik-iq-office + .fik-iq-office { border-left: 1px solid var(--tj-color-border-1); }
.fik-iq-code { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); font-size: 13px; letter-spacing: .06em; }
.fik-iq-office h3 { font-weight: 200; font-size: 20px; margin: 16px 0 2px; }
.fik-iq-country { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.fik-iq-office address { font-style: normal; font-size: 14px; line-height: 1.6; margin: 14px 0 0; }
@media (max-width: 991px) {
  .fik-iq-layout { grid-template-columns: 1fr; }
  .fik-iq-aside { order: 0; position: static; }
  .fik-iq-promises { grid-template-columns: 1fr; }
  .fik-iq-office-row { grid-template-columns: 1fr; }
  .fik-iq-office + .fik-iq-office { border-left: 0; border-top: 1px solid var(--tj-color-border-1); }
  .fik-iq-main, .fik-iq-offices { padding-top: 70px; }
  .fik-iq-offices { padding-bottom: 80px; }
}
@media (max-width: 575px) {
  .fik-iq-hero { padding: 150px 0 46px; border-radius: 12px; }
  .fik-iq-lead { font-size: 15px; }
  .fik-iq-form.contact-form.style-2 { padding: 32px 18px; }
  .fik-iq-form.contact-form.style-2 .title { font-size: 26px; }
  .fik-iq-cards { grid-template-columns: 1fr; }
  .fik-iq-box { padding: 22px; }
}

/* D-164 (owner, 2026-10-03): under the About text, the old site's Vision & Mission, CSR and Transparency, each opened with a
   click, between thin dotted lines as on the old site; full width under the section (D-165), so the card keeps its height. */
.fik-about-pillars { margin: 90px 0 0; border-top: 1px dashed var(--tj-color-border-1); }
.fik-about-pillar { border-bottom: 1px dashed var(--tj-color-border-1); }
.fik-about-pillar > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 22px 1fr 26px; align-items: center; gap: 14px; padding: 13px 0; color: var(--tj-color-heading-primary); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.fik-about-pillar > summary::-webkit-details-marker { display: none; }
.fik-about-pillar > summary:focus-visible { outline: 2px solid var(--tj-color-theme-primary); outline-offset: 2px; }
.fik-about-pillar > summary > i { color: var(--tj-color-theme-primary); font-size: 18px; line-height: 1; }
.fik-about-pillar-toggle { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--tj-color-border-1); }
.fik-about-pillar-toggle::before, .fik-about-pillar-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: var(--tj-color-theme-primary); transform: translate(-50%, -50%); transition: transform .25s ease; }
.fik-about-pillar-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.fik-about-pillar[open] .fik-about-pillar-toggle { border-color: var(--tj-color-theme-primary); }
.fik-about-pillar[open] .fik-about-pillar-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.fik-about-pillar[open] > summary { color: var(--tj-color-theme-primary); }
.fik-about-pillar-text { padding: 0 0 20px 36px; max-width: 1000px; }
.fik-about-pillar-text p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; }
.fik-about-pillar-text p:last-child { margin-bottom: 0; }
@media (max-width: 575px) { .fik-about-pillar > summary { font-size: 14px; letter-spacing: .05em; gap: 12px; } .fik-about-pillar-text { padding-left: 0; } }

/* D-166 (owner, 2026-10-03): the About cards end on one line. Side by side (992 px and wider) both columns take the row's
   height: the About card stretches to the left side's bottom, and when the card is the taller one the flag gallery grows to
   fill, so the orange card and the founder card end exactly where the About card ends, at every width. */
@media (min-width: 992px) {
  .tj-about-section .row > .col-lg-6 { display: flex; flex-direction: column; }
  .tj-about-section .about-content-area { flex: 1 1 auto; }
  .tj-about-section .about-left { flex: 1 1 auto; display: flex; flex-direction: column; }
  .tj-about-section .about-left .about-img { flex: 1 0 auto; display: flex; flex-direction: column; }
  .tj-about-section .about-left .fik-regions-gallery { flex: 1 0 auto; }
}

/* D-168 (owner, 2026-10-03): one gap, 10 px, between the flags, under the flags and between the two cards, and the orange card
   and the founder card start and end on one line. Where the template stacks them under the flags (992-1199 px and under 768
   px) it had pinned both to the bottom (the shorter founder card started lower), set 15 px between and above them and 6 px
   between the flags on phones. */
@media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) {
  .tj-about-section .about-left-bottom { margin-top: 10px; gap: 10px; align-items: stretch; }
  .tj-about-section .about-left-bottom .author-area { align-content: center; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tj-about-section .about-left-bottom .experience-area { flex: 0 0 225px; max-width: 225px; }
  .tj-about-section .about-left-bottom .author-area { flex: 1 1 0; max-width: none; }
}
@media (max-width: 575px) {
  .fik-regions-gallery { gap: 10px; }
}

/* D-169 (owner chose to keep the orange card set into the flags on large screens, 2026-10-03): the template's cut-out
   mask (shape-2.svg, 645 x 485) was drawn "contain", so wherever the flags stand taller than that shape its bottom was masked
   away: 4 px at most widths and 19 px at 1200 px, where the flags' bottom corners showed cut square. The mask now spans the
   whole picture, so every flag ends on its own rounded corners. */
.tj-about-section .about-img { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

/* D-173 (owner, 2026-10-03): the dotted line runs through the middle of the step cards, and so do the cards' side notches.
   The template cut each card with one picture (process-item-bg.svg, 420 x 299) pinned to the top, so on a card of another
   height the notches sat off the middle (18 px low on the 262 px home cards) while the line ran through the middle. The same
   shape is now cut from the card itself: the 55 px bowl round the number at the top centre (the picture's own radius, so the
   80 px number keeps its 15 px ring) and the 20 px notches at the exact middle of each side, at any card size. */
.process-item::before {
  -webkit-mask-image: radial-gradient(circle 55px at 50% 0, transparent 54.5px, #000 55.5px), radial-gradient(circle 20px at 0 50%, transparent 19.5px, #000 20.5px), radial-gradient(circle 20px at 100% 50%, transparent 19.5px, #000 20.5px);
  mask-image: radial-gradient(circle 55px at 50% 0, transparent 54.5px, #000 55.5px), radial-gradient(circle 20px at 0 50%, transparent 19.5px, #000 20.5px), radial-gradient(circle 20px at 100% 50%, transparent 19.5px, #000 20.5px);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect;
}

/* D-174 (owner approved the mockup, 2026-10-03): the F.C.S.E.M.T. Mission in place of the third list of companies. Six tiles
   in the site's card surface, a large thin letter in the corner, and each need's companies as small logo chips. */
.fik-needs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 30px 60px; align-items: end; margin-bottom: 46px; }
.fik-needs-head .sec-heading { margin: 0; }
.fik-needs-head .sec-title { font-weight: 200; margin: 0; }
.fik-needs-head p { margin: 0; }
.fik-needs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fik-need { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 260px; padding: 28px 26px 24px; border-radius: 14px; background: var(--tj-color-theme-bg); border: 1px solid var(--tj-color-border-1); }
.fik-need-letter { position: absolute; right: 18px; top: -10px; font-family: var(--tj-ff-heading); font-weight: 200; font-size: 150px; line-height: 1; color: var(--tj-color-theme-primary); opacity: .14; pointer-events: none; }
.fik-need h3 { position: relative; font-weight: 200; font-size: 26px; margin: 0; display: flex; align-items: center; gap: 12px; }
.fik-need h3 i { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-theme-dark); color: var(--tj-color-theme-primary); font-size: 20px; }
.fik-need p { position: relative; margin: 0; font-size: 15px; line-height: 1.6; max-width: 340px; }
.fik-need-companies { list-style: none; margin: auto 0 0; padding: 16px 0 0; border-top: 1px solid var(--tj-color-border-1); display: flex; flex-wrap: wrap; gap: 8px; }
.fik-need-companies a, .fik-need-next { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-theme-dark); font-size: 13px; line-height: 1.3; color: var(--tj-color-heading-primary); transition: border-color .2s; }
.fik-need-companies a:hover { border-color: var(--tj-color-theme-primary); }
.fik-need-next { padding: 6px 12px; color: var(--tj-color-text-body); }
/* the name is one inline run, so the trademark sign sits against FiKHSONS instead of becoming its own flex item */
.fik-need-name { display: inline; }
.fik-need-logo { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--tj-color-theme-bg); }
.fik-need-logo img { width: 22px; height: 22px; object-fit: contain; }
.fik-need-logo i { font-size: 13px; color: var(--tj-color-theme-primary); }
.fik-need.is-next { border-style: dashed; background: transparent; }
.fik-needs-across { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 26px; border-radius: 14px; border: 1px solid var(--tj-color-border-1); }
.fik-needs-across strong { font-weight: 200; font-size: 19px; color: var(--tj-color-heading-primary); }
.fik-needs-across .fik-need-companies { margin: 0; padding: 0; border: 0; }
.fik-needs-across > span { font-size: 15px; }
@media (max-width: 991px) {
  .fik-needs-grid { grid-template-columns: 1fr 1fr; }
  .fik-needs-head { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .fik-needs-grid { grid-template-columns: 1fr; }
  .fik-need { min-height: 0; padding: 24px 20px 20px; }
  .fik-need-letter { font-size: 110px; }
  .fik-needs-across { padding: 18px 20px; }
}

/* D-179: in the Contact section every link takes its own line; the short country names (Germany, Bangladesh) otherwise ran together on one */
#contact .contact-info .contact-item a.contact-link { display: block; width: fit-content; }

/* D-181 (owner approved the mockup, 2026-10-03): News & Media pages. The hero, chips and heads are the careers page's own;
   the cards use the site's card surface. */
.fik-news-all { margin-top: 40px; text-align: center; }
.fik-nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--tj-color-text-body); }
.fik-nw-tag { padding: 3px 12px; border-radius: 999px; border: 1px solid var(--tj-color-border-1); color: var(--tj-color-theme-primary); font-size: 13px; }
.fik-nw-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-radius: 18px; overflow: hidden; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-theme-bg); }
.fik-nw-feature-img img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
.fik-nw-feature-body { padding: 44px 42px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; }
.fik-nw-feature h2 { font-weight: 200; font-size: 34px; line-height: 1.2; margin: 0; }
.fik-nw-feature h2 a, .fik-nw-card h3 a { color: inherit; }
.fik-nw-feature p { margin: 0; }
.fik-nw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fik-nw-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-theme-bg); transition: border-color .2s; }
.fik-nw-card:hover { border-color: var(--tj-color-theme-primary); }
.fik-nw-card img { width: 100%; aspect-ratio: 1305 / 675; height: auto; object-fit: cover; display: block; }
.fik-nw-card-body { padding: 22px 24px 26px; display: grid; gap: 12px; }
.fik-nw-card h3 { font-weight: 200; font-size: 21px; line-height: 1.3; margin: 0; }
.fik-nw-card p { margin: 0; font-size: 14px; line-height: 1.6; }
.fik-nw-press { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 40px 44px; border-radius: 16px; border: 1px solid var(--tj-color-border-1); }
.fik-nw-press .sec-heading { margin: 0; }
.fik-nw-press p { margin: 0; }
.fik-nw-end { height: 120px; }
.fik-nw-article { padding: 190px 0 120px; }
.fik-nw-wrap { max-width: 820px; margin: 0 auto; }
.fik-nw-wrap .fik-job-back { margin: 0 0 26px; }
.fik-nw-title { font-weight: 200; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.12; margin: 16px 0 34px; }
.fik-nw-cover { margin: 0 0 40px; border-radius: 18px; overflow: hidden; }
.fik-nw-cover img { width: 100%; height: auto; display: block; }
.fik-nw-body p { font-size: 17px; line-height: 1.85; margin: 0 0 22px; }
.fik-nw-body h2 { font-weight: 200; font-size: 28px; line-height: 1.3; margin: 42px 0 16px; }
.fik-nw-body ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; }
.fik-nw-body li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.7; }
.fik-nw-body li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--tj-color-theme-primary); }
.fik-nw-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 24px 0; margin-top: 34px; border-top: 1px solid var(--tj-color-border-1); border-bottom: 1px solid var(--tj-color-border-1); }
.fik-nw-share > span { margin-right: 6px; }
.fik-nw-share a { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--tj-color-border-1); color: var(--tj-color-heading-primary); transition: all .2s; }
.fik-nw-share a:hover { border-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); }
.fik-nw-others { margin-top: 90px; }
@media (max-width: 991px) {
  .fik-nw-feature { grid-template-columns: 1fr; }
  .fik-nw-feature-img img { min-height: 0; aspect-ratio: 1305 / 675; }
  .fik-nw-grid { grid-template-columns: 1fr 1fr; }
  .fik-nw-press { grid-template-columns: 1fr; }
  .fik-nw-article { padding: 160px 0 80px; }
  .fik-nw-end { height: 80px; }
}
@media (max-width: 575px) {
  .fik-nw-grid { grid-template-columns: 1fr; }
  .fik-nw-feature-body { padding: 26px 20px; }
  .fik-nw-feature h2 { font-size: 26px; }
  .fik-nw-press { padding: 28px 20px; }
  .fik-nw-body p, .fik-nw-body li { font-size: 16px; }
  .fik-nw-body h2 { font-size: 24px; }
}

/* D-187 (owner approved the mockup, 2026-10-04): client reviews in the former Our Companies strip style, made premium:
   a 72 px photo in a thin ring, the client's own stars, the review, the company with its logo, a fine accent line on top
   and a large quiet quote mark. Inside the framed panel the video sits on (the panel keeps its own top room). */
.fik-reviews .sec-heading { margin-bottom: 50px; }
.fik-reviews-rows { gap: 15px; }
.fik-reviews-rows::after, .fik-reviews-rows::before { background: linear-gradient(to right, var(--tj-color-theme-bg) 0%, transparent 100%) !important; }
.fik-reviews-rows .scroll-wrapper { animation-duration: 70s; }
.fik-reviews-rows .scroll-slider:hover .scroll-wrapper, .fik-reviews-rows .scroll-slider:focus-within .scroll-wrapper { animation-play-state: paused; }
/* D-188 (owner, 2026-10-04): each card about 40% smaller (440 x 320 became 360 x 244); D-189: 20% smaller again (290 px,
   250 on phones) and the review text two sizes smaller (12 px, 11 on phones); D-190: wider and lower (350 px, 290 on phones,
   less top and bottom room), like the former strip's cards; D-191: company chip at the card's left edge under a hairline,
   Read Review on the right opens the whole review in a window, the quote mark moves to the top corner, the chip shows logo
   and company name ("Worked with" is read aloud only, so chip and link share one line), in the former Our Companies
   card layout (template .tech-item: picture left, text right, 10 px corners). Look, colours and accents unchanged. */
.fik-review { position: relative; flex: 0 0 auto; width: 350px; display: flex; flex-direction: column; padding: 16px 22px 14px; border-radius: 10px; background: var(--tj-color-theme-dark); border: 1px solid var(--tj-color-border-1); overflow: hidden; transition: border-color .3s, transform .3s; }
.fik-review::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--tj-color-theme-primary), transparent); opacity: .55; }
.fik-review::after { content: "\201D"; position: absolute; right: 16px; top: -6px; font-family: var(--tj-ff-heading); font-weight: 200; font-size: 84px; line-height: 1; color: var(--tj-color-theme-primary); opacity: .08; pointer-events: none; }
.fik-review:hover { border-color: var(--tj-color-theme-primary); transform: translateY(-3px); }
.fik-review-top { display: flex; align-items: flex-start; gap: 14px; }
.fik-review-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fik-review-photo { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; padding: 2px; border: 1px solid var(--tj-color-theme-primary); background: var(--tj-color-theme-bg); }
.fik-review-initials { display: grid; place-items: center; font-family: var(--tj-ff-heading); font-weight: 200; font-size: 17px; letter-spacing: .04em; color: var(--tj-color-theme-primary); }
.fik-review-name { font-weight: 200; font-size: 17px; line-height: 1.3; margin: 2px 0 2px; }
.fik-review-role { display: block; font-size: 12px; line-height: 1.45; color: var(--tj-color-text-body); white-space: normal; }
.fik-review-country { color: var(--tj-color-theme-primary); }
.fik-review-stars { display: flex; gap: 3px; margin-top: 6px; }
.fik-review-stars svg { width: 13px; height: 13px; display: block; }
.fik-review-stars .is-on { fill: #E2A93B; }
.fik-review-stars .is-off { fill: none; stroke: #E2A93B; stroke-width: 1.2; opacity: .6; }
.fik-review-quote { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--tj-color-heading-primary); white-space: normal; }
/* with the script, a card shows three lines and Read Review shows the rest; without it the whole review stays in the card */
.fik-reviews-ready .fik-review .fik-review-quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: calc(3 * 1.6em); }
.fik-review-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fik-review .fik-review-foot { margin-top: 10px; border-top: 1px solid var(--tj-color-border-1); }
.fik-review-company { min-width: 0; display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; border-radius: 14px; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-theme-bg); font-size: 11px; line-height: 1.35; color: var(--tj-color-text-body); white-space: normal; }
.fik-review-company > span:last-child { min-width: 0; padding: 1px 0; }
.fik-review-logo { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #fff; }
.fik-review-logo img { width: 16px; height: 16px; object-fit: contain; }
.fik-review-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; font-size: 12px; letter-spacing: .02em; color: var(--tj-color-theme-primary); cursor: pointer; white-space: nowrap; }
.fik-review-more i { font-size: 10px; transition: transform .3s; }
.fik-review-more:hover i, .fik-review-more:focus-visible i { transform: translateX(3px); }
.fik-review-more:focus-visible { outline: 1px solid var(--tj-color-theme-primary); outline-offset: 3px; border-radius: 4px; }
.fik-reviews-still { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
/* the Read Review window */
.fik-review-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100% - 32px); overflow-y: auto; width: calc(100% - 32px); max-width: 520px; padding: 34px 32px 28px; border-radius: 16px; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-theme-dark); color: var(--tj-color-text-body); }
.fik-review-dialog::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--tj-color-theme-primary), transparent); opacity: .7; }
.fik-review-dialog::backdrop { background: rgba(5, 10, 12, .62); backdrop-filter: blur(4px); }
.fik-review-dialog[open] { animation: fik-review-in .25s ease-out; }
@keyframes fik-review-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fik-review-full .fik-review-top { gap: 18px; align-items: center; padding-right: 30px; }
.fik-review-full .fik-review-photo { width: 88px; height: 88px; padding: 3px; }
.fik-review-full .fik-review-initials { font-size: 26px; }
.fik-review-full .fik-review-name { font-size: 22px; }
.fik-review-full .fik-review-role { font-size: 13px; }
.fik-review-full .fik-review-stars svg { width: 16px; height: 16px; }
.fik-review-full .fik-review-quote { margin-top: 20px; font-size: 16px; line-height: 1.75; }
.fik-review-full .fik-review-foot { margin-top: 20px; padding-top: 0; justify-content: flex-start; }
.fik-review-full .fik-review-company { font-size: 12px; }
.fik-review-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-theme-bg); color: var(--tj-color-heading-primary); font-size: 12px; cursor: pointer; transition: border-color .3s; }
.fik-review-close:hover, .fik-review-close:focus-visible { border-color: var(--tj-color-theme-primary); }
@media (max-width: 575px) {
  .fik-review { width: 300px; padding: 14px 16px 12px; }
  .fik-review-top { gap: 10px; }
  .fik-review-photo { width: 42px; height: 42px; }
  .fik-review-name { font-size: 16px; }
  .fik-review-quote { font-size: 11px; }
  .fik-review-dialog { padding: 28px 20px 22px; }
  .fik-review-full .fik-review-photo { width: 68px; height: 68px; }
  .fik-review-full .fik-review-name { font-size: 19px; }
  .fik-review-full .fik-review-quote { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .fik-reviews-rows .scroll-wrapper { animation-play-state: paused; } }

/* D-146 (kept last so it wins over the component rules above): the font sweep found body text the template still set at 300; it follows D-145 like the rest: blog tags,
   Scroll Top, the Subscribe button, the business page's side list and checklist, the THE GROUP badge, the counter labels,
   the breadcrumb's current page, the video label and the Visit link */
.categories a, .back_to_top_text, .tj-primary-btn .btn-text span, .tj_list li, .exp-badge, .countup-item .count-text,
.tj-page-link span, .fik-video-label, .fik-business-site, .tj-sidebar-widget li a, .service-categories li a { font-weight: 200 !important; }
/* and Manrope text the template set at 300 takes Manrope's lightest, 200, as every other Manrope line: the logo strip's
   names, the flag names, the US DE BD marks, the video caption and the contact page's country and phone lines */
.fik-rail-name, .fik-rail-name .fik-wordmark-brand, .fik-region-panel-name, .fik-region-panel-code, .fik-mark, .fik-video-caption,
.feature-content span, .feature-contact span, .read-more.feature-contact span { font-weight: 200 !important; }
/* the small section labels are 15 px everywhere; the business page set its own at 16 */
.post-details-wrapper .sub-title { font-size: 15px; }

/* D-147 (owner, 2026-10-03): weight 100 read too faint, so every 100 above is now 200; and body text is 15 px instead of
   the template's 16: the template's two body size tokens, then (below) the parts it sets at 16 px by hand */
:root { --tj-fs-body: 15px; --tj-fs-p: 15px; }
.mainmenu ul li a, .tj-primary-btn .btn-text span, .tj-text-btn .btn-text span, .countup-item .count-text, .fik-video-label,
.categories a, .cf-label, .copyright-menu li a, .header-top-content .topbar-text, .header-top-content a, .header-top-content span,
.tj-page-link a, .tj-page-link span { font-size: 15px; }
/* the template sets these two with longer selectors */
.tj-copyright-area .copyright-menu ul li a, .contact-form .form-input .cf-label, .form-input .cf-label, fieldset.form-input .cf-label { font-size: 15px; }

/* D-192: the video band's window. 16:9 at up to 1100 px, the film fills it; the close button sits above the film's right corner. */
.fik-video-dialog { position: fixed; inset: 0; margin: auto; width: calc(100% - 32px); max-width: 1100px; height: fit-content; max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--tj-color-border-1); border-radius: 14px; background: #000; overflow: visible; }
.fik-video-dialog::backdrop { background: rgba(5, 10, 12, .8); backdrop-filter: blur(4px); }
.fik-video-dialog[open] { animation: fik-review-in .25s ease-out; }
.fik-video-frame { aspect-ratio: 16 / 9; width: 100%; max-height: calc(100vh - 32px); border-radius: 14px; overflow: hidden; }
.fik-video-frame video, .fik-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.fik-video-close { z-index: 2; top: -46px; right: 0; width: 36px; height: 36px; font-size: 13px; }

/* D-198: the legal pages use the News article layout with a row of the three pages at the end */
.fik-legal-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--tj-color-border-1); }
.fik-legal-nav a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--tj-color-border-1); font-size: 14px; color: var(--tj-color-heading-primary); }
.fik-legal-nav a[aria-current="page"], .fik-legal-nav a:hover { border-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); }

/* D-205: the language switch (EN | DE): quiet like the country chooser beside it, the current language in the accent */
.fik-lang { display: inline-flex; align-items: center; gap: 6px; font-size: inherit; line-height: 1; }
.fik-lang a { color: inherit; opacity: .75; letter-spacing: .04em; transition: color .3s, opacity .3s; }
.fik-lang a:hover, .fik-lang a:focus-visible { opacity: 1; color: var(--tj-color-theme-primary); }
.fik-lang a[aria-current="true"] { opacity: 1; color: var(--tj-color-theme-primary); }
.fik-lang span { opacity: .4; }
.fik-lang-compact { padding: 0 6px; font-size: 13px; color: var(--tj-color-heading-primary); }
/* a finger-sized target on phones (WCAG 2.5.8): the box grows, the letters keep their size */
.fik-lang-compact { gap: 0; padding: 0 2px; }
.fik-lang-compact a { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 28px; }
.fik-iq-disclaimer { margin: 18px 0 0; }

/* D-208: the online application (the form is the CV) and the private documents page */
.fik-apply-intro { margin: 0 0 26px; color: var(--tj-color-text-body); }
.fik-apply-part { min-width: 0; margin: 0 0 34px; padding: 0; border: 0; }
.fik-apply-part legend { float: none; display: flex; align-items: baseline; gap: 12px; width: 100%; margin: 0 0 18px; padding: 0 0 12px; border-bottom: 1px solid var(--tj-color-border-1); font-size: 21px; font-weight: 300; line-height: 1.3; color: var(--tj-color-heading-primary); }
.fik-apply-part legend span { font-size: 13px; letter-spacing: .08em; color: var(--tj-color-theme-primary); }
.fik-apply-note { margin: -6px 0 14px; font-size: 14px; color: var(--tj-color-text-body); }
.fik-apply-rows { display: grid; gap: 14px; }
.fik-apply-row { padding: 18px 18px 0; border: 1px solid var(--tj-color-border-1); border-radius: 12px; transition: opacity .2s; }
.fik-apply-row.is-off { opacity: .4; }
.fik-apply-row-title { margin: 0 0 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--tj-color-text-body); }
.fik-apply-check { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; color: var(--tj-color-text-body); cursor: pointer; }
.fik-apply-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--tj-color-theme-primary); }
.fik-apply-check-inline { margin-top: 42px; }
.fik-apply-choices { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.fik-apply-choices .cf-label { width: 100%; }
.fik-apply-choices .cf-label em { font-style: normal; font-size: 13px; opacity: .8; }
.fik-apply-choices .fik-field-error { width: 100%; }
.fik-apply-add { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px dashed var(--tj-color-border-1); border-radius: 999px; background: transparent; color: var(--tj-color-theme-primary); font: inherit; font-size: 15px; cursor: pointer; transition: border-color .2s; }
.fik-apply-add:hover, .fik-apply-add:focus-visible { border-color: var(--tj-color-theme-primary); }
.fik-apply-form .form-input input[type=month], .fik-apply-form .form-input input[type=date], .fik-apply-form .form-input input[type=tel] { outline: none; width: 100%; min-height: 44px; padding: 8px 20px; border: 1px solid var(--tj-color-border-1); border-radius: 8px; background-color: var(--tj-color-theme-bg); color: var(--tj-color-heading-primary); font-size: var(--tj-fs-body); font-weight: 200; color-scheme: dark; }
.fik-apply-form .form-input input[type=month]:focus, .fik-apply-form .form-input input[type=date]:focus, .fik-apply-form .form-input input[type=tel]:focus { border-color: var(--tj-color-theme-primary); }
.tj-light-mode .fik-apply-form .form-input input[type=month], .tj-light-mode .fik-apply-form .form-input input[type=date] { color-scheme: light; }
.fik-docs-form.contact-form.style-2 { max-width: 860px; margin: 0 auto; }
.fik-docs-message { margin: 0 0 24px; padding: 14px 18px; border-left: 2px solid var(--tj-color-theme-primary); border-radius: 0 8px 8px 0; background: var(--tj-color-theme-dark); color: var(--tj-color-heading-primary); white-space: pre-line; }
.fik-docs-list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--tj-color-text-body); }
.fik-docs-list i { color: var(--tj-color-theme-primary); }
@media (max-width: 575px) {
  .fik-apply-row { padding: 14px 12px 0; }
  .fik-apply-check-inline { margin-top: 0; }
}

/* D-209: the Job Bank (sign in, online CV, my applications) and the apply box on a role */
.fik-apply-gate { padding: 22px; border: 1px solid var(--tj-color-border-1); border-radius: 12px; }
.fik-apply-gate form { max-width: 520px; }
.fik-apply-summary { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--tj-color-border-1); border-radius: 12px; color: var(--tj-color-text-body); }
.fik-apply-summary p { margin: 0 0 4px; }
.fik-badge-ok { display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); font-size: 12px; }
.fik-turnstile { margin: 4px 0 18px; min-height: 65px; }
.fik-code-input input { max-width: 220px; letter-spacing: .3em; font-size: 22px; }
.fik-account-aside { margin: 14px 0 0; font-size: 15px; }
.fik-account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0 0 30px; }
.fik-account-card { padding: 16px 18px; border: 1px solid var(--tj-color-border-1); border-radius: 12px; color: var(--tj-color-text-body); }
.fik-account-card p { margin: 0 0 8px; }
.fik-account-card i, .fik-account-apps i { color: var(--tj-color-theme-primary); }
.fik-account-label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.fik-account-card .is-warn, .fik-account-card .is-warn + * { color: var(--tj-color-theme-primary); }
.is-warn { color: var(--tj-color-theme-primary); }
.fik-account-link, .fik-link-button { padding: 0; border: 0; background: none; color: var(--tj-color-theme-primary); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fik-inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.fik-inline-form input[type=text] { flex: 1 1 140px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--tj-color-border-1); border-radius: 8px; background: var(--tj-color-theme-bg); color: var(--tj-color-heading-primary); }
.fik-account-button { padding: 8px 18px; border: 1px solid var(--tj-color-theme-primary); border-radius: 999px; background: transparent; color: var(--tj-color-theme-primary); font: inherit; font-size: 15px; cursor: pointer; }
.fik-account-button.is-danger { border-color: #C2593E; color: #C2593E; }
.fik-account-heading { margin: 0 0 14px; font-size: 21px; font-weight: 300; color: var(--tj-color-heading-primary); }
.fik-account-apps { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.fik-account-apps li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 14px 16px; border: 1px solid var(--tj-color-border-1); border-radius: 12px; }
.fik-account-apps li > div { display: grid; gap: 2px; }
.fik-account-apps li > div span { font-size: 14px; color: var(--tj-color-text-body); }
.fik-account-stage { padding: 3px 12px; border-radius: 999px; border: 1px solid var(--tj-color-border-1); font-size: 13px; color: var(--tj-color-heading-primary); white-space: nowrap; }
.fik-account-stage.is-interview, .fik-account-stage.is-offer { border-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); }
.fik-account-note { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--tj-color-theme-primary); }
.fik-account-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--tj-color-border-1); color: var(--tj-color-text-body); }
.fik-account-foot details form { display: grid; gap: 10px; max-width: 420px; margin-top: 10px; }
.fik-account-foot details input { min-height: 40px; padding: 6px 14px; border: 1px solid var(--tj-color-border-1); border-radius: 8px; background: var(--tj-color-theme-bg); color: var(--tj-color-heading-primary); }
.fik-account-foot summary { cursor: pointer; }
.fik-apply-summary + .fik-apply-note { margin: -8px 0 24px; }

/* D-212: one theme button (dark by default) and the language at the top of the mobile menu */
a.fik-theme-toggle { text-decoration: none; }
.fik-theme-toggle .fik-icon-dark { display: block; }
.fik-theme-toggle .fik-icon-light { display: none; }
.tj-light-mode .fik-theme-toggle .fik-icon-dark { display: none; }
.tj-light-mode .fik-theme-toggle .fik-icon-light { display: block; }
.fik-theme-switch .fik-theme-option { width: auto; height: 34px; padding: 0 14px; border-radius: 999px; gap: 6px; }
.fik-theme-switch .fik-theme-option span { font-size: 14px; line-height: 1; }
.fik-drawer-lang { display: flex; align-items: center; gap: 8px; margin: 4px 0 18px; }
.fik-drawer-lang-label { margin-inline-end: auto; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--tj-color-text-body); }
.fik-drawer-lang a { min-height: 36px; padding: 6px 16px; border: 1px solid var(--tj-color-border-1); border-radius: 999px; color: var(--tj-color-heading-primary); font-size: 15px; line-height: 22px; text-decoration: none; }
.fik-drawer-lang a[aria-current="true"] { border-color: var(--tj-color-theme-primary); background: var(--tj-color-theme-primary); color: #101A1D; }
a.fik-theme-toggle { margin-inline-end: 6px; }

/* D-212 (owner, 2026-10-04): the template pulls the next section 312/240/210 px up under the video, because its testimonial
   section starts with that much room. While the reviews wait (D-198) the leadership section follows the video instead, and the
   film covered its heading and text. The pull now stays only when the reviews follow; a browser without :has() gets no pull. */
.tj-video-section { margin-bottom: 0; }
.tj-video-section:has(+ .tj-testimonial-section) { margin-bottom: -312px; }
@media (max-width: 1199px) { .tj-video-section:has(+ .tj-testimonial-section) { margin-bottom: -240px; } }
@media (max-width: 991px) { .tj-video-section:has(+ .tj-testimonial-section) { margin-bottom: -210px; } }

/* D-212 (owner, 2026-10-04): the About section on phones and tablets.
   The pillars are a row of their own now (after the About card where the columns stack, under both on large screens); the
   row's own 30 px gap plus 60 px keeps the 90 px they had under the section, and stacked they sit 30 px under the card. */
.fik-about-pillars { margin-top: 60px; }
@media (max-width: 991px) { .fik-about-pillars { margin-top: 0; } }
/* the seal the template hides under 768 px turns again, beside the Learn More button (under it when the row is too narrow) */
@media (max-width: 767px) {
  .tj-about-section .about-content-area { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .tj-about-section .about-content-area > * { flex: 0 0 100%; min-width: 0; }
  .tj-about-section .about-content-area > .tj-primary-btn { flex: 0 0 auto; }
  .tj-about-section .about-content-area > .award-circle { display: flex; position: relative; inset: auto; flex: 0 0 auto; margin: 25px 0 0 auto; }
  /* the founder's signature on the right of his card */
  .author-area .signature { margin-inline-start: auto; }
}
@media (max-width: 575px) {
  .tj-about-section .about-content-area > .award-circle { width: 104px; height: 104px; }
  .circle-text-wrap.award-circle .circle-text { width: 94px; height: 94px; }
  .circle-text-wrap.award-circle .circle-icon span { width: 54px; height: 54px; }
  .fik-seal-mark { height: 37px; }
}
/* the flags on phones: the open flag takes most of the row (the closed ones are strips with their code) and the gallery is
   tall enough for the country, the button and the lead's photo; at 360 px the open flag was 158 px wide, under the 160 px
   where the photo steps aside, and Open Bangladesh ran past its edge */
@media (max-width: 575px) {
  .fik-regions-gallery { aspect-ratio: auto; height: 290px; }
  .fik-region-panel.is-open { flex-grow: 4.2; }
  .fik-region-panel.is-open .fik-region-panel-body { padding: 14px 12px 14px; }
  .fik-region-panel-cta { padding: 6px 11px; font-size: 12px; gap: 5px; max-width: 100%; }
  .fik-region-panel-cta i { font-size: 10px; }
}
/* D-212 (owner, 2026-10-04): the footer's country list marks the country the visitor is in, in the brand colour */
.tj-copyright-area .copyright-menu ul li a[aria-current="true"] { color: var(--tj-color-theme-primary); }

/* D-212 (owner, 2026-10-04): the language line above the bar under 992 px. The page moves down by the line's height, so the
   bar keeps its 15 px inside the hero card and nothing in the hero changes; the line ends where the menu button ends. */
.fik-mobile-top { display: none; }
@media (max-width: 991px) {
  .fik-mobile-top { display: flex; justify-content: flex-end; align-items: center; height: 28px; padding-inline: 30px; }
  .fik-mobile-top .fik-lang { font-size: 13px; font-weight: 300; color: var(--tj-color-heading-primary); }
  .fik-mobile-top .fik-lang a { min-height: 28px; }
  .header-area.header-absolute.fik-fixed .fik-mobile-top { display: none; }
  #primary { padding-top: 28px; }
}

/* D-212 (owner, 2026-10-04): on phones the lead's photo in the open flag is twice as large (88% of the flag's width, was 44%),
   from the same top; the open flag grows with what it holds instead of a fixed 290 px, and the closed flags follow its height */
@media (max-width: 575px) {
  .fik-regions-gallery { height: auto; min-height: 290px; }
  .fik-region-panel-button { position: absolute; inset: 0; height: auto; }
  .fik-region-panel.is-open .fik-region-panel-body { position: relative; }
  .fik-region-panel-body { --fik-photo: 88cqi; }
}
/* D-212: under about 366 px the phone bar (inner width 100vw - 90 px) had less room than the 161 px logo, the 100 px of buttons
   and a 10 px gap: at 320 px the menu button stood 18 px outside the bar. The logo now takes only the room that is left
   (the lockup is 5.24 times as wide as it is high, plus its 4 px gap), never more than its 30 px */
@media (max-width: 575px) {
  .header-wrapper .site_logo .fik-lockup, .header-wrapper .site_logo .fik-lockup-mark, .header-wrapper .site_logo .fik-lockup-word { height: min(30px, calc((100vw - 204px) / 5.24)); }
}
/* D-212: the template draws the arrow's dark circle at the button's end (btn-icon::before) but keeps the arrow beside the
   text, so a button stretched wider than its words (Join The Talent Pool, Contact The Media Team on phones) showed the arrow
   beside an empty circle. The words now take the free room on both sides: still centred, the arrow ends in its circle. A
   button as wide as its content has no free room, so nothing moves there. */
.tj-primary-btn > .btn-text { margin-inline: auto; }