/* SLIVKI Production - site-specific styles (loaded after style.css)
   Palette: "Amber" on a dark base. Font: Inter (supports Latin + Cyrillic). */

/* Inter (self-hosted, variable weight 100-900). SIL Open Font License 1.1. Subsets: latin, latin-ext, cyrillic, cyrillic-ext */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-ext-wght-normal.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.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; }
/* ---------- Themes: dark (default) and light. Everything below uses these variables. ---------- */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --accent: #f5a524;
  --accent-2: #e8590c;
  --accent-rgb: 245, 165, 36;
  --ink-rgb: 255, 255, 255;
  --bg: #0c0c0e;
  --bg2: #141416;
  --card: #1a1a1e;
  --line: rgba(255, 255, 255, .09);
  --text: #f1efe9;
  --muted: #a8a49a;
  --head: #ffffff;
  --footer-bg: #07080c;
  --menu-border: rgba(255, 255, 255, .16);
  --font: "Inter", "Helvetica", "Arial", sans-serif;
}
html[data-theme="light"] {
  color-scheme: light;
  --accent: #f5a524;
  --accent-2: #e8940d;
  --accent-rgb: 245, 165, 36;
  --ink-rgb: 0, 0, 0;
  --bg: #ffffff;
  --bg2: #f4f5f7;
  --card: #ffffff;
  --line: rgba(0, 0, 0, .1);
  --text: #1e2022;
  --muted: #555b66;
  --head: #14161a;
  --footer-bg: #eceef2;
  --menu-border: rgba(0, 0, 0, .14);
}

