/*
 * Public-site theme tokens.
 *
 * The Blade web_v1 CSS remains the visual source of truth for structure and
 * artwork. This file supplies semantic UI tokens and the theme-scoped surface
 * and text adaptation around the legacy design.
 */
:root {
  color-scheme: dark;
  --page-bg: #141414;
  --surface-1: #1b1b1b;
  --surface-2: #2a2a2a;
  --surface-3: #25282a;
  --elevated-surface: #1b1b1b;
  --header-bg: #001f3c;
  --footer-bg: #000000;
  --text-primary: #eeeeee;
  --text-secondary: #b4b4b4;
  --text-muted: #a3a3a3;
  --border-subtle: rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .26);
  --accent: #ff3d00;
  --accent-hover: #ffffff;
  --accent-soft: rgba(255, 61, 0, .16);
  --focus-ring: rgba(255, 61, 0, .30);
  --theme-shadow: 0 18px 45px rgba(0, 0, 0, .22);
  --theme-shadow-lg: 0 28px 80px rgba(0, 0, 0, .30);
  --theme-page: var(--page-bg);
  --theme-section: var(--surface-1);
  --theme-section-alt: var(--surface-2);
  --theme-surface: var(--surface-3);
  --theme-surface-raised: var(--elevated-surface);
  --theme-card: var(--elevated-surface);
  --theme-header: var(--header-bg);
  --theme-footer: var(--footer-bg);
  --theme-text: var(--text-primary);
  --theme-muted: var(--text-secondary);
  --theme-border: var(--border-subtle);
  --theme-input: transparent;
  --theme-accent: var(--accent);
  --theme-accent-hover: var(--accent-hover);
  --theme-focus: var(--focus-ring);
  --theme-hover: rgba(255, 255, 255, .07);
  --theme-control-bg: rgba(20, 20, 20, .88);
  --theme-danger: #ffb8bd;
  --theme-danger-soft: #51201e;
  /* Kept for the login page API; deliberately neutral, not blue. */
  --blue-soft: rgba(120, 88, 64, .08);

  /* Names used by the original Blade stylesheet. */
  --white: #ffffff;
  --black: #000000;
  --text: #eeeeee;
  --primary-color: #ff3d00;
}

html[data-theme='light'] {
  color-scheme: light;
  --page-bg: #f6f1eb;
  --surface-1: #fffdfb;
  --surface-2: #eee7df;
  --surface-3: #ffffff;
  --elevated-surface: #ffffff;
  --header-bg: rgba(255, 252, 248, .96);
  --footer-bg: #141414;
  --text-primary: #201b18;
  --text-secondary: #625a54;
  --text-muted: #81766e;
  --border-subtle: rgba(53, 40, 30, .16);
  --border-strong: rgba(53, 40, 30, .28);
  --accent: #e9410a;
  --accent-hover: #c93405;
  --accent-soft: rgba(233, 65, 10, .12);
  --focus-ring: rgba(233, 65, 10, .24);
  --theme-shadow: 0 14px 36px rgba(71, 49, 32, .12);
  --theme-shadow-lg: 0 28px 80px rgba(71, 49, 32, .16);
  --theme-page: var(--page-bg);
  --theme-section: var(--surface-1);
  --theme-section-alt: var(--surface-2);
  --theme-surface: var(--surface-3);
  --theme-surface-raised: var(--elevated-surface);
  --theme-card: var(--elevated-surface);
  --theme-header: var(--header-bg);
  --theme-footer: var(--footer-bg);
  --theme-text: var(--text-primary);
  --theme-muted: var(--text-secondary);
  --theme-border: var(--border-subtle);
  --theme-input: var(--surface-3);
  --theme-accent: var(--accent);
  --theme-accent-hover: var(--accent-hover);
  --theme-focus: var(--focus-ring);
  --theme-hover: rgba(70, 45, 28, .06);
  --theme-control-bg: rgba(255, 255, 255, .92);
  --theme-danger: #a3243d;
  --theme-danger-soft: #fff0f2;
  --white: #ffffff;
  --black: #141414;
  --text: #625a54;
  --primary-color: #e9410a;
  --blue-soft: rgba(120, 88, 64, .06);
}