/* Typography */
body, body p, body li, body span { font-family: var(--font); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
#mainMenu nav > ul > li > a, .btn, .widget-title { font-family: var(--font) !important; }

/* Base colours (both themes, via variables) */
html[data-theme] body { background: var(--bg); color: var(--text); }
html[data-theme] body section { background-color: var(--bg) !important; color: var(--text); }
html[data-theme] body section.background-grey { background-color: var(--bg2) !important; }
html[data-theme] body h1, html[data-theme] body h2, html[data-theme] body h3, html[data-theme] body h4, html[data-theme] body h5, html[data-theme] body h6 { color: var(--head); }
html[data-theme] body p, html[data-theme] body .lead { color: var(--muted); }
html[data-theme] body .heading-text h2 { letter-spacing: -.01em; }
html[data-theme] body .heading-text h2::after, html[data-theme] body .heading-section h2::after { background: var(--accent); }
html[data-theme] body .icon-box.border { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
html[data-theme] body .icon-box .icon a { color: var(--accent); }

/* Footer */
html[data-theme] body #footer, html[data-theme] body #footer .footer-content, html[data-theme] body .copyright-content { background: var(--footer-bg); color: var(--muted); }
html[data-theme] body #footer .widget-title { color: var(--head); }
html[data-theme] body #footer a { color: var(--muted); }
html[data-theme] body #footer a:hover { color: var(--accent); }
html[data-theme] body #footer a.btn, html[data-theme] body #footer a.btn:hover { color: #fff; }
html[data-theme] body .copyright-content { border-top: 1px solid var(--line); }

/* Buttons */
.btn.btn-primary { border-radius: 10px; font-weight: 600; color: #fff; }

/* Logo: wordmark with small caption */
#logo a { display: inline-flex; flex-direction: column; line-height: 1; text-decoration: none; }
#logo .logo-default, #logo .logo-dark { font-weight: 800; letter-spacing: 0.04em; }
#logo small { display: block; margin-top: 4px; font-size: 0.34em; font-weight: 500; letter-spacing: 0.42em; color: var(--accent); }

/* Hero: single fullscreen section, optional background video on top of a dark gradient */

/* ---- Template blue (#2250fc) re-pointed to the accent (auto-generated from style.css) ---- */
.widget-list-link:hover { color: var(--accent); }
.active > .widget-list-link { color: var(--accent); }
.grid-filter li:hover a, .grid-filter li:hover a:hover, .grid-filter li:hover a:active, .grid-filter li:hover a:focus, .grid-filter li.active a, .grid-filter li.active a:hover, .grid-filter li.active a:active, .grid-filter li.active a:focus { background-color: var(--accent); color: #fff; }
.grid-filter.gf-outline li:hover a, .grid-filter.gf-outline li.active a { border-color: var(--accent); color: var(--accent); background-color: transparent; }
.grid-filter.gf-lines li:hover a, .grid-filter.gf-lines li.active a { color: var(--accent); }
.grid-filter.gf-lines li:hover a:after, .grid-filter.gf-lines li.active a:after { width: 100%; left: 0%; background-color: var(--accent); }
.grid-filter.gf-classic li:hover a, .grid-filter.gf-classic li.active a { background-color: var(--accent); color: #fff; }
.grid-filter.gf-default li:hover a, .grid-filter.gf-default li.active a { background-color: transparent; color: var(--accent); }
#topbar.topbar-colored, #topbar.topbar-colored.dark { background-color: var(--accent); }
#mainMenu nav > ul > li.hover-active > a, #mainMenu nav > ul > li.hover-active > span, #mainMenu nav > ul > li.current > a, #mainMenu nav > ul > li.current > span, #mainMenu nav > ul > li:hover > a, #mainMenu nav > ul > li:hover > span, #mainMenu nav > ul > li:focus > a, #mainMenu nav > ul > li:focus > span { color: var(--accent); }
#mainMenu nav > ul > li .dropdown-menu > li > a:focus, #mainMenu nav > ul > li .dropdown-menu > li > a:hover, #mainMenu nav > ul > li .dropdown-menu > li > a:active, #mainMenu nav > ul > li .dropdown-menu > li > span:focus, #mainMenu nav > ul > li .dropdown-menu > li > span:hover, #mainMenu nav > ul > li .dropdown-menu > li > span:active, #mainMenu nav > ul > li .dropdown-menu > li [class*="col-"] > ul > li > a:focus, #mainMenu nav > ul > li .dropdown-menu > li [class*="col-"] > ul > li > a:hover, #mainMenu nav > ul > li .dropdown-menu > li [class*="col-"] > ul > li > a:active { background-color: transparent; color: var(--accent); cursor: pointer; }
#mainMenu nav > ul > li .dropdown-menu > li.current > a, #mainMenu nav > ul > li .dropdown-menu > li.current > span, #mainMenu nav > ul > li .dropdown-menu > li:hover > a, #mainMenu nav > ul > li .dropdown-menu > li:hover > span, #mainMenu nav > ul > li .dropdown-menu > li:focus > a, #mainMenu nav > ul > li .dropdown-menu > li:focus > span, #mainMenu nav > ul > li .dropdown-menu > li:active > a, #mainMenu nav > ul > li .dropdown-menu > li:active > span, #mainMenu nav > ul > li .dropdown-menu > li.hover-active > a, #mainMenu nav > ul > li .dropdown-menu > li.hover-active > span { color: var(--accent); }
#mainMenu.menu-rounded nav > ul > li.current > a, #mainMenu.menu-rounded nav > ul > li:hover > a, #mainMenu.menu-rounded nav > ul > li:focus > a { background-color: var(--accent); color: #fff; }
#mainMenu.menu-outline nav > ul > li.current > a, #mainMenu.menu-outline nav > ul > li:hover > a, #mainMenu.menu-outline nav > ul > li:focus > a { color: var(--accent); border-color: var(--accent); background-color: transparent; }
#mainMenu.menu-lines nav > ul > li.current > a, #mainMenu.menu-lines nav > ul > li:hover > a, #mainMenu.menu-lines nav > ul > li:focus > a { color: var(--accent); }
#mainMenu.menu-lines nav > ul > li.current > a:after, #mainMenu.menu-lines nav > ul > li:hover > a:after, #mainMenu.menu-lines nav > ul > li:focus > a:after { width: 100%; left: 0%; background-color: var(--accent); }
#mainMenu.menu-hover-background nav > ul > li.current, #mainMenu.menu-hover-background nav > ul > li:hover, #mainMenu.menu-hover-background nav > ul > li:focus { background-color: var(--accent); }
#dotsMenu ul li:hover { background-color: var(--accent); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
#dotsMenu ul li.current { background-color: var(--accent); }
#dotsMenu ul li a:hover:before { background-color: var(--accent); }
.dark:not(.submenu-light) #mainMenu.menu-rounded nav > ul > li.current > a, .dark:not(.submenu-light) #mainMenu.menu-rounded nav > ul > li:hover > a, .dark:not(.submenu-light) #mainMenu.menu-rounded nav > ul > li:focus > a, #mainMenu.dark.menu-rounded nav > ul > li.current > a, #mainMenu.dark.menu-rounded nav > ul > li:hover > a, #mainMenu.dark.menu-rounded nav > ul > li:focus > a { background-color: var(--accent); color: #fff; }
.dark:not(.submenu-light) #mainMenu.menu-outline nav > ul > li.current > a, .dark:not(.submenu-light) #mainMenu.menu-outline nav > ul > li:hover > a, .dark:not(.submenu-light) #mainMenu.menu-outline nav > ul > li:focus > a, #mainMenu.dark.menu-outline nav > ul > li.current > a, #mainMenu.dark.menu-outline nav > ul > li:hover > a, #mainMenu.dark.menu-outline nav > ul > li:focus > a { color: var(--accent); border-color: var(--accent); }
.dark:not(.submenu-light) #mainMenu.menu-lines nav > ul > li.current > a, .dark:not(.submenu-light) #mainMenu.menu-lines nav > ul > li:hover > a, .dark:not(.submenu-light) #mainMenu.menu-lines nav > ul > li:focus > a, #mainMenu.dark.menu-lines nav > ul > li.current > a, #mainMenu.dark.menu-lines nav > ul > li:hover > a, #mainMenu.dark.menu-lines nav > ul > li:focus > a { color: var(--accent); }
.dark:not(.submenu-light) #mainMenu.menu-lines nav > ul > li.current > a:after, .dark:not(.submenu-light) #mainMenu.menu-lines nav > ul > li:hover > a:after, .dark:not(.submenu-light) #mainMenu.menu-lines nav > ul > li:focus > a:after, #mainMenu.dark.menu-lines nav > ul > li.current > a:after, #mainMenu.dark.menu-lines nav > ul > li:hover > a:after, #mainMenu.dark.menu-lines nav > ul > li:focus > a:after { background-color: var(--accent); }
.dark:not(.submenu-light) #mainMenu.menu-hover-background nav > ul > li.current, .dark:not(.submenu-light) #mainMenu.menu-hover-background nav > ul > li:hover, .dark:not(.submenu-light) #mainMenu.menu-hover-background nav > ul > li:focus, #mainMenu.dark.menu-hover-background nav > ul > li.current, #mainMenu.dark.menu-hover-background nav > ul > li:hover, #mainMenu.dark.menu-hover-background nav > ul > li:focus { background-color: var(--accent); }
.header-extras #shopping-cart > a .shopping-cart-items { position: absolute; z-index: 1; background: var(--accent); border-radius: 50%; color: #fff; font-size: 9px; font-weight: 600; height: 13px; line-height: 10px; padding: 2px 4px; right: -6px; top: -6px; width: 13px; }
#search .btn-search-close { font-size: 2em; position: absolute; top: 20px; right: 30px; display: none; padding: 12px; line-height: 12px; background-color: var(--accent); border: 0; cursor: pointer; border-radius: 0.42rem; color: #fff; opacity: 0; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; }
.page-menu nav > ul > li:hover > a, .page-menu nav > ul > li.active > a { color: var(--accent); }
.page-menu.menu-rounded nav > ul > li:hover > a, .page-menu.menu-rounded nav > ul > li.active > a { border-color: transparent; color: #fff; background-color: var(--accent); }
.page-menu.menu-outline nav > ul > li:hover > a, .page-menu.menu-outline nav > ul > li.active > a { border-color: var(--accent); color: var(--accent); background-color: transparent; }
.page-menu.menu-lines nav > ul > li:hover > a, .page-menu.menu-lines nav > ul > li.active > a { color: var(--accent); }
.page-menu.menu-lines nav > ul > li:hover > a:after, .page-menu.menu-lines nav > ul > li.active > a:after { width: 100%; left: 0%; background-color: var(--accent); }
.page-menu.menu-solid nav > ul > li:hover > a, .page-menu.menu-solid nav > ul > li.active > a { background-color: var(--accent); color: #fff; }
  .page-menu.menu-rounded nav > ul > li:hover > a, .page-menu.menu-rounded nav > ul > li.active > a, .page-menu.menu-outline nav > ul > li:hover > a, .page-menu.menu-outline nav > ul > li.active > a, .page-menu.menu-lines nav > ul > li:hover > a, .page-menu.menu-lines nav > ul > li.active > a, .page-menu.menu-solid nav > ul > li:hover > a, .page-menu.menu-solid nav > ul > li.active > a, .page-menu.menu-light nav > ul > li:hover > a, .page-menu.menu-light nav > ul > li.active > a, .page-menu.menu-creative nav > ul > li:hover > a, .page-menu.menu-creative nav > ul > li.active > a, .page-menu.inverted nav > ul > li:hover > a, .page-menu.inverted nav > ul > li.active > a { color: var(--accent); background-color: initial; border: 0; }
a:not(.btn):not(.badge):hover, a:not(.btn):not(.badge):focus, a:not(.btn):not(.badge):active { text-decoration: none; outline: none; color: var(--accent); }
.portfolio-item .portfolio-description a:hover i, .portfolio-item .grid-description a:hover i, .portfolio-item .portfolio-links a:hover i, .grid-item .portfolio-description a:hover i, .grid-item .grid-description a:hover i, .grid-item .portfolio-links a:hover i { background-color: var(--accent); color: #fff; border: 1px solid var(--accent); }
.post-item .post-image .post-meta-category, .post-item .post-slider .post-meta-category, .post-item .post-video .post-meta-category, .post-item .post-audio .post-meta-category, .post-item .post-quote-img .post-meta-category { background-color: var(--accent); color: #fff; font-size: 13px; padding: 2px 16px; border-radius: 50px; position: absolute; right: 10px; top: 11px; z-index: 3; margin-right: 0; }
.post-item .post-quote-img .post-meta-category { background-color: #fff; color: var(--accent); }
.post-item .post-quote-img .post-meta-category a { color: var(--accent); }
.post-item.quote .post-item-wrap { background-color: var(--accent); border-radius: 4px; border-width: 0; }
.comments .comment_number span { color: var(--accent); }
.comments .comment .text .comment-reply-link { color: var(--accent); font-size: 9px; text-transform: uppercase; font-weight: 700; padding: 0 0 0 5px; opacity: .7; }
.respond-comment span { color: var(--accent); }
.forum thead tr > th { background-color: var(--accent); color: #fff; border-bottom: 0; }
.tags a:hover, .tags a:focus, .tags a:active, .tags a.active { background-color: var(--accent); border-color: var(--accent); color: #fff !important; }
.item-link:hover { color: var(--accent); }
.background-colored { background-color: var(--accent); }
#scrollTop:after, #scrollTop:before { display: block; content: ' '; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: var(--accent); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); border-radius: 100px; }
.fc-event-primary.fc-event { background-color: var(--accent); border-color: var(--accent); color: #fff; }
.fc-event-primary .fc-event-dot { background-color: var(--accent); }
.fc-event-secondary .fc-event-dot { background-color: var(--accent); }
.icon-set-container .row > [class^="col-"]:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); background-color: var(--accent); color: #fff; box-shadow: 0 6px 12px rgba(140, 152, 164, 0.075); }
.icon-set-container .row > [class^="col-"]:hover .icon-holder { background-color: #fff; color: var(--accent); }
.background-theme { background-color: var(--accent) !important; }
.background-primary { background-color: var(--accent) !important; }
.text-theme { color: var(--accent) !important; }
.datepicker tbody tr > td.day.today.active, .datepicker tbody tr > td.day.active, .datepicker tbody tr > td.day.selected { background: var(--accent) !important; color: #fff; }
.datepicker tbody tr > td.day.today.active:hover, .datepicker tbody tr > td.day.active:hover, .datepicker tbody tr > td.day.selected:hover { background: var(--accent); color: #fff; }
.datepicker tbody tr > td.day.range.today { background: var(--accent); opacity: .4; }
.datepicker tbody tr > td span.month.active { background: var(--accent); color: #fff; }
.datepicker tbody tr > td span.month.active:hover { background: var(--accent); color: #fff; }
.datetimepicker tbody tr > td.day.today, .datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active:hover.active, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled:hover.active, .datetimepicker table tr td span.active:active, .datetimepicker table tr td span.active:hover:active, .datetimepicker table tr td span.active.disabled:active, .datetimepicker table tr td span.active.disabled:hover:active, .datetimepicker table tr td span.active.active, .datetimepicker table tr td span.active:hover.active, .datetimepicker table tr td span.active.disabled.active, .datetimepicker table tr td span.active.disabled:hover.active { background: var(--accent) !important; color: #fff; }
.datetimepicker table tr > td.today:hover, .datetimepicker table tr > td.today:hover:hover, .datetimepicker table tr > td.today.disabled:hover, .datetimepicker table tr > td.today.disabled:hover:hover, .datetimepicker table tr > td.today:active, .datetimepicker table tr > td.today:hover:active, .datetimepicker table tr > td.today.disabled:active, .datetimepicker table tr > td.today.disabled:hover:active, .datetimepicker table tr > td.today.active, .datetimepicker table tr > td.today:hover.active, .datetimepicker table tr > td.today.disabled.active, .datetimepicker table tr > td.today.disabled:hover.active, .datetimepicker table tr > td.today.disabled, .datetimepicker table tr > td.today:hover.disabled, .datetimepicker table tr > td.today.disabled.disabled, .datetimepicker table tr > td.today.disabled:hover.disabled, .datetimepicker table tr > td.today[disabled], .datetimepicker table tr > td.today:hover[disabled], .datetimepicker table tr > td.today.disabled[disabled], .datetimepicker table tr > td.today.disabled:hover[disabled] { background: var(--accent) !important; color: #fff; opacity: .7; }
.daterangepicker .daterangepicker_input .input-mini.active, .daterangepicker .daterangepicker_input .input-mini:focus { border: 1px solid var(--accent); }
.daterangepicker tbody td.today { background: var(--accent); color: #fff; }
.daterangepicker tbody td.active, .daterangepicker tbody td.in-range, .daterangepicker tbody td.active:hover, .daterangepicker tbody td.in-range:hover { background: var(--accent); color: #fff; }
.daterangepicker select.ampmselect.active, .daterangepicker select.ampmselect:focus { border: 1px solid var(--accent); }
.daterangepicker select.hourselect.active, .daterangepicker select.hourselect:focus { border: 1px solid var(--accent); }
.daterangepicker select.minuteselect.active, .daterangepicker select.minuteselect:focus { border: 1px solid var(--accent); }
.daterangepicker select.monthselect.active, .daterangepicker select.monthselect:focus { border: 1px solid var(--accent); }
.daterangepicker select.yearselect.active, .daterangepicker select.yearselect:focus { border: 1px solid var(--accent); }
.daterangepicker .ranges li.active { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.daterangepicker td.active:not(.off), .daterangepicker td.active:hover, .daterangepicker .active.end-date.in-range { background: var(--accent) !important; color: #fff !important; }
.nav-link { color: var(--accent); font-size: 1rem; }
.nav-item .rounded-circle { color: var(--accent); }
.accordion.accordion-theme .ac-item { background-color: var(--accent); border: 0; }
.alert.alert-primary { background-color: var(--accent); border-color: #093cfc; }
button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]) { display: inline-block; font-family: inherit; border-radius: 0.42rem 0.42rem 0.42rem 0.42rem; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-decoration: none; outline: none; padding: 12px 18px; position: relative; text-transform: uppercase; background-color: var(--accent); border-color: var(--accent); border-width: 1px; border-style: solid; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; margin-bottom: 6px; outline: none; line-height: 14px; cursor: pointer; }
button.btn.btn-outline, .btn:not(.close):not(.mfp-close).btn-outline, a.btn:not([href]):not([tabindex]).btn-outline { background-color: transparent; border-width: 2px; border-style: solid; border-color: var(--accent); color: var(--accent); }
button.btn.btn-outline:hover, button.btn.btn-outline:focus, button.btn.btn-outline:active, button.btn.btn-outline.active, .btn:not(.close):not(.mfp-close).btn-outline:hover, .btn:not(.close):not(.mfp-close).btn-outline:focus, .btn:not(.close):not(.mfp-close).btn-outline:active, .btn:not(.close):not(.mfp-close).btn-outline.active, a.btn:not([href]):not([tabindex]).btn-outline:hover, a.btn:not([href]):not([tabindex]).btn-outline:focus, a.btn:not([href]):not([tabindex]).btn-outline:active, a.btn:not([href]):not([tabindex]).btn-outline.active { background-color: var(--accent); border-width: 2px; border-style: solid; border-color: var(--accent); color: #fff; }
button.btn.btn-primary, .btn:not(.close):not(.mfp-close).btn-primary, a.btn:not([href]):not([tabindex]).btn-primary { background-color: var(--accent); border-color: var(--accent); }
button.btn.rounded-circle-holder.btn-outline:before, .btn:not(.close):not(.mfp-close).rounded-circle-holder.btn-outline:before, a.btn:not([href]):not([tabindex]).rounded-circle-holder.btn-outline:before { border-left: 2px solid var(--accent); }
.heading-text.heading-gradient h2 > * { -webkit-text-fill-color: transparent !important; -webkit-background-clip: text !important; background: -webkit-radial-gradient(left top, circle, #4b72ff 9%, var(--accent) 48%, #6442ff 91%); background: radial-gradient(circle at left top, #4b72ff 9%, var(--accent) 48%, #6442ff 91%); }
.heading-text.heading-section h2:before { content: ""; position: absolute; height: 2px; width: 100px; background-color: var(--accent); bottom: -30px; left: 0; right: 0; }
.heading-creative strong { color: var(--accent); }
.tabs .nav-tabs .nav-link.active { color: var(--accent); background-color: transparent; border-bottom: 2px solid var(--accent); }
.tabs.tabs-vertical .nav-tabs .nav-link.active { color: var(--accent); background-color: transparent; border-right: 2px solid var(--accent); }
.icon-box.effect.dark .icon i:after { box-shadow: 0 0 0 3px var(--accent); }
.icon-box.effect.dark .icon i:hover, .icon-box.effect.dark:hover .icon i { background-color: var(--accent); }
.text-box.text-box-light:hover { background: var(--accent); }
.feature-box:hover h2, .feature-box:hover h3, .feature-box:hover h4 { color: var(--accent); }
.flickity-button:hover { background-color: var(--accent); }
.inspiro-slider.arrows-dark .flickity-button:hover, .carousel.arrows-dark .flickity-button:hover { background-color: var(--accent); }
.inspiro-slider.arrows-grey .flickity-button:hover, .carousel.arrows-grey .flickity-button:hover { background-color: var(--accent); }
.dropcap.dropcap-colored { background-color: var(--accent); color: #fff; }
.highlight.highlight-primary { color: var(--accent); font-weight: bold; }
.highlight.highlight-colored { background-color: var(--accent); color: #fff; }
.p-progress-bar, .progress-bar { height: 100%; padding: 10px; background-color: var(--accent); box-shadow: none; }
.blockquote { border-left: 3px solid var(--accent); font-size: 20px; padding: 10px 20px; margin: 0 0 20px; }
.blockquote-color { background-color: var(--accent); }
.mfp-ajax-holder .mfp-close:hover { background: var(--accent); color: #fff; }
.list-colored li a { color: var(--accent); font-weight: 600; }
.list-legend li span { width: 12px; height: 12px; border-radius: 50%; margin-right: 9px; background-color: var(--accent); float: left; margin-top: 6px; }
.list-icon.list-icon-colored li:before, .list-icon.icon-list-colored i { color: var(--accent); }
a.list-group-item.active { background-color: var(--accent); border: var(--accent); }
.animated-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); position: relative; top: -10px; right: 8px; }
.animated-dot:before, .animated-dot:after { content: ""; width: 16px; height: 16px; border-radius: 50%; background-color: var(--accent); position: absolute; bottom: 0; left: 0; margin: auto; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation: pulse-me 3s linear infinite; animation: pulse-me 3s linear infinite; }
.post-navigation a:hover { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; color: var(--accent); }
.call-to-action.call-to-action-colored { background-color: var(--accent); }
.pricing-table.colored .plan-header { background-color: var(--accent); border-color: rgba(0, 0, 0, 0.05); color: #fff; }
.timeline .timeline-item .timeline-icon { background-color: var(--accent); position: absolute; border-radius: 50%; left: 0px; width: 34px; height: 34px; z-index: 3; color: #fff; text-align: center; padding: 5px; font-size: 18px; }
.bg-overlay[data-style="2"] { background: var(--accent); opacity: .9; }
.bg-overlay[data-style="5"] { background: -webkit-radial-gradient(left top, circle, #09c8e6 20%, var(--accent) 38%, #5839e4 66%); background: radial-gradient(circle at left top, #09c8e6 20%, var(--accent) 38%, #5839e4 66%); opacity: .9; }
.wizard > .steps ul li > a:hover, .wizard > .steps ul li > a:active { background: var(--accent); color: #fff; }
.wizard > .steps ul li.current a, .wizard > .steps ul li.current a:hover, .wizard > .steps ul li.current a:active { background: var(--accent); color: #fff; }
.wizard[data-orientation="vertical"][data-style="1"] > .steps ul li:hover a .number, .wizard[data-orientation="vertical"][data-style="1"] > .steps ul li:active a .number { background: var(--accent); color: #fff; }
.wizard[data-orientation="vertical"][data-style="1"] > .steps ul li.current a .number, .wizard[data-orientation="vertical"][data-style="1"] > .steps ul li.current a:hover .number, .wizard[data-orientation="vertical"][data-style="1"] > .steps ul li.current a:active .number { background: var(--accent); color: #fff; }

/* Hover state for primary buttons: deeper orange */
button.btn.btn-primary:hover, .btn.btn-primary:hover, a.btn.btn-primary:hover { background-color: var(--accent-2); border-color: var(--accent-2); }

/* Services cards ("What we do") */
#welcome { padding: 7rem 0; }
#welcome .svc-heading { margin-bottom: 3.5rem; }
#welcome .svc-heading h2 { font-weight: 500; letter-spacing: -.01em; font-size: 24px; }
#welcome .svc-heading .lead { display: block; max-width: 640px; margin-top: 1.5rem; }
.svc-card { position: relative; height: 100%; padding: 2.1rem 1.9rem 2rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: scale .28s ease, box-shadow .28s ease, background .28s ease; }
.svc-card:hover { scale: 1.03; background: linear-gradient(160deg, rgba(var(--accent-rgb), .16) 0%, rgba(var(--accent-rgb), .05) 55%, var(--card) 100%); box-shadow: 0 22px 48px -20px rgba(var(--accent-rgb), .45); }
.svc-icon { width: 54px; height: 54px; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(var(--accent-rgb), .12); color: var(--accent); font-size: 22px; transition: background .28s ease, color .28s ease; }
.svc-card:hover .svc-icon { background: var(--accent); color: #fff; }
.svc-card h4 { margin: 0 0 .8rem; font-size: 1.15rem; line-height: 1.35; }
.svc-card p { margin: 0; font-size: .95rem; line-height: 1.7; }
@media (max-width: 767.98px) { #welcome { padding: 4rem 0; } #welcome .svc-heading h2 { font-size: 24px; } }

/* Hidden sections (kept in HTML, reviewed at the end of the project) */
section[hidden] { display: none !important; }

/* WhatsApp floating button (bottom-right on every page) */
#whatsapp-float { position: fixed; right: 24px; bottom: 24px; z-index: 200; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #25d366; color: #fff; font-size: 32px; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .55), 0 0 0 0 rgba(37, 211, 102, .5); transition: transform .2s ease, box-shadow .2s ease; animation: wa-pulse 2.8s ease-out infinite; }
#whatsapp-float:hover, #whatsapp-float:focus { color: #fff; transform: scale(1.08); }
#whatsapp-float i { line-height: 1; }
@keyframes wa-pulse { 0% { box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .55), 0 0 0 0 rgba(37, 211, 102, .45); } 70% { box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .55), 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .55), 0 0 0 0 rgba(37, 211, 102, 0); } }
@media (prefers-reduced-motion: reduce) { #whatsapp-float { animation: none; } }
@media (max-width: 767.98px) { #whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 28px; } }
/* keep the "scroll to top" button above the WhatsApp button */
#scrollTop { right: 31px !important; margin-bottom: 72px; }
@media (max-width: 767.98px) { #scrollTop { right: 22px !important; margin-bottom: 64px; } }

/* Main menu dropdown (desktop): one continuous rounded outline around the item + its list,
   the box expands downward on hover and the list items appear inside it */
@media (min-width: 992px) {
  #header #mainMenu nav > ul > li.dropdown > a { position: relative; z-index: 4; border: 0; border-radius: 0; background: none; transition: color .15s ease; }
  #header #mainMenu nav > ul > li.dropdown:hover > a,
  #header #mainMenu nav > ul > li.dropdown.hover-active > a { background: none; }
  #header #mainMenu nav > ul > li.dropdown > .dropdown-menu { z-index: 3; top: calc(50% - 18px); left: 0; right: auto; margin: 0; min-width: 100%; width: max-content; padding: 42px 6px 6px; background: var(--bg2); border: 1px solid var(--menu-border) !important; border-radius: 10px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7); }
  #header #mainMenu nav > ul > li.dropdown:hover > .dropdown-menu { animation: menu-expand .24s ease-out; }
  #header #mainMenu nav > ul > li.dropdown > .dropdown-menu > li > a { padding: 9px 14px; border-radius: 8px; color: var(--muted); font-size: 12px; line-height: 1.3; white-space: nowrap; }
  #header #mainMenu nav > ul > li.dropdown > .dropdown-menu > li > a { transform-origin: left center; transition: color .18s ease, scale .18s ease; }
  #header #mainMenu nav > ul > li.dropdown > .dropdown-menu > li > a:hover,
  #header #mainMenu nav > ul > li.dropdown > .dropdown-menu > li > a:focus-visible { background: none; color: var(--accent); scale: 1.08; }
}
@keyframes menu-expand { from { clip-path: inset(0 0 calc(100% - 38px) 0 round 10px); } to { clip-path: inset(0 0 0 0 round 10px); } }
@media (prefers-reduced-motion: reduce) { #header #mainMenu nav > ul > li.dropdown:hover > .dropdown-menu { animation: none; } }

/* Main menu items (desktop): on hover - accent colour + slight scale-up, nothing else */
@media (min-width: 992px) {
  #header #mainMenu nav > ul > li > a { display: inline-block; line-height: 16px; transition: color .18s ease, scale .18s ease; }
  #header #mainMenu nav > ul > li:hover > a,
  #header #mainMenu nav > ul > li > a:focus-visible { color: var(--accent) !important; scale: 1.08; }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) { #header #mainMenu nav > ul > li > a { transition: color .18s ease; } #header #mainMenu nav > ul > li:hover > a { scale: 1; } }

.hero { position: relative; overflow: hidden; display: flex; align-items: center; background: radial-gradient(120% 120% at 75% 15%, #1c1c20 0%, #0c0c0e 62%, #000 100%) !important; }
.hero .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity .9s ease; }
.hero .hero-video.is-ready { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, .75) 100%); pointer-events: none; }
.hero .container { position: relative; z-index: 2; }
.hero h1 { margin: 0 0 -.19em; color: #fff; font-weight: 800; font-size: clamp(2.6rem, 6.2vw, 5.2rem); line-height: 1.04; letter-spacing: -.025em; }
.hero .hero-lead { max-width: 640px; margin: 0 auto 2rem; color: rgba(255, 255, 255, .85); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; }

/* Inner pages: dark page title */
#page-title.page-title-dark { background: radial-gradient(120% 140% at 80% 0%, #1c1c20 0%, #0c0c0e 70%) !important; padding: 140px 0 44px; }
#page-title.page-title-dark .page-title > h1 { color: #fff; font-weight: 800; letter-spacing: .01em; font-size: clamp(2rem, 4.5vw, 3.2rem); }
#page-title.page-title-dark .page-title > span { color: rgba(255, 255, 255, .72); font-size: 1rem; }
#page-title.page-title-dark .breadcrumb ul li a { color: rgba(255, 255, 255, .72); }
#page-title.page-title-dark .breadcrumb ul li.active a { color: #f5a524; }

html[data-theme] body #page-title.page-title-dark h1 { color: #fff; }

/* Portfolio filter + grid */
#portfolio-section { padding-top: 6rem; }
.grid-filter { margin-bottom: 2rem; }
.grid-filter li a { padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
.grid-filter li a:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
.grid-filter.gf-outline li.active a, .grid-filter li.active a { background: rgba(var(--accent-rgb), .14); border-color: var(--accent); color: var(--accent); }
.grid-filter .grid-active-title { display: none; }
/* rounded corners on every card, whatever the media (photo, photo slider, video) */
.portfolio-item .portfolio-image, .portfolio-item .portfolio-slider, .portfolio-item .portfolio-video { border-radius: 12px; overflow: hidden; }
.portfolio-item:not(.no-overlay) .portfolio-item-wrap { border-radius: 12px; overflow: hidden; }
.portfolio-item .portfolio-image img, .portfolio-item .portfolio-slider img, .portfolio-item .portfolio-video video { border-radius: 12px; }
.portfolio-item .portfolio-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.portfolio-item.no-overlay .portfolio-description { padding: 14px 4px 4px; text-align: left; }
.portfolio-item.no-overlay .portfolio-description h3 { color: var(--head); font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.portfolio-item.no-overlay .portfolio-description span { color: var(--muted); font-size: .85rem; }
.portfolio-more { margin-top: 3rem; }
.portfolio-more a.btn.btn-more:not(.close):not(.mfp-close) { padding: 14px 40px; border: 1px solid var(--accent); border-radius: 999px; background-color: transparent; color: var(--accent); font-weight: 600; transition: background-color .2s ease, color .2s ease; }
.portfolio-more a.btn.btn-more:not(.close):not(.mfp-close) { height: auto; min-height: 0; line-height: 16px; display: inline-block; }
.portfolio-more a.btn.btn-more:not(.close):not(.mfp-close):hover, .portfolio-more a.btn.btn-more:not(.close):not(.mfp-close):focus { background-color: var(--accent); color: #fff; }

/* Theme toggle button (header) */
#header .header-extras #theme-toggle { color: #fff; }
#header .header-extras #theme-toggle .theme-icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; position: relative; top: -3px; }
html[data-theme="dark"] #header #theme-toggle .icon-to-dark { display: none !important; }
html[data-theme="light"] #header #theme-toggle .icon-to-light { display: none !important; }

/* Light theme refinements */
html[data-theme="light"] .svc-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
html[data-theme="light"] .svc-card:hover { box-shadow: 0 22px 44px -22px rgba(var(--accent-rgb), .45); }
html[data-theme="light"] .grid-filter li a:hover { border-color: rgba(var(--accent-rgb), .5); }

/* Light theme: the sticky (scrolled) header and the header of inner pages (no hero) are light with dark text; over the home hero it stays transparent with white text */
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) .header-inner,
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) #header-wrap { background-color: var(--bg) !important; box-shadow: 0 1px 0 var(--line); }
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) #logo a,
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) #logo a span,
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) #mainMenu nav > ul > li > a,
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) .header-extras > ul > li a,
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) .header-extras > ul > li i { color: var(--head) !important; }
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) #logo small { color: var(--accent) !important; }
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) #mainMenu nav > ul > li:hover > a { color: var(--accent) !important; }
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) .lines,
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) .lines:before,
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) .lines:after { background-color: var(--head) !important; }

/* custom SVG icons inside service cards */
.svc-icon .svc-svg { display: block; width: 28px; height: 28px; }
/* Video production: intro text block */
#video-intro { padding: calc(var(--inner-gap) - 28px) 0 3.5rem; }
#video-intro .intro-text { max-width: 860px; margin: 0 auto; }
#video-intro .intro-lead { margin: 0 0 2rem; color: var(--head); font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
#video-intro .intro-list { margin: 0 0 2rem; padding: 0; list-style: none; }
#video-intro .intro-list li { position: relative; margin: 0 0 1.1rem; padding-left: 2rem; color: var(--muted); font-size: 1.05rem; line-height: 1.75; }
#video-intro .intro-list li::before { content: ""; position: absolute; left: .15rem; top: .72em; width: .6rem; height: .6rem; background: var(--accent); transform: rotate(45deg); border-radius: 2px; }
#video-intro .intro-closing { margin: 0; padding-top: 1.6rem; border-top: 1px solid var(--line); color: var(--head); font-size: 1.1rem; font-weight: 600; line-height: 1.7; }
@media (max-width: 767.98px) { #video-intro { padding: 3.5rem 0 2.5rem; } }

/* RULE: the accent underline under a section heading always spans the full width of the heading text.
   The heading shrinks to its text (inline-block) so the line can be 100% of it; subtitle goes on its own line. */
.heading-text.heading-section h1, .heading-text.heading-section h2, .heading-text.heading-section h3, .heading-text.heading-section h4 { display: inline-block; max-width: 100%; }
.heading-text.heading-section h1:before, .heading-text.heading-section h2:before, .heading-text.heading-section h3:before, .heading-text.heading-section h4:before,
.heading-text.heading-section.text-center h1:before, .heading-text.heading-section.text-center h2:before, .heading-text.heading-section.text-center h3:before, .heading-text.heading-section.text-center h4:before,
.heading-text.heading-section.text-right h1:before, .heading-text.heading-section.text-right h2:before, .heading-text.heading-section.text-right h3:before, .heading-text.heading-section.text-right h4:before { width: 100%; left: 0; right: auto; margin: 0; }
.heading-text.heading-section > .lead, .heading-text.heading-section > p, .heading-text.heading-section > span { display: block; }

/* Underline sits close to the word: ~14px under the baseline (was 43px). Space below the line stays the same. */
.heading-text.heading-section h1:before, .heading-text.heading-section h2:before, .heading-text.heading-section h3:before, .heading-text.heading-section h4:before,
.heading-text.heading-section.text-center h1:before, .heading-text.heading-section.text-center h2:before, .heading-text.heading-section.text-center h3:before, .heading-text.heading-section.text-center h4:before,
.heading-text.heading-section.text-right h1:before, .heading-text.heading-section.text-right h2:before, .heading-text.heading-section.text-right h3:before, .heading-text.heading-section.text-right h4:before { bottom: -1px; }
.heading-text.heading-section h2 { margin-bottom: 31px; }

/* Clients: one-row logo ticker. As many whole logos as fit the width (no cropped logo, no empty space);
   it advances by one logo; logos keep equal gaps inside the visible row. Logic: js/custom.js */
.logo-ticker { position: relative; overflow: hidden; height: 46px; }
.logo-ticker a { position: absolute; left: 0; top: 0; display: block; line-height: 0; opacity: .85; transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; will-change: transform; }
.logo-ticker a.no-anim { transition: none; }
.logo-ticker a:hover { opacity: 1; }
.logo-ticker img { display: block; height: calc(var(--h, 46px) * var(--ts, 1)); width: auto; max-width: none; }
@media (prefers-reduced-motion: reduce) { .logo-ticker a { transition: none; } }

/* About page */
#about-company { padding: calc(var(--inner-gap) - 28px) 0 4rem; }
#about-company p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.4rem; }
.about-steps { padding-top: 1rem; }
.about-steps .row { --bs-gutter-x: 0; margin: 0; }
.about-step { height: 100%; padding: 3.2rem 2.6rem 3rem; background: var(--bg2); border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.about-steps .col-lg-4:last-child .about-step { border-right: 0; }
.about-step-num { display: block; margin-bottom: 1.2rem; color: var(--accent); font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.about-step h3 { margin: 0 0 .8rem; font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; }
.about-step p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
@media (max-width: 991.98px) { .about-step { border-right: 0; border-bottom: 1px solid var(--line); padding: 2.4rem 1.6rem; }  }

/* Contact page */
#contact-content { padding: calc(var(--inner-gap) - 28px) 0 var(--inner-gap); }
#contact-content label, #cart-content label { margin-bottom: .4rem; color: var(--head); font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
#contact-content .form-control, #cart-content .form-control { border-radius: 10px; padding: .8rem 1rem; }
#contact-content .form-control:focus, #cart-content .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.4rem; }
.contact-icon { flex: 0 0 52px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(var(--accent-rgb), .12); color: var(--accent); font-size: 1.25rem; }
.contact-list strong { display: block; color: var(--head); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.contact-list a, .contact-list span:not(.contact-icon) { color: var(--muted); font-size: 1.05rem; text-decoration: none; }
.contact-list a:hover { color: var(--accent); }
@media (max-width: 991.98px) {  #contact-content .col-lg-5 { margin-top: 3rem; } }

/* spam-protection honeypot: invisible for people */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-list div > span, .contact-list div > a { display: block; }

/* Contact page: section headings are half the size of the other page headings (48px -> 24px) */
#contact-content .heading-text.heading-section h2, #cart-content .heading-text.heading-section h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 22px; }

/* Contact page: two cards of equal height (details on the left, form on the right) */
.contact-card { height: 100%; display: flex; flex-direction: column; padding: 2.4rem; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; }
.contact-card .heading-text { margin-bottom: 1.6rem; }
.contact-card .contact-list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; }
.contact-card .contact-list li { margin-bottom: 0; }
.contact-card .widget-contact-form { flex: 1 1 auto; display: flex; flex-direction: column; }
.contact-card .widget-contact-form .form-group:has(textarea) { flex: 1 1 auto; display: flex; flex-direction: column; }
.contact-card .widget-contact-form textarea { flex: 1 1 auto; min-height: 140px; }
.contact-card .widget-contact-form .btn { align-self: flex-start; }
@media (max-width: 575.98px) { .contact-card { padding: 1.6rem; } }

/* inner pages: no breadcrumb under the title, tighter gap between the title band and the content */
#page-title.page-title-dark .page-title { margin-bottom: 0; padding-bottom: 0; }

/* the template pulls the title under the transparent header with extra padding and a -124px margin: reset it for our dark title band */
#header[data-transparent="true"] + #page-title.page-title-dark { top: 0; margin-bottom: 0; padding: calc(var(--inner-gap) - 10px) 0 28px; }
@media (max-width: 991.98px) { :root { --inner-gap: 48px; } }

/* one spacing value for the three visible gaps of inner pages (header -> title, subtitle -> content, content -> footer) */
:root { --inner-gap: 70px; }

/* Portfolio page: grid starts right under the title band; same 70px rhythm as the other inner pages */
#portfolio-section.portfolio-page { padding: calc(var(--inner-gap) - 28px) 0 var(--inner-gap); }

/* any element with the hidden attribute stays hidden (menu items etc.) */
li[hidden] { display: none !important; }

/* current page in the main menu: accent colour (the template greys it out) */
@media (min-width: 992px) {
  #header #mainMenu nav > ul > li.current > a { color: var(--accent) !important; }
}
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) #mainMenu nav > ul > li.current > a { color: var(--accent) !important; }
/* Equipment pages: centered title, text placeholder, grid of equipment cards (4 per row on desktop) */
#equipment-intro { padding: calc(var(--inner-gap) - 28px) 0 0; }
.equipment-intro-text { max-width: 760px; margin: 0 auto; text-align: center; }
.equipment-intro-text p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.8; }
#equipment-list { padding: 3.5rem 0 var(--inner-gap); }
.eq-grid { --eq-cols: 4; display: grid; grid-template-columns: repeat(var(--eq-cols), minmax(0, 1fr)); gap: 20px; }
.eq-card { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; transition: scale .28s ease, box-shadow .28s ease, background .28s ease; }
.eq-card:hover { scale: 1.03; background: linear-gradient(160deg, rgba(var(--accent-rgb), .14) 0%, rgba(var(--accent-rgb), .04) 55%, var(--card) 100%); box-shadow: 0 22px 48px -20px rgba(var(--accent-rgb), .45); }
.eq-media { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg2); color: rgba(var(--ink-rgb), .22); font-size: 3.2rem; }
.eq-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.eq-media:has(img) { background: var(--bg2); }
.eq-media img { padding: 12.6%; box-sizing: border-box; }
.eq-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .35rem; padding: 1.05rem 1.15rem 1.2rem; }
.eq-cat { color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eq-name { margin: 0; color: var(--head); font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.eq-spec { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.eq-action { margin-top: auto; padding-top: .8rem; color: var(--accent); font-size: .82rem; font-weight: 600; text-decoration: none; }
@media (max-width: 1199.98px) { .eq-grid { --eq-cols: 3; } }
@media (max-width: 767.98px) { .eq-grid { --eq-cols: 2; gap: 12px; } .eq-body { padding: .85rem .9rem 1rem; } .eq-name { font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .eq-card { transition: none; } }

/* Header cart icon (same look as the theme toggle) with item counter */
#header .header-extras #cart-link { position: relative; color: #fff; }
#header .header-extras #cart-link .cart-icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; position: relative; top: -3px; }
#header .header-extras #cart-link .cart-count { position: absolute; top: 22px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
#header .header-extras #cart-link .cart-count[hidden] { display: none; }
#header .header-extras #cart-link .cart-count.is-bump { animation: cart-bump .45s ease; }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
html[data-theme="light"] :is(#header.sticky-active, body:has(#page-title) #header) #cart-link { color: var(--head) !important; }

/* "Add to cart" button on equipment cards */
.eq-add { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; margin-top: auto; padding: .6rem 1rem; border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font-size: .82rem; font-weight: 600; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.eq-body .eq-spec + .eq-add { margin-top: .8rem; }
.eq-add:hover, .eq-add:focus-visible, .eq-add.is-added { background: var(--accent); color: #fff; }
@media (max-width: 767.98px) { .eq-add { padding: .55rem .6rem; font-size: .76rem; } }

/* Cart page */
#cart-content { padding: calc(var(--inner-gap) - 28px) 0 var(--inner-gap); }
.cart-list { margin: 0; padding: 0; list-style: none; flex: 1 1 auto; }
.cart-list[hidden], .cart-empty[hidden], .cart-note[hidden] { display: none; }
.cart-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.cart-row:last-child { border-bottom: 0; }
.cart-thumb { flex: 0 0 56px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(var(--accent-rgb), .12); color: var(--accent); font-size: 1.3rem; }
.cart-info { flex: 1 1 auto; min-width: 0; }
.cart-cat { display: block; color: var(--accent); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cart-name { display: block; color: var(--head); font-size: 1rem; font-weight: 700; }
.cart-qty { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; }
.cart-qty-btn { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--head); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.cart-qty-btn:hover { background: rgba(var(--accent-rgb), .14); color: var(--accent); }
.cart-qty-num { min-width: 1.6rem; text-align: center; color: var(--head); font-weight: 700; }
.cart-remove { width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cart-remove:hover { color: var(--accent); }
.cart-empty p { color: var(--muted); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.4rem; }
.cart-note { margin: 0 0 1rem; color: var(--accent); font-size: .9rem; font-weight: 600; }
#quote-form.is-disabled .btn { opacity: .6; }
@media (max-width: 575.98px) { .cart-row { flex-wrap: wrap; } .cart-info { flex-basis: calc(100% - 72px); } }

/* LED wall page: description with a larger lead paragraph */
.equipment-description .equipment-intro-text { max-width: 860px; }
.equipment-description .lead-text { margin-bottom: 1.2rem; color: var(--head); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; line-height: 1.55; letter-spacing: -.01em; }
.equipment-description .equipment-intro-text p + p { color: var(--muted); }

/* images carry width/height attributes (no layout shift); the CSS decides the displayed height */
.portfolio-item img, .testimonial-item img, .about img { height: auto; }
.eq-spec[hidden] { display: none !important; }
.eq-body .eq-spec[hidden] + .eq-add { margin-top: auto; }
.eq-media.is-soon span { color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

/* photo background of equipment cards (both themes: the dark-theme studio background): steel-blue light spot, floor, reflection; light theme keeps the grey card */
.eq-media:has(img) { position: relative; background: radial-gradient(100% 92% at 90% 6%, #a2b1c8 0%, #56647b 38%, #1a212c 76%, #0b0e13 100%); }
.eq-media:has(img)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5)); pointer-events: none; }
.eq-media img { filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .5)); position: relative; z-index: 1; }
/* dark theme: a clearer card outline (the photo background is as dark as the page edge) */
html[data-theme="dark"] .eq-card { position: relative; border-color: transparent; }
html[data-theme="dark"] .eq-card::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: inherit; pointer-events: none; z-index: 2; }
.eq-media:has(img) { background: radial-gradient(100% 92% at 90% 6%, #a2b1c8 0%, #56647b 38%, #232c39 76%, #181f2a 100%); }

/* project page + portfolio card with play / details buttons */
#project-content { padding: calc(var(--inner-gap) - 28px) 0 var(--inner-gap); }
#project-content .project-video { max-width: 1000px; margin: 0 auto 3.5rem; border-radius: 12px; overflow: hidden; background: #000; }
#project-content .project-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
#project-content .project-text { color: var(--muted); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.4rem; }
#project-content .project-attributes { margin: 0 0 2rem; color: var(--muted); }
#project-content .project-attributes strong { color: var(--head); }
.portfolio-image { position: relative; }
.portfolio-actions { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.portfolio-item:hover .portfolio-actions, .portfolio-item:has(a:focus-visible) .portfolio-actions { opacity: 1; pointer-events: auto; }
.portfolio-actions a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #111; font-size: 18px; transition: background-color .2s ease, color .2s ease, scale .2s ease; }
.portfolio-actions a:hover, .portfolio-actions a:focus-visible { background: var(--accent); color: #fff; scale: 1.08; }
@media (hover: none) { .portfolio-actions { opacity: 1; pointer-events: auto; background: transparent; align-items: flex-end; justify-content: flex-end; padding: 10px; } .portfolio-actions a { width: 42px; height: 42px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } }

/* project page: text, facts card, photo gallery (any number of photos) */
#project-content .project-lead { color: var(--head); font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; line-height: 1.55; letter-spacing: -.01em; margin-bottom: 1.4rem; }
#project-content .project-subtitle { margin: 2rem 0 1rem; color: var(--head); font-size: 1.1rem; font-weight: 700; }
#project-content .project-list { margin: 0 0 1.6rem; padding: 0; list-style: none; }
#project-content .project-list li { position: relative; margin: 0 0 .7rem; padding-left: 2rem; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
#project-content .project-list li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .6rem; height: .6rem; background: var(--accent); transform: rotate(45deg); border-radius: 2px; }
#project-content .project-facts { padding: 1.6rem 1.7rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
#project-content .project-facts dl { margin: 0; }
#project-content .project-facts dt { margin-top: 1.1rem; color: var(--accent); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
#project-content .project-facts dt:first-child { margin-top: 0; }
#project-content .project-facts dd { margin: .25rem 0 0; color: var(--head); font-size: 1rem; line-height: 1.5; }
.project-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 3.5rem; }
.project-gallery a { display: block; overflow: hidden; border-radius: 12px; }
.project-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: scale .35s ease; }
.project-gallery a:hover img, .project-gallery a:focus-visible img { scale: 1.05; }
@media (max-width: 991.98px) { #project-content .project-facts { margin-top: 2.5rem; } }
#project-content .heading-text.heading-section h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 22px; }
.portfolio-actions a i { color: inherit !important; line-height: 1; display: block; background: none; border: 0; }
.portfolio-actions a:hover, .portfolio-actions a:focus-visible, .portfolio-actions a:hover i, .portfolio-actions a:focus-visible i { color: #fff !important; }
html[data-theme="light"] .portfolio-actions a:hover, html[data-theme="light"] .portfolio-actions a:focus-visible { background: #f5a524; }

/* share this project */
.project-share { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.project-share .project-subtitle { margin: 0 0 1rem; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--head); font-size: 16px; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, scale .2s ease; }
.share-btn i { color: inherit !important; }
.share-btn:hover, .share-btn:focus-visible { background: #f5a524; border-color: #f5a524; color: #fff !important; scale: 1.08; }
.share-note { display: inline-block; margin-top: .8rem; color: var(--accent); font-size: .85rem; font-weight: 600; }
.share-note[hidden] { display: none; }

/* vertical video (phone format) */
#project-content .project-video.is-vertical { max-width: min(380px, 100%); }
#project-content .project-video.is-vertical video { aspect-ratio: 9 / 16; max-height: 80vh; }
.mfp-vertical .vv-wrap video { height: min(88vh, calc(92vw * 16 / 9)); width: auto; aspect-ratio: 9 / 16; }
.mfp-video .mfp-content { max-width: none; }
.mfp-video .vv-wrap { width: fit-content; margin: 0 auto; }
.mfp-video .vv-wrap video { display: block; background: #000; border-radius: 12px; }
.mfp-horizontal .vv-wrap video { width: min(92vw, calc(88vh * 16 / 9)); height: auto; aspect-ratio: 16 / 9; }
.mfp-horizontal .vv-wrap iframe { display: block; width: min(92vw, calc(88vh * 16 / 9)); height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
#project-content .project-video[data-youtube] { position: relative; aspect-ratio: 16 / 9; }
#project-content .project-video[data-youtube] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.yt-facade img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.yt-facade .yt-play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: #f5a524; color: #fff; font-size: 28px; transition: scale .2s ease; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { scale: 1.1; }
.portfolio-actions a svg, .yt-facade .yt-play svg { display: block; width: 20px; height: 20px; }
.yt-facade .yt-play svg { width: 30px; height: 30px; }

/* close button on project pages: back to the Portfolio (or Video production) page */
#page-title .container { position: relative; }
.project-close { position: absolute; top: -34px; right: 15px; z-index: 5; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(0, 0, 0, .25); color: #fff; transition: background-color .2s ease, border-color .2s ease, scale .2s ease; }
.project-close svg { display: block; }
.project-close:hover, .project-close:focus-visible { background: #f5a524; border-color: #f5a524; color: #fff; scale: 1.08; }
@media (max-width: 767.98px) { .project-close { top: -48px; right: 12px; } }
#about-company .heading-text.heading-section h2, #about-testimonials .heading-text.heading-section h2, #about-team .heading-text.heading-section h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 22px; }

/* ONE heading scale for the whole site: page title (h1) > section heading (h2, 24px) > card/item titles (h3, <= 18px) */
.heading-text.heading-section h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 22px; }
.svc-card h3 { margin: 0 0 .8rem; font-size: 1.15rem; line-height: 1.35; }

/* light theme: filled buttons and active pills use the same bright orange as the dark theme (text accent stays darker for readability) */
html[data-theme="light"] button.btn.btn-primary, html[data-theme="light"] .btn:not(.close):not(.mfp-close).btn-primary, html[data-theme="light"] a.btn:not([href]):not([tabindex]).btn-primary { background-color: #f5a524; border-color: #f5a524; color: #fff; }
html[data-theme="light"] button.btn.btn-primary:hover, html[data-theme="light"] .btn:not(.close):not(.mfp-close).btn-primary:hover, html[data-theme="light"] .btn:not(.close):not(.mfp-close).btn-primary:focus { background-color: #e8940d; border-color: #e8940d; color: #fff; }
html[data-theme="light"] .grid-filter li:hover a, html[data-theme="light"] .grid-filter li.active a, html[data-theme="light"] .grid-filter li.active a:hover, html[data-theme="light"] .grid-filter li.active a:focus { background-color: #f5a524; border-color: #f5a524; color: #fff; }
html[data-theme="light"] .eq-add:hover, html[data-theme="light"] .eq-add:focus-visible, html[data-theme="light"] .eq-add.is-added { background: #f5a524; border-color: #f5a524; color: #fff; }
html[data-theme="light"] .portfolio-more a.btn.btn-more:not(.close):not(.mfp-close):hover, html[data-theme="light"] .portfolio-more a.btn.btn-more:not(.close):not(.mfp-close):focus { background-color: #f5a524; border-color: #f5a524; color: #fff; }
html[data-theme="light"] .svc-card:hover .svc-icon, html[data-theme="light"] #header .header-extras #cart-link .cart-count { background: #f5a524; color: #fff; }
/* play icon inside the template's round white overlay button (home Recent Work) */
.portfolio-item .portfolio-description a i.icon-play-svg { display: inline-flex; align-items: center; justify-content: center; }
.portfolio-item .portfolio-description a i.icon-play-svg svg { display: block; width: 20px; height: 20px; }
.portfolio-item .portfolio-description > a { vertical-align: top; }
.portfolio-item .portfolio-description a i, .portfolio-item .portfolio-description a i.icon-play-svg { vertical-align: top; }
/* light theme: a media area that keeps the studio-blue background of the dark theme (add class is-studio-bg to .eq-media) */
html[data-theme="light"] .eq-media.is-studio-bg { background: radial-gradient(100% 92% at 90% 6%, #a2b1c8 0%, #56647b 38%, #232c39 76%, #181f2a 100%); color: rgba(255, 255, 255, .4); }

/* consent checkbox above the send button */
.consent-group { margin: .4rem 0 1.4rem; }
.consent-group .form-check { display: flex; align-items: flex-start; gap: .7rem; padding: 0; }
.consent-group .form-check-input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: #f5a524; cursor: pointer; }
.consent-group .form-check-input.is-invalid { outline: 2px solid #e5484d; outline-offset: 2px; }
.consent-group .form-check-label { margin: 0; color: var(--muted); font-size: .85rem; font-weight: 400; letter-spacing: 0; line-height: 1.55; cursor: pointer; }
.consent-error { margin: .6rem 0 0; color: #e5484d; font-size: .85rem; font-weight: 600; }
.consent-error[hidden] { display: none; }
#contact-content .consent-group .form-check-label, #cart-content .consent-group .form-check-label { margin: 0; color: var(--muted); font-size: .85rem; font-weight: 400; letter-spacing: 0; line-height: 1.55; }
html[data-theme] body .consent-group .consent-error { color: #e5484d; font-size: .85rem; font-weight: 600; }

/* privacy statement page */
#privacy-content { padding: calc(var(--inner-gap) - 28px) 0 var(--inner-gap); }
#privacy-content .privacy-block { margin: 0 0 2rem; }
#privacy-content .privacy-block h3 { margin: 0 0 .6rem; color: var(--head); font-size: 1.1rem; font-weight: 700; }
#privacy-content .privacy-block p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.8; }
.consent-group .form-check-label a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.consent-group .form-check-label a:hover { color: var(--head); }
#contact-content .consent-group .form-check-label a, #cart-content .consent-group .form-check-label a { color: inherit; text-decoration: underline; text-decoration-color: rgba(var(--ink-rgb), .35); text-underline-offset: 2px; font-weight: inherit; }
#contact-content .consent-group .form-check-label a:hover, #cart-content .consent-group .form-check-label a:hover { color: var(--head); text-decoration-color: var(--head); }

/* short equipment specs as a bullet list (one line per point) */
.eq-spec-list { margin: 0; padding: 0; list-style: none; }
.eq-spec-list li { position: relative; margin: 0 0 .25rem; padding-left: 1rem; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.eq-spec-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .32rem; height: .32rem; border-radius: 50%; background: var(--accent); }

/* equipment detail page */
#equipment-detail { padding: calc(var(--inner-gap) - 28px) 0 var(--inner-gap); }
#equipment-detail .row + .row { margin-top: 3.5rem; }
#equipment-detail .eq-cat { display: block; margin-bottom: .8rem; }
#equipment-detail .heading-text.heading-section h2 { margin-bottom: 22px; }
.eq-gallery-main { aspect-ratio: 1 / 1; border-radius: 16px; border: 1px solid var(--line); }
.eq-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.eq-gallery-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.eq-gallery-thumbs button { width: 84px; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; background: radial-gradient(100% 92% at 90% 6%, #a2b1c8 0%, #56647b 38%, #232c39 76%, #181f2a 100%); transition: border-color .2s ease; }
.eq-gallery-thumbs button img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.eq-gallery-thumbs button.is-active, .eq-gallery-thumbs button:hover { border-color: #f5a524; }
.eq-detail-list li { font-size: 1.05rem; margin-bottom: .6rem; padding-left: 1.2rem; }
.eq-detail-list li::before { top: .62em; }
.eq-detail-note { margin: 1.4rem 0 1.8rem; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.eq-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.eq-detail-actions .eq-add { width: auto; min-width: 190px; margin: 0; }
.eq-detail-cart { color: var(--muted); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.eq-detail-cart:hover { color: var(--head); }
.eq-specs { margin: 0; border-top: 1px solid var(--line); }
.eq-specs > div { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.eq-specs dt { margin: 0; color: var(--muted); font-size: .9rem; font-weight: 500; }
.eq-specs dd { margin: 0; color: var(--head); font-size: .98rem; }
.eq-detail-source { margin: .9rem 0 0; color: var(--muted); font-size: .8rem; }
.eq-card .eq-name a { color: inherit; text-decoration: none; }
.eq-card .eq-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.eq-card .eq-add { position: relative; z-index: 2; }
@media (max-width: 991.98px) { #equipment-detail .col-lg-6 + .col-lg-6 { margin-top: 2rem; } }
#equipment-detail .eq-detail-actions { margin-top: 1.8rem; }

/* a photo that already has its own studio background: fill the whole media area (no padding, no extra gradient effects) */
.eq-media img.eq-photo-full { padding: 0; object-fit: cover; filter: none; }
.eq-media:has(img.eq-photo-full)::after { display: none; }
.eq-gallery-thumbs button img.eq-photo-full { padding: 0; object-fit: cover; }

/* wide (cinema) videos: the player keeps the video's own proportion (set with --ratio on the page or by js in the lightbox) */
#project-content .project-video[style*="--ratio"] video { aspect-ratio: var(--ratio); }
/* Hero photo slideshow (replaces the background video): crossfade, one photo after another */
.hero .hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero .hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 7s ease-out; }
.hero .hero-slides img.is-active { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .hero .hero-slides img { transition: opacity .01s; transform: none; } }
/* Hero text: soft shadow so the white text stays readable over bright photos */
.hero h1 { text-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 28px rgba(0, 0, 0, .45); }
.hero .hero-lead { text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 3px 16px rgba(0, 0, 0, .45); }

/* Under-construction placeholder (Equipment pages) and an inactive link */
.coming-soon { max-width: 640px; margin: 0 auto; padding: 5rem 0 6rem; }
.coming-soon h2 { margin-bottom: 1rem; }
.coming-soon p { margin-bottom: 2rem; font-size: 1.1rem; color: rgba(255, 255, 255, .85); }
html[data-theme="light"] .coming-soon p { color: rgba(0, 0, 0, .75); }
.link-disabled { opacity: .55; cursor: default; text-decoration: none; }
/* Privacy statement: sub-headings, lists, links, "last updated" line */
#privacy-content .privacy-block { margin-bottom: 2.6rem; }
#privacy-content .privacy-block p { margin-bottom: 1rem; }
#privacy-content .privacy-block h4 { margin: 1.8rem 0 .6rem; color: var(--head); font-size: 1rem; font-weight: 700; }
#privacy-content .privacy-block ul { margin: 0 0 1.1rem; padding-left: 1.3rem; color: var(--muted); font-size: 1.05rem; line-height: 1.8; }
#privacy-content .privacy-block li { margin-bottom: .35rem; }
#privacy-content .privacy-block li strong { color: var(--head); }
#privacy-content .privacy-block a { color: var(--accent); text-decoration: none; }
#privacy-content .privacy-block a:hover { text-decoration: underline; }
#privacy-content .privacy-updated { margin: 0 0 2.2rem; color: var(--muted); font-size: .95rem; }
/* Business card page (business-card.html) */
#business-card { padding: calc(var(--inner-gap) - 28px) 0 var(--inner-gap); }
.bc-card { max-width: 560px; margin: 0 auto; padding: 0 0 2rem; text-align: center; }
.bc-avatar { display: block; width: 148px; height: 148px; margin: 0 auto 1.4rem; border-radius: 50%; object-fit: cover; object-position: 50% 50%; border: 4px solid var(--accent); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); background: #222; }
.bc-name { margin: 0 0 .3rem; color: var(--head); font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; }
.bc-role { margin: 0 0 1rem; color: var(--accent); font-size: .95rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bc-about { max-width: 440px; margin: 0 auto 1.8rem; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.bc-quick { display: flex; justify-content: center; gap: 14px; margin-bottom: 1.8rem; }
.bc-quick a { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft, rgba(245, 165, 36, .14)); color: var(--accent); font-size: 1.25rem; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.bc-quick a:hover, .bc-quick a:focus-visible { background: var(--accent); color: #fff; transform: translateY(-2px); }
.bc-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: .6rem; }
.bc-actions .btn i { margin-right: .45rem; }
.bc-share-note { display: block; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
.bc-list { margin: 2rem 0 0; padding: 1.6rem 1.8rem .4rem; text-align: left; border: 1px solid var(--line, rgba(255, 255, 255, .1)); border-radius: 14px; background: var(--card, rgba(255, 255, 255, .03)); }
@media (max-width: 575.98px) { .bc-avatar { width: 128px; height: 128px; } .bc-name { font-size: 1.6rem; } .bc-list { padding: 1.3rem 1.2rem .2rem; } }
/* Business card buttons: keep the accent colour in every state (the share button used to stay blue after a click) */
.bc-actions .btn, .bc-actions .btn:focus, .bc-actions .btn:active, .bc-actions .btn:active:focus, .bc-actions .btn.active { background-color: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
.bc-actions .btn:hover { background-color: #e0951a; border-color: #e0951a; color: #fff; }
.bc-actions .btn:focus-visible { outline: 2px solid rgba(245, 165, 36, .55); outline-offset: 3px; }
/* Equipment cards: the "Add to cart" buttons of one row always sit at the same height (pinned to the bottom), a minimum gap is kept above them */
.eq-body .eq-spec + .eq-add, .eq-body .eq-spec[hidden] + .eq-add, .eq-body > .eq-add { margin-top: auto; }
.eq-body > .eq-name { margin-bottom: .5rem; }
.eq-body > .eq-spec:not([hidden]) { margin-bottom: .8rem; }
/* Phones and tablets: logo on the left, icons next to the menu button (the centred logo used to overlap the icons); hero title spacing scales with the font size */
@media (max-width: 991.98px) {
  #header #logo { text-align: left !important; padding-left: 30px !important; }
  #header #logo a { text-align: left !important; }
  #header .header-extras { position: absolute; top: 0; right: 70px; left: auto; }
}
@media (max-width: 767.98px) { .hero h1 { margin-bottom: -.25em; } }