html { font-size: 16px; scroll-behavior: smooth; }
html, body { min-width: 320px; background: var(--page-bg); color: var(--text-primary); }
body,
button,
input,
textarea,
select { font-family: "Inter", sans-serif; }
body { background-color: var(--page-bg); }
img, svg, video { max-width: 100%; }
.container { width: 100%; }

/* Shared chrome: the dark header intentionally retains the original navy. */
.header, .header.navScrolled { background: var(--header-bg); border-bottom: 1px solid var(--border-subtle); }
.header .navbar-nav li .nav-link, .header .navbar-toggler { color: var(--text-primary); }
.header .navbar-nav li .nav-link { font-family: "Inter", sans-serif; font-size: 1rem; font-weight: 300; letter-spacing: normal; }
.header .navbar-nav li .nav-link.active, .header .navbar-nav li .nav-link:hover { color: var(--accent) !important; }
.header .navbar-toggler { border-color: var(--accent); }
.header .logo-light, .footer .logo-light { display: none; }
html[data-theme='light'] .header .logo-dark { display: none; }
html[data-theme='light'] .header .logo-light { display: inline-block; }
.offcanvas, .header .offcanvas-body .navbar-nav { background: var(--header-bg); }
.offcanvas .nav-link, .header .offcanvas-body .navbar-nav li .nav-link { color: var(--text-primary); }
html[data-theme='light'] .offcanvas, html[data-theme='light'] .header .offcanvas-body .navbar-nav { background: var(--surface-1); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.header_login { color: var(--black) !important; background: var(--white) !important; border: 1px solid var(--border-subtle); }
.header_login:hover { color: var(--white) !important; background: var(--accent) !important; }

/* Theme control only. It does not recolour page artwork or photography. */
.control { background: var(--theme-control-bg); }

/* Warm, neutral light-theme surfaces. Background images remain intact because
   these are background-color declarations, except for CSS-only gradients. */
html[data-theme='light'] .comman_py:not(.dark_bg):not(.gradient_bg),
html[data-theme='light'] .new_approach_area:not(.dark_bg):not(.gradient_bg),
html[data-theme='light'] .numbers_area,
html[data-theme='light'] .the_standard_area,
html[data-theme='light'] .get_in_touch_area,
html[data-theme='light'] .faq_area,
html[data-theme='light'] .blog_area,
html[data-theme='light'] .contact_area,
html[data-theme='light'] .privacy_area { background-color: var(--surface-1); }
/* Story sections use the same light-theme surface system as the rest of the
   public site. The hero remains navy below; only these inherited dark story
   canvases are normalized here. */
html[data-theme='light'] .dark_bg {
  background: linear-gradient(135deg, #fffaf6 0%, #f3ebe3 100%) !important;
  background-image: none !important;
  color: var(--text-primary);
}
html[data-theme='light'] .gradient_bg {
  background: linear-gradient(135deg, #f4eee8 0%, #eee5dc 100%) !important;
  background-image: none !important;
  color: var(--text-primary);
}
html[data-theme='light'] .our_mission_area {
  background: linear-gradient(135deg, #fffaf6 0%, #f1e8df 100%) !important;
  background-image: none !important;
  color: var(--text-primary);
}
html[data-theme='light'] .our_mission_area.simplified_area::after,
html[data-theme='light'] .our_mission_area.What_inside_area::after {
  background: radial-gradient(circle, rgba(233, 65, 10, .08) 0%, rgba(233, 65, 10, 0) 72%) !important;
}
html[data-theme='light'] .home_banner_section { background-color: #08172c; }
html[data-theme='light'] .company_slider_area { background-color: var(--surface-2); border-block-color: var(--border-subtle); }
html[data-theme='light'] .company_slider_area .hls-box p { color: var(--text-primary) !important; }

/* Keep the Blade hero asset and desktop placement exactly intact. On smaller
   screens, preserve its 1920:895 ratio instead of allowing a two-value
   background-size rule to vertically stretch the artwork. */
.home_banner_section {
  background-image: url('/assets/web_v1/assets/img/home_banner.jpg');
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* text-white is meaningful on the original dark theme, but these story
   sections are light surfaces in Light mode. */
html[data-theme='light'] .main_area .dark_bg .text-white,
html[data-theme='light'] .main_area .gradient_bg .text-white,
html[data-theme='light'] .main_area .our_mission_area .text-white,
html[data-theme='light'] .main_area > section:not(.breadcrumb_section):not(.home_banner_section) .text-white {
  color: var(--text-primary) !important;
}
html[data-theme='light'] .dark_bg .section_heading h2 span,
html[data-theme='light'] .gradient_bg .section_heading h2 span,
html[data-theme='light'] .our_mission_area .section_heading h2 span {
  color: var(--accent) !important;
}
html[data-theme='light'] .home_banner_section .home_banner_heading h2 span {
  color: #fff !important;
}
html[data-theme='light'] .dark_bg .section_heading p,
html[data-theme='light'] .gradient_bg .section_heading p,
html[data-theme='light'] .our_mission_area p {
  color: var(--text-secondary) !important;
}

.new_approach_box,
.new_card,
.blog_card_box,
.di_box,
.walked_shoes_box,
.faq_main .accordion-item {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.new_approach_box:hover,
.new_card:hover,
.blog_card_box:hover,
.di_box:hover,
.walked_shoes_box:hover,
.faq_main .accordion-item:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--theme-shadow-lg);
}

.blog_card_box:hover img,
.di_box:hover img,
.new_approach_box:hover img {
  transform: scale(1.03);
}

.spring_img,
.cctv_gif {
  will-change: transform;
  animation: ai-decorative-drift 8s ease-in-out infinite;
}

@keyframes ai-decorative-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

html[data-theme='light'] .new_approach_box,
html[data-theme='light'] .new_card,
html[data-theme='light'] .di_box,
html[data-theme='light'] .faq_main .accordion-item,
html[data-theme='light'] .blog_detail_right,
html[data-theme='light'] .contact_form,
html[data-theme='light'] .blog_card_box,
html[data-theme='light'] .get_in_touch_main,
html[data-theme='light'] .testimonials_box { background-color: var(--surface-3); border-color: var(--border-subtle); box-shadow: var(--theme-shadow); }
html[data-theme='light'] .new_approach_bottom { background-color: var(--surface-2); }
html[data-theme='light'] .simplified_box,
html[data-theme='light'] .walked_shoes_box,
html[data-theme='light'] .live_monitoring_area .walked_shoes_box { background: linear-gradient(92deg, #fffdfb 0%, #f2ebe4 100%); border-color: var(--border-subtle); }
html[data-theme='light'] .simplified_box_dot { background: url('../assets/web_v1/assets/img/dot_bg.svg'), linear-gradient(92deg, #fffdfb 0%, #f2ebe4 100%); border-color: var(--border-subtle); }
html[data-theme='light'] .readytoscale_inner_area { background: url('../assets/web_v1/assets/img/dot_bg.svg'), linear-gradient(92deg, #f1e9e1 0%, #fffdfb 100%); border-color: var(--border-subtle); }

html[data-theme='light'] .section_heading h2 span,
html[data-theme='light'] .new_approach_top h2,
html[data-theme='light'] .new_card h2,
html[data-theme='light'] .blog_card_box h2,
html[data-theme='light'] .faq_main .accordion-button,
html[data-theme='light'] .privacy_main_items h2,
html[data-theme='light'] .the_standard_ul li { color: var(--text-primary); }

/* Home and the other legacy marketing sections use a few older selectors
   whose dark-theme literals otherwise survive on light surfaces. Keep the
   hierarchy scoped to those semantic components instead of recolouring every
   element globally. */
html[data-theme='light'] .dark_bg .section_heading h2,
html[data-theme='light'] .gradient_bg .section_heading h2,
html[data-theme='light'] .our_mission_area .section_heading h2,
html[data-theme='light'] .clear_solutions_box h2,
html[data-theme='light'] .clear_solutions_box h3,
html[data-theme='light'] .the_standard_box h2,
html[data-theme='light'] .the_standard_box h3 {
  color: var(--text-primary) !important;
}
html[data-theme='light'] .dark_bg .section_heading h2 span,
html[data-theme='light'] .gradient_bg .section_heading h2 span,
html[data-theme='light'] .our_mission_area .section_heading h2 span,
html[data-theme='light'] .clear_solutions_box h3 span,
html[data-theme='light'] .the_standard_box h3 span {
  color: var(--accent) !important;
}
html[data-theme='light'] .the_standard_box {
  background: var(--surface-3) !important;
  background-image: none !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--theme-shadow);
}
html[data-theme='light'] .the_standard_ul li {
  color: var(--text-secondary) !important;
  font-weight: 400;
}
html[data-theme='light'] .numbers_box h2 { color: var(--text-primary) !important; }
html[data-theme='light'] .numbers_box p,
html[data-theme='light'] .testimonials_box p { color: var(--text-secondary) !important; }
html[data-theme='light'] .numbers_box_bottom { border-bottom-color: var(--border-subtle); }
html[data-theme='light'] .simplified_box_dot {
  position: relative;
  overflow: hidden;
  background: linear-gradient(92deg, #fffdfb 0%, #f2ebe4 100%) !important;
  background-image: none !important;
  border-color: var(--border-subtle) !important;
}
html[data-theme='light'] .simplified_box_dot::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url('../assets/web_v1/assets/img/dot_bg.svg') right bottom / min(42%, 250px) auto no-repeat;
  content: '';
  opacity: .10;
  pointer-events: none;
}
html[data-theme='light'] .simplified_box_dot > * {
  position: relative;
  z-index: 1;
}
html[data-theme='light'] .readytoscale_inner_area {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(92deg, #f1e9e1 0%, #fffdfb 100%) !important;
  background-image: none !important;
}
html[data-theme='light'] .readytoscale_inner_area::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url('../assets/web_v1/assets/img/dot_bg.svg') right bottom / min(46%, 420px) auto no-repeat;
  content: '';
  opacity: .09;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 82%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 82%);
}
html[data-theme='light'] .readytoscale_inner_area > * {
  position: relative;
  z-index: 1;
}
html[data-theme='light'] .simplified_area .simplified_box_center::before,
html[data-theme='light'] .simplified_area .simplified_box_center::after,
html[data-theme='light'] .simplified_area .simplified_box_img::before,
html[data-theme='light'] .simplified_area .simplified_box_img::after {
  border-bottom-color: rgba(82, 59, 42, .22);
}
/* The supplied center geometry is a separate dark PNG beneath the camera.
   Translate only that geometric layer for Light mode; the camera image keeps
   its original pixels, animation, size, and position. */
html[data-theme='light'] .simplified_area .simplified_box_img > img:first-child {
  filter: invert(89%) sepia(10%) saturate(300%) hue-rotate(340deg) brightness(104%) contrast(91%) drop-shadow(0 12px 24px rgba(71, 49, 32, .12));
}
html[data-theme='light'] .faq_main .accordion .accordion-item .accordion-button {
  color: var(--text-primary) !important;
}
html[data-theme='light'] .faq_main .accordion .accordion-item .accordion-button::after {
  background: url('/assets/web_v1/assets/img/icon/down_arrow_w.svg') center / 18px no-repeat, var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Public breadcrumb heroes keep their navy banner in Light mode. Their
   leading span is the high-contrast base copy and the unwrapped remainder is
   the orange brand accent. */
html[data-theme='light'] .breadcrumb_section .home_banner_heading h2 {
  color: var(--accent) !important;
}
html[data-theme='light'] .breadcrumb_section .home_banner_heading h2 span {
  color: #fff !important;
}
html[data-theme='light'] .section_heading p,
html[data-theme='light'] .new_approach_top p,
html[data-theme='light'] .blog-content,
html[data-theme='light'] .faq_main p,
html[data-theme='light'] .privacy_main_items p,
html[data-theme='light'] .list-disc,
html[data-theme='light'] .text_light { color: var(--text-secondary) !important; }
html[data-theme='light'] .form-control,
html[data-theme='light'] .form-select,
html[data-theme='light'] textarea,
html[data-theme='light'] .faq_main .accordion-button,
html[data-theme='light'] .faq_main .accordion-body { background-color: var(--surface-3); color: var(--text-primary); border-color: var(--border-subtle); }
html[data-theme='light'] .form-control::placeholder, html[data-theme='light'] textarea::placeholder { color: var(--text-muted); opacity: 1; }
html[data-theme='light'] .footer_social_list .clil_icon { background-color: #2d2019; border-color: rgba(255, 255, 255, .10); }

/* Never apply filters, blend modes, opacity changes, or overlays to images. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-aos] { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}

.ai-loader-screen { min-height: 100svh; display: grid; place-items: center; background: var(--page-bg); }
.ai-loader { position: relative; width: 140px; height: 84px; display: block; }
.ai-loader::before, .ai-loader::after { content: ''; position: absolute; top: 50%; width: 30px; height: 30px; transform: translateY(-50%); background: center/contain no-repeat; }
.ai-loader::before { left: 0; background-image: url('/assets/web_v1/assets/img/wl_arrow.png'); }
.ai-loader::after { right: 0; background-image: url('/assets/web_v1/assets/img/wr_arrow.png'); }
.ai-loader-frame, .ai-loader-lens { position: absolute; top: 50%; left: 50%; object-fit: contain; transform: translate(-50%, -50%); }
.ai-loader-frame { width: 70px; height: 70px; }
.ai-loader-lens { z-index: 1; width: 39px; height: 39px; animation: ai-lens-rotate 5s linear infinite; }
@keyframes ai-lens-rotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* AOS is progressive enhancement. Before it is ready, or if it fails, all
   content remains in the document flow and fully readable. */
html:not(.aos-enabled) [data-aos],
html.aos-fallback [data-aos] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Restore readable content where the original Blade CSS uses light text
   literals on cards that become warm/white surfaces in Light mode. */
html[data-theme='light'] .privacy_main p,
html[data-theme='light'] .privacy_main_items p,
html[data-theme='light'] .new_card p,
html[data-theme='light'] .blog_card_box p,
html[data-theme='light'] .blog_detail_right_list_item_box p,
html[data-theme='light'] .faq_main .accordion-body,
html[data-theme='light'] .clear_solutions_new_box p {
  color: var(--text-secondary) !important;
}

html[data-theme='light'] .clear_solutions_box h3,
html[data-theme='light'] .numbers_box h2,
html[data-theme='light'] .testimonials_bottom h2,
html[data-theme='light'] .blog_detail_right > h2 span,
html[data-theme='light'] .blog_detail_right_list_item_box h2,
html[data-theme='light'] .footer_main_box h2 {
  color: var(--text-primary) !important;
}

html[data-theme='light'] .blog_detail_right_list_item_box,
html[data-theme='light'] .clear_solutions_new_box {
  background-color: var(--surface-3);
  border-color: var(--border-subtle);
}

/* The original footer is intentionally dark in both themes, so its copy and
   the dark logo remain high contrast in Light mode. */
html[data-theme='light'] .footer_main_box h2,
html[data-theme='light'] .footer_main_desc p,
html[data-theme='light'] .footer_list li a,
html[data-theme='light'] .footer_bottom_inner p {
  color: #eeeeee !important;
}

@media (max-width: 1199px) {
  .header .offcanvas-top { min-height: 100dvh; }
  .header .offcanvas-body { overflow-y: auto; }
  .header .navbar-dasktop-brand { min-width: 0; flex: 1 1 auto; }
  .header .acc-login-box { min-width: auto; }
  .header .navbar-dasktop-brand img { width: min(250px, 42vw); }
}

@media (max-width: 575px) {
  .home_banner_section { min-height: clamp(420px, 88vw, 620px); }
  .comman_py { padding-block: clamp(52px, 12vw, 84px); }
  .header .navbar-dasktop-brand img { width: min(210px, 42vw); }
}

@media (max-width: 991px) {
  .home_banner_section { background-size: contain; }
}

/* The source design uses an orange underline glow for the active nav item.
   Keep it restrained so the current section is obvious without becoming a
   second navigation system. */
.header .navbar-nav li .nav-link::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: var(--accent);
  content: '';
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .2s ease, transform .2s ease;
}
.header .navbar-nav li .nav-link.active::after,
.header .navbar-nav li .nav-link:hover::after { opacity: .9; transform: scaleX(1); }

/* Keep body copy readable after legacy page styles have been loaded. */
html[data-theme='light'] main p { color: var(--text-secondary); }
html[data-theme='light'] .home_banner_section .home_banner_heading p { color: #f1e8df; }

@media (prefers-reduced-motion: reduce) {
  .header .navbar-nav li .nav-link::after { transition: none; }
  .ai-loader-lens { animation: none; }
}

/* ==========================================================================
   Public site — premium interaction layer.

   Additive only. The Blade web_v1 CSS stays the visual source of truth for
   structure, artwork and typography; this section completes interaction
   states (hover / active / focus / disabled), cross-fades the theme swap, and
   adds a small amount of restrained motion. No layout box, colour token or
   page artwork is redefined here, and every rule stands down under
   prefers-reduced-motion (handled by the existing block above).
   ========================================================================== */

/* --- Theme transitions ---------------------------------------------------
   Chrome and surfaces only. Photography, illustration and video are excluded
   so no asset is ever tinted mid-swap. */
body,
.header,
.footer,
.offcanvas,
.new_approach_box,
.new_card,
.blog_card_box,
.di_box,
.walked_shoes_box,
.the_standard_box,
.testimonials_box,
.contact_form,
.get_in_touch_main,
.faq_main .accordion-item,
.form-control,
.form-select,
textarea {
  transition:
    background-color 240ms ease,
    border-color 240ms ease,
    color 240ms ease,
    box-shadow 240ms ease;
}

img,
video,
picture,
.home_banner_section,
.breadcrumb_section {
  transition: none;
}

/* Cards already lift on hover (see above). Restate only the timing so the
   colour cross-fade and the lift share one curve. */
.new_approach_box,
.new_card,
.blog_card_box,
.di_box,
.walked_shoes_box,
.faq_main .accordion-item {
  transition:
    transform .35s cubic-bezier(.22, .61, .36, 1),
    box-shadow .35s ease,
    border-color .35s ease,
    background-color 240ms ease,
    color 240ms ease;
}

.blog_card_box img,
.di_box img,
.new_approach_box img {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* --- Buttons -------------------------------------------------------------
   The brand orange, geometry and hover colours are unchanged. These rules add
   the press, focus and disabled feedback the source stylesheet omits. */
.primary-btn,
.primary_btn,
.header_login,
.mob_header_btn {
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .14s ease;
}

.primary-btn:hover,
.primary_btn:hover {
  box-shadow: 0 10px 24px rgba(255, 61, 0, .22);
}

.primary-btn:active,
.primary_btn:active,
.header_login:active,
.mob_header_btn:active {
  transform: translateY(1px) scale(.99);
  box-shadow: 0 3px 10px rgba(255, 61, 0, .18);
}

.primary-btn:disabled,
.primary_btn:disabled,
.primary-btn[aria-disabled='true'] {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.primary-btn:disabled:active,
.primary_btn:disabled:active {
  transform: none;
}

/* The CTA arrow that several buttons carry nudges forward on hover. */
.primary-btn > span[aria-hidden='true'],
.primary_btn > span[aria-hidden='true'] {
  display: inline-block;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.primary-btn:hover > span[aria-hidden='true'],
.primary_btn:hover > span[aria-hidden='true'] {
  transform: translateX(3px);
}

/* --- Navigation ----------------------------------------------------------
   The active-item underline is defined above. This only adds the press state
   and keeps the header's login pill consistent with the other buttons. */
.header .navbar-nav li .nav-link {
  position: relative;
  transition: color .22s ease;
}

.header .navbar-nav li .nav-link:active {
  transform: translateY(1px);
}

.header .navbar-toggler {
  transition: border-color .22s ease, background-color .22s ease, transform .14s ease;
}

.header .navbar-toggler:active {
  transform: scale(.96);
}

/* --- Links and footer ---------------------------------------------------- */
.footer_list li a,
.footer_bottom_inner a {
  transition: color .22s ease, opacity .22s ease;
}

.footer_list li a:hover {
  color: var(--accent) !important;
}

.footer_social_list .clil_icon {
  transition: background-color .25s ease, border-color .25s ease, transform .2s ease;
}

.footer_social_list a:hover .clil_icon {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* --- FAQ accordion -------------------------------------------------------- */
.faq_main .accordion-button::after {
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), background-color .25s ease;
}

/* --- Form controls -------------------------------------------------------- */
.form-control,
.form-select,
textarea,
select {
  transition:
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus),
textarea:hover:not(:focus) {
  border-color: var(--border-strong);
}

/* --- Reduced motion -------------------------------------------------------
   The global reduce block above already neutralises durations. These two
   entries make sure the decorative sweeps stop outright rather than snapping. */
@media (prefers-reduced-motion: reduce) {
  .primary-btn > span[aria-hidden='true'],
  .primary_btn > span[aria-hidden='true'],
  .footer_social_list .clil_icon,
  .blog_card_box img,
  .di_box img,
  .new_approach_box img {
    transition: none !important;
    transform: none !important;
  }
}