/*
Theme Name: Hydrotek Pro v3
Theme URI: https://hydrotek.in
Author: Team Engineers
Author URI: https://teameng.co.in
Description: Clean, professional light theme for Hydrotek Engineers, Pune. White and soft grey surfaces, deep navy primary, restrained safety amber accents. Spec-plate product cards, condensed engineering typography, Elementor compatible with a full-width template.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hydrotek-pro
Tags: light, one-column, custom-logo, custom-menu, featured-images, full-width-template
*/

/* ============ Tokens ============ */
:root {
  --ht-bg: #ffffff;
  --ht-panel: #f4f6f8;
  --ht-panel-2: #eaeef2;
  --ht-line: #dbe2e8;
  --ht-ink: #18222e;
  --ht-text: #3c4754;
  --ht-steel: #66727e;
  --ht-navy: #14365c;
  --ht-navy-dark: #0f2845;
  --ht-amber: #ffb923;
  --ht-amber-text: #b27300;
  --ht-font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --ht-font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --ht-max: 1180px;
  --ht-radius: 0px;
  --ht-section-pad: 80px;
  --ht-hero-pad: 90px;
  --ht-topbar: #14365c;
  --ht-footer-bg: #0f2845;
  --ht-amber-light: #ffc94f;
  --ht-logo-h: 52px;
}

/* ============ Reset / base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--ht-bg);
  color: var(--ht-text);
  font-family: var(--ht-font-body);
  font-size: 17px;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ht-navy); text-decoration: none; }
a:hover { color: var(--ht-amber-text); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ht-navy);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ht-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--ht-ink);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1.2em; }

.ht-container { max-width: var(--ht-max); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ht-navy); color: #ffffff; padding: 10px 18px; z-index: 999;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Eyebrow label */
.ht-eyebrow {
  display: inline-block;
  font-family: var(--ht-font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ht-navy);
  border: 1px solid var(--ht-line);
  background: #ffffff;
  padding: 5px 14px;
  margin-bottom: 18px;
}

/* Hazard accent: slim amber-on-navy stripe */
.ht-hazard {
  height: 5px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ht-amber) 0 14px,
    var(--ht-navy) 14px 28px
  );
}

/* ============ Buttons ============ */
.ht-btn, .wp-block-button__link {
  display: inline-block;
  font-family: var(--ht-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 13px 32px;
  background: var(--ht-navy);
  color: #ffffff !important;
  border: 1px solid var(--ht-navy);
  cursor: pointer;
  border-radius: var(--ht-radius);
  transition: background 0.15s ease, transform 0.15s ease;
}
.ht-btn:hover { background: var(--ht-navy-dark); transform: translateY(-1px); }
.ht-btn--amber {
  background: var(--ht-amber);
  border-color: var(--ht-amber);
  color: #18222e !important;
}
.ht-btn--amber:hover { background: var(--ht-amber-light); }
.ht-btn--ghost { background: transparent; color: var(--ht-navy) !important; border-color: var(--ht-navy); }
.ht-btn--ghost:hover { background: var(--ht-panel); }

/* ============ Header ============ */
.ht-topbar {
  background: var(--ht-topbar);
  font-size: 0.85rem;
  color: #c9d4e0;
}
.ht-topbar .ht-container {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 6px; padding-top: 7px; padding-bottom: 7px;
}
.ht-topbar a { color: #ffffff; }
.ht-topbar a:hover { color: var(--ht-amber); }

.ht-masthead {
  background: #ffffff;
  border-bottom: 1px solid var(--ht-line);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 rgba(20, 54, 92, 0.04);
}
.ht-masthead .ht-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 14px; padding-bottom: 14px;
}
.ht-brand { display: flex; align-items: center; gap: 12px; }
.ht-brand img { max-height: var(--ht-logo-h); width: auto; }
.ht-brand .site-title {
  font-family: var(--ht-font-display);
  font-size: 1.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; margin: 0;
}
.ht-brand .site-title a { color: var(--ht-ink); }
.ht-brand .site-title span { color: var(--ht-navy); }
.ht-brand .site-tagline {
  display: block; font-family: var(--ht-font-body);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ht-steel); margin-top: 2px;
}

.ht-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.ht-nav li { position: relative; }
.ht-nav a {
  display: block;
  font-family: var(--ht-font-display);
  font-size: 1rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ht-ink);
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
}
.ht-nav a:hover,
.ht-nav .current-menu-item > a,
.ht-nav .current_page_item > a { color: var(--ht-navy); border-bottom-color: var(--ht-amber); }

/* Dropdowns */
.ht-nav ul ul {
  position: absolute; left: 0; top: 100%;
  background: #ffffff; border: 1px solid var(--ht-line);
  box-shadow: 0 8px 22px rgba(24, 34, 46, 0.08);
  min-width: 230px; display: none; flex-direction: column; z-index: 60;
}
.ht-nav li:hover > ul, .ht-nav li:focus-within > ul { display: flex; }
.ht-nav ul ul a { border-bottom: 1px solid var(--ht-line); padding: 11px 16px; font-size: 0.92rem; }
.ht-nav ul ul ul { left: 100%; top: 0; }

.ht-nav-toggle {
  display: none; background: none; border: 1px solid var(--ht-line);
  color: var(--ht-ink); padding: 9px 14px; cursor: pointer;
  font-family: var(--ht-font-display); text-transform: uppercase; letter-spacing: 0.08em;
}

.ht-header-cta { white-space: nowrap; background: var(--ht-amber); border-color: var(--ht-amber); color: #18222e !important; }
.ht-header-cta:hover { background: var(--ht-amber-light); }

@media (max-width: 980px) {
  .ht-nav-toggle { display: block; }
  .ht-header-cta { display: none; }
  .ht-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #ffffff; border-bottom: 1px solid var(--ht-line);
    box-shadow: 0 10px 24px rgba(24, 34, 46, 0.08);
  }
  .ht-nav.is-open { display: block; }
  .ht-nav ul { flex-direction: column; padding: 8px 16px 16px; }
  .ht-nav ul ul { position: static; display: flex; border: none; box-shadow: none; background: transparent; padding-left: 16px; }
}

/* ============ Hero ============ */
.ht-hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(244, 246, 248, 0.97) 40%, rgba(244, 246, 248, 0.7)),
    var(--ht-panel);
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--ht-line);
}
.ht-hero .ht-container { padding-top: var(--ht-hero-pad); padding-bottom: var(--ht-hero-pad); }
.ht-hero h1 { max-width: 17ch; }
.ht-hero h1 em { font-style: normal; color: var(--ht-navy); border-bottom: 4px solid var(--ht-amber); }
.ht-hero p { max-width: 56ch; color: var(--ht-steel); font-size: 1.12rem; }
.ht-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* Spec strip under hero */
.ht-specstrip { background: #ffffff; border-bottom: 1px solid var(--ht-line); }
.ht-specstrip .ht-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
}
.ht-spec {
  padding: 26px 24px;
  border-left: 1px solid var(--ht-line);
}
.ht-spec:first-child { border-left: none; }
.ht-spec b {
  display: block; font-family: var(--ht-font-display);
  font-size: 2rem; font-weight: 700; color: var(--ht-navy); line-height: 1;
}
.ht-spec span {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ht-steel);
}
@media (max-width: 700px) {
  .ht-spec { border-left: none; border-top: 1px solid var(--ht-line); }
  .ht-spec:first-child { border-top: none; }
}

/* ============ Sections ============ */
.ht-section { padding: var(--ht-section-pad) 0; }
.ht-section--alt { background: var(--ht-panel); border-top: 1px solid var(--ht-line); border-bottom: 1px solid var(--ht-line); }
.ht-section-head { max-width: 720px; margin-bottom: 44px; }
.ht-section-head p { color: var(--ht-steel); }

.ht-about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.ht-about-grid img { border: 1px solid var(--ht-line); }
@media (max-width: 860px) { .ht-about-grid { grid-template-columns: 1fr; } }

/* ============ Spec-plate product cards (signature) ============ */
.ht-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}
.ht-plate {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--ht-line);
  box-shadow: 0 1px 3px rgba(24, 34, 46, 0.05);
  border-radius: var(--ht-radius);
  padding: 26px 26px 24px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ht-plate:hover {
  border-color: var(--ht-navy);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(24, 34, 46, 0.1);
}
/* corner rivets, brushed light metal */
.ht-plate::before, .ht-plate::after,
.ht-plate .ht-rivets::before, .ht-plate .ht-rivets::after {
  content: "";
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #cfd6dc, #97a1ab 70%);
  box-shadow: inset 0 0 2px rgba(24, 34, 46, 0.35);
}
.ht-plate::before { top: 9px; left: 9px; }
.ht-plate::after { top: 9px; right: 9px; }
.ht-plate .ht-rivets::before { bottom: 9px; left: 9px; }
.ht-plate .ht-rivets::after { bottom: 9px; right: 9px; }

.ht-plate-img {
  height: 190px; display: flex; align-items: center; justify-content: center;
  background: var(--ht-panel); border: 1px solid var(--ht-line); margin-bottom: 20px;
  overflow: hidden;
}
.ht-plate-img img { width: 100%; height: 100%; object-fit: cover; }
.ht-plate .ht-model {
  font-family: var(--ht-font-display);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--ht-amber-text); text-transform: uppercase;
}
.ht-plate h3 { margin: 6px 0 10px; }
.ht-plate h3 a { color: var(--ht-ink); }
.ht-plate h3 a:hover { color: var(--ht-navy); }
.ht-plate p { color: var(--ht-steel); font-size: 0.97rem; margin-bottom: 14px; }
.ht-plate .ht-more {
  font-family: var(--ht-font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem;
  color: var(--ht-navy);
}

/* Brands band */
.ht-brands {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  font-family: var(--ht-font-display);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ht-steel); font-size: 1.05rem;
}
.ht-brands span { border: 1px solid var(--ht-line); padding: 8px 16px; background: #ffffff; }

/* CTA band: navy, the one dark moment on the page */
.ht-cta {
  background:
    repeating-linear-gradient(-45deg, rgba(255, 185, 35, 0.07) 0 18px, transparent 18px 36px),
    var(--ht-navy);
  text-align: center;
  padding: 70px 0;
}
.ht-cta h2 { color: #ffffff; }
.ht-cta p { color: #c9d4e0; max-width: 60ch; margin: 0 auto 28px; }
.ht-cta .ht-btn { background: var(--ht-amber); border-color: var(--ht-amber); color: #18222e !important; }
.ht-cta .ht-btn:hover { background: var(--ht-amber-light); }

/* ============ Content / blog ============ */
.ht-content { padding: 70px 0; }
.ht-content-narrow { max-width: 820px; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content blockquote {
  border-left: 3px solid var(--ht-amber); margin: 1.5em 0; padding: 4px 0 4px 22px;
  color: var(--ht-steel);
}
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-meta { color: var(--ht-steel); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 26px; }

.ht-post-list { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ht-post-card {
  background: #ffffff; border: 1px solid var(--ht-line); padding: 26px;
  border-radius: var(--ht-radius);
  box-shadow: 0 1px 3px rgba(24, 34, 46, 0.05);
}
.ht-post-card:hover { border-color: var(--ht-navy); }
.ht-post-card h2 { font-size: 1.35rem; }
.ht-post-card h2 a { color: var(--ht-ink); }
.ht-post-card .ht-date { color: var(--ht-steel); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; }

.page-header h1 { margin-bottom: 10px; }

/* Pagination */
.navigation .nav-links, .ht-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.page-numbers {
  border: 1px solid var(--ht-line); padding: 8px 15px; color: var(--ht-ink);
  font-family: var(--ht-font-display); background: #ffffff;
}
.page-numbers.current, .page-numbers:hover { background: var(--ht-navy); color: #ffffff; border-color: var(--ht-navy); }

/* Forms */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="number"], textarea, select {
  width: 100%;
  background: #ffffff; border: 1px solid var(--ht-line); color: var(--ht-ink);
  padding: 12px 14px; font-family: var(--ht-font-body); font-size: 1rem;
  border-radius: var(--ht-radius);
}
input:focus, textarea:focus, select:focus { border-color: var(--ht-navy); }
input[type="submit"], button[type="submit"] {
  font-family: var(--ht-font-display); text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--ht-navy); color: #ffffff; border: none; padding: 13px 30px;
  font-weight: 600; cursor: pointer;
}

/* Comments */
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { border: 1px solid var(--ht-line); background: #ffffff; padding: 20px; margin-bottom: 16px; }

/* ============ Footer ============ */
.ht-footer { background: var(--ht-footer-bg); }
.ht-footer-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px;
  padding: 64px 0 48px;
}
@media (max-width: 860px) { .ht-footer-grid { grid-template-columns: 1fr; gap: 36px; } }
.ht-footer h4 {
  font-size: 1rem; letter-spacing: 0.16em; color: var(--ht-amber); margin-bottom: 18px;
}
.ht-footer, .ht-footer p { color: #b7c3d1; font-size: 0.95rem; }
.ht-footer ul { list-style: none; margin: 0; padding: 0; }
.ht-footer li { margin-bottom: 9px; }
.ht-footer a { color: #d6dee8; }
.ht-footer a:hover { color: var(--ht-amber); }
.ht-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 0.85rem; color: #8696a8;
}

/* ============ WP alignment helpers ============ */
.alignwide { max-width: 1180px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; max-width: none; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.wp-caption-text { font-size: 0.85rem; color: var(--ht-steel); }
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute !important;
}

/* Footer social links */
.ht-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px !important; }
.ht-socials li { margin: 0 !important; }
.ht-socials a {
  display: inline-block; border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 14px; font-size: 0.82rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-family: var(--ht-font-display);
  border-radius: var(--ht-radius);
}
.ht-socials a:hover { border-color: var(--ht-amber); color: var(--ht-amber); }

/* ============ v2.0 additions ============ */

/* Page title banners */
.ht-pagehead { padding: 44px 0 36px; }
.ht-pagehead h1 { margin-bottom: 0; }
.ht-pagehead--grey {
  background: var(--ht-panel);
  border-bottom: 1px solid var(--ht-line);
}
.ht-pagehead--navy {
  background:
    repeating-linear-gradient(-45deg, rgba(255, 185, 35, 0.06) 0 18px, transparent 18px 36px),
    var(--ht-navy);
}
.ht-pagehead--navy h1 { color: #ffffff; }
.ht-pagehead--navy .ht-crumbs, .ht-pagehead--navy .ht-crumbs a { color: #c9d4e0; }
.ht-pagehead--navy .ht-crumbs a:hover { color: var(--ht-amber); }
.ht-pagehead--navy .ht-eyebrow { background: transparent; border-color: rgba(255,255,255,0.3); color: var(--ht-amber); }
.ht-pagehead--navy .entry-meta { color: #c9d4e0; }
.ht-pagehead--center { text-align: center; }
.ht-pagehead .entry-meta { margin: 10px 0 0; }

/* Breadcrumbs */
.ht-crumbs {
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ht-steel); margin-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ht-crumbs a { color: var(--ht-steel); }
.ht-crumbs a:hover { color: var(--ht-link); }
.ht-crumb-current { color: var(--ht-ink); }

/* Header actions and search */
.ht-header-actions { display: flex; align-items: center; gap: 12px; }
.ht-search-toggle {
  background: none; border: 1px solid var(--ht-line); color: var(--ht-ink);
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--ht-radius);
}
.ht-search-toggle:hover, .ht-search-toggle[aria-expanded="true"] { border-color: var(--ht-navy); color: var(--ht-navy); }
.ht-searchbar {
  border-top: 1px solid var(--ht-line);
  background: var(--ht-panel);
  padding: 16px 0;
}
.ht-search-form { display: flex; gap: 10px; max-width: 640px; }
.ht-search-form input[type="search"] { flex: 1; }
.ht-search-form button {
  font-family: var(--ht-font-display); text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--ht-navy); color: #ffffff; border: none; padding: 0 26px;
  font-weight: 600; cursor: pointer; border-radius: var(--ht-radius);
}
.ht-search-form button:hover { background: var(--ht-navy-dark); }

/* Sidebar layout */
.ht-layout.has-sidebar {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px;
  align-items: start;
}
@media (max-width: 960px) { .ht-layout.has-sidebar { grid-template-columns: 1fr; } }
.ht-main { min-width: 0; }
.ht-content-narrow.ht-main, .ht-main.ht-content-narrow { max-width: var(--ht-narrow); }
.ht-sidebar .ht-widget {
  background: #ffffff; border: 1px solid var(--ht-line); padding: 22px;
  margin-bottom: 22px; border-radius: var(--ht-radius);
}
.ht-sidebar .ht-widget-title {
  font-size: 1rem; letter-spacing: 0.14em; color: var(--ht-navy); margin-bottom: 14px;
}
.ht-sidebar ul { list-style: none; margin: 0; padding: 0; }
.ht-sidebar li { padding: 6px 0; border-bottom: 1px solid var(--ht-line); }
.ht-sidebar li:last-child { border-bottom: none; }

/* Content width inside narrow container */
.ht-content-narrow { max-width: var(--ht-narrow); }

/* Single product quote box */
.ht-product-cta {
  margin-top: 44px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 185, 35, 0.06) 0 18px, transparent 18px 36px),
    var(--ht-navy);
  padding: 36px; border-radius: var(--ht-radius);
}
.ht-product-cta h3 { color: #ffffff; }
.ht-product-cta p { color: #c9d4e0; }

/* Related products */
.ht-related { margin-top: 64px; }
.ht-related h2 { margin-bottom: 28px; }

/* Archive intro */
.ht-archive-intro { max-width: 720px; color: var(--ht-steel); margin: -8px 0 36px; }

/* Back to top */
.ht-totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 46px; height: 46px;
  background: var(--ht-navy); color: #ffffff; border: none;
  font-size: 1.2rem; cursor: pointer; border-radius: var(--ht-radius);
  box-shadow: 0 4px 14px rgba(24, 34, 46, 0.25);
}
.ht-totop:hover { background: var(--ht-navy-dark); }

/* Stacked header layout */
.ht-header-stacked .ht-masthead .ht-container {
  flex-direction: column; gap: 12px; padding-top: 18px;
}
.ht-header-stacked .ht-brand { justify-content: center; }
.ht-header-stacked .ht-header-actions { position: absolute; right: 24px; top: 18px; }
.ht-header-stacked .ht-masthead { position: relative; }
@media (max-width: 980px) {
  .ht-header-stacked .ht-masthead .ht-container { flex-direction: row; }
  .ht-header-stacked .ht-header-actions { position: static; }
}

/* Dark hero variant */
.ht-hero--dark {
  background:
    linear-gradient(100deg, rgba(15, 40, 69, 0.95) 35%, rgba(15, 40, 69, 0.6)),
    var(--ht-navy);
  background-size: cover; background-position: center;
  border-bottom: none;
}
.ht-hero--dark h1 { color: #ffffff; }
.ht-hero--dark h1 em { color: var(--ht-amber); border-bottom-color: var(--ht-amber); }
.ht-hero--dark p { color: #c9d4e0; }
.ht-hero--dark .ht-eyebrow { background: transparent; border-color: rgba(255,255,255,0.3); color: var(--ht-amber); }
.ht-hero--dark .ht-btn--ghost { color: #ffffff !important; border-color: rgba(255,255,255,0.5); }
.ht-hero--dark .ht-btn--ghost:hover { border-color: var(--ht-amber); background: rgba(255,255,255,0.06); }
.ht-hero--dark .ht-btn { background: var(--ht-amber); border-color: var(--ht-amber); color: #18222e !important; }

/* ============ Live search suggestions ============ */
.ht-search-form { position: relative; }
.ht-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 90;
  background: #ffffff; border: 1px solid var(--ht-line);
  box-shadow: 0 14px 34px rgba(24, 34, 46, 0.14);
  border-radius: var(--ht-radius);
  max-height: 420px; overflow-y: auto;
}
.ht-suggest-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border-bottom: 1px solid var(--ht-line);
  color: var(--ht-ink);
}
.ht-suggest-item:hover, .ht-suggest-item.is-active { background: var(--ht-panel); }
.ht-suggest-item img, .ht-suggest-ph {
  width: 44px; height: 44px; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--ht-line); background: var(--ht-panel);
  border-radius: var(--ht-radius);
}
.ht-suggest-body { display: flex; flex-direction: column; min-width: 0; }
.ht-suggest-title {
  font-weight: 600; font-size: 0.97rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ht-suggest-title mark { background: transparent; color: var(--ht-amber-text); padding: 0; }
.ht-suggest-type {
  font-family: var(--ht-font-display);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ht-steel);
}
.ht-suggest-all, .ht-suggest-empty {
  display: block; padding: 12px 14px; text-align: center;
  font-family: var(--ht-font-display); font-size: 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ht-suggest-all { color: var(--ht-navy); font-weight: 600; }
.ht-suggest-all:hover, .ht-suggest-all.is-active { background: var(--ht-panel); }
.ht-suggest-empty { color: var(--ht-steel); }

/* ============ v2.1 additions ============ */

/* Per-element fonts */
.ht-nav a { font-family: var(--ht-font-nav, var(--ht-font-display)); }
.ht-btn, .wp-block-button__link,
input[type="submit"], button[type="submit"],
.ht-search-form button { font-family: var(--ht-font-btn, var(--ht-font-display)) !important; }
.ht-footer h4, .ht-socials a { font-family: var(--ht-font-footer, var(--ht-font-display)); }

/* Topbar socials */
.ht-topbar-right { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ht-topbar-social {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  border: 1px solid rgba(255,255,255,0.3); padding: 1px 7px; border-radius: var(--ht-radius);
}
.ht-topbar-social:hover { border-color: var(--ht-amber); }
.ht-topbar-sep { color: rgba(255,255,255,0.35); margin: 0 2px; }

/* Live search suggestions */
.ht-search-form { position: relative; }
.ht-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 90;
  background: #ffffff; border: 1px solid var(--ht-line);
  box-shadow: 0 12px 28px rgba(24, 34, 46, 0.14);
  max-height: 320px; overflow-y: auto; border-radius: var(--ht-radius);
}
.ht-suggestions a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--ht-line);
  color: var(--ht-ink);
}
.ht-suggestions a:last-child { border-bottom: none; }
.ht-suggestions a:hover, .ht-suggestions a.is-hover { background: var(--ht-panel); color: var(--ht-link); }
.ht-suggestions .ht-sg-type {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ht-steel); border: 1px solid var(--ht-line); padding: 2px 8px; flex-shrink: 0;
}
.ht-suggestions .ht-sg-empty { padding: 12px 14px; color: var(--ht-steel); font-size: 0.92rem; }

/* Floating WhatsApp / Call buttons */
.ht-float {
  position: fixed; bottom: 22px; z-index: 80;
  display: flex; flex-direction: column; gap: 12px;
}
.ht-float--left { left: 22px; }
.ht-float--right { right: 22px; bottom: 80px; }
.ht-float-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #ffffff !important; box-shadow: 0 6px 18px rgba(24, 34, 46, 0.3);
  transition: transform 0.15s ease;
}
.ht-float-btn:hover { transform: translateY(-2px); }
.ht-float-wa { background: #25d366; }
.ht-float-call { background: var(--ht-navy); }

/* Carousel */
/* =====================================================================
   CAROUSEL — image IS the hero (gmmco-style full-bleed)
   UI controls overlay on top. No visible container/box.
   ===================================================================== */

.ht-carousel {
  position: relative;
  overflow: hidden;
  /* Fixed heights per breakpoint — image fills 100% */
  height: 560px;
  background: var(--ht-navy);
}
@media (max-width: 1200px) { .ht-carousel { height: 500px; } }
@media (max-width: 1024px) { .ht-carousel { height: 440px; } }
@media (max-width: 768px)  { .ht-carousel { height: 75vh;  min-height: 380px; max-height: 650px; } }
@media (max-width: 480px)  { .ht-carousel { height: 80vh;  min-height: 340px; } }

/* Each slide: absolutely fills the carousel, image covers 100% */
.ht-slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0;
  transition: opacity 0.65s ease;

  /* THE KEY: image IS the background, cover+center = no empty space */
  background-image: var(--slide-bg-d);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--ht-navy); /* fallback while image loads */

  display: flex;
  align-items: center;
}

/* Mobile: swap to portrait crop */
@media (max-width: 768px) {
  .ht-slide {
    background-image: var(--slide-bg-m, var(--slide-bg-d));
    align-items: flex-end;
  }
}

/* Dark gradient so text stays readable over ANY image */
.ht-slide::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Even semi-transparent overlay across full slide for centered text */
  background: linear-gradient(
    95deg,
    rgba(10, 17, 28, 0.80) 0%,
    rgba(10, 17, 28, 0.55) 40%,
    rgba(10, 17, 28, 0.10) 70%,
    rgba(10, 17, 28, 0.00) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Mobile: slightly heavier overlay for readability */
@media (max-width: 768px) {
  .ht-slide::before {
    background: linear-gradient(to top, rgba(10,17,28,0.88) 0%, rgba(10,17,28,0.50) 50%, rgba(10,17,28,0.05) 100%);
  }
}

.ht-slide.is-active { opacity: 1; } /* stays position:absolute — fills carousel fully */

/* ── Slide inner: content overlaid on top of background ── */
.ht-slide-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-bottom: 40px;
  box-sizing: border-box;
  gap: 0;
}

/* Split layout only when foreground product PNG is set */
.ht-slide-inner--split {
  justify-content: space-between;
}

/* ── Text content ── */
.ht-slide-content {
  max-width: 620px;
  text-align: left;
}
.ht-slide-eyebrow {
  display: inline-block;
  font-family: var(--ht-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ht-amber);
  margin-bottom: 10px;
  border-bottom: 2px solid var(--ht-amber);
  padding-bottom: 4px;
}
.ht-slide-title {
  font-size: clamp(1.9rem, 3.5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.ht-slide-text {
  color: rgba(255,255,255,0.85);
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 0 24px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.ht-slide-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

/* ── Optional foreground product PNG ──
   Only rendered when img_product field is set.
   object-fit:contain = never crops, never stretches. */
.ht-slide-product-img {
  flex: 0 0 42%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 70px;
  box-sizing: border-box;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
  animation: ht-float 5s ease-in-out infinite;
}
.ht-slide-product-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@keyframes ht-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* ── Arrows overlaid on top ── */
.ht-car-arrow {
  position: absolute;
  top: calc(50% - 33px);
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,0.4);
  background: rgba(10,17,28,0.45);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ht-car-arrow:hover { background: var(--ht-amber); border-color: var(--ht-amber); color: #18222e; }
.ht-car-prev { left: 14px; }
.ht-car-next { right: 14px; }

/* ── Thumbnail strip overlaid at bottom ── */
/* Thumbnail strip hidden — replaced by dot indicators */
.ht-car-thumbs { display: none; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .ht-slide-inner,
  .ht-slide-inner--split {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: 58px;
    padding-top: 16px;
    gap: 0;
  }
  /* Hide foreground PNG on mobile — background image is enough */
  .ht-slide-product-img { display: none; }
  .ht-slide-content {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .ht-slide-title  { font-size: clamp(1.5rem, 6.5vw, 2.2rem); }
  .ht-slide-text   { font-size: 0.9rem; margin-bottom: 14px; max-width: 36ch; }
  .ht-car-prev     { left: 4px; }
  .ht-car-next     { right: 4px; }
}
@media (max-width: 480px) {
  .ht-slide-text { display: none; }
}


/* ── Dot indicators (replaces thumbnail strip) ── */
.ht-car-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
}
.ht-car-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.ht-car-dot.is-active {
  background: var(--ht-amber);
  transform: scale(1.35);
}
.ht-car-dot:hover { background: rgba(255,255,255,0.75); }

/* Video section */
.ht-video-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #0e1013; border: 1px solid var(--ht-line); border-radius: var(--ht-radius);
  overflow: hidden;
}
.ht-video-wrap iframe, .ht-video-wrap video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Reviews */
.ht-reviews-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px;
}
.ht-review {
  background: #ffffff; border: 1px solid var(--ht-line); padding: 26px;
  border-radius: var(--ht-radius); box-shadow: 0 1px 3px rgba(24, 34, 46, 0.05);
}
.ht-stars { color: var(--ht-amber-text); letter-spacing: 3px; margin-bottom: 12px; font-size: 1.05rem; }
.ht-review p { color: var(--ht-text); font-size: 0.98rem; }
.ht-review-who b { display: block; color: var(--ht-ink); font-family: var(--ht-font-display); text-transform: uppercase; letter-spacing: 0.05em; }
.ht-review-who span { color: var(--ht-steel); font-size: 0.88rem; }

/* Map */
.ht-map-wrap {
  border: 1px solid var(--ht-line); border-radius: var(--ht-radius); overflow: hidden;
  width: 100%; min-height: 300px;
}
.ht-map-wrap iframe { display: block; width: 100%; height: 100%; min-height: 300px; }

/* ============ v2.2 additions ============ */

/* Announcement bar */
.ht-announce { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; }
.ht-announce .ht-container { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 9px; padding-bottom: 9px; position: relative; flex-wrap: wrap; }
.ht-announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.ht-announce-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; font-size: 14px; cursor: pointer; padding: 4px 6px; opacity: 0.7; }
.ht-announce-close:hover { opacity: 1; }

/* Language switcher */
.ht-langs { position: relative; display: inline-flex; margin-left: 12px; }
.ht-langs-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: inherit; font: inherit; font-size: 0.82rem; padding: 4px 10px; cursor: pointer; }
.ht-header-actions .ht-langs-btn { background: var(--ht-panel); border-color: var(--ht-line); color: var(--ht-ink); }
.ht-langs-caret { font-size: 0.7em; }
.ht-langs-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 140px; background: #ffffff; border: 1px solid var(--ht-line); box-shadow: 0 10px 28px rgba(16,28,42,0.16); list-style: none; margin: 0; padding: 6px 0; z-index: 220; }
.ht-langs-menu li a { display: block; padding: 8px 16px; color: var(--ht-ink); font-size: 0.92rem; }
.ht-langs-menu li a:hover { background: var(--ht-panel); color: var(--ht-navy); }
.ht-topbar .ht-langs-menu { text-align: left; }

/* Footer banner */
.ht-fbanner { display: flex; align-items: center; background-size: cover; background-position: center; text-decoration: none; }
.ht-fbanner-inner { padding-top: 36px; padding-bottom: 36px; }
.ht-fbanner h3 { color: #ffffff; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 8px; }
.ht-fbanner p { color: rgba(255,255,255,0.88); max-width: 640px; margin: 0 0 18px; }
.ht-fbanner .ht-btn { margin: 0; }

/* Client logo strip */
.ht-logostrip { background: var(--ht-bg); border-top: 1px solid var(--ht-line); border-bottom: 1px solid var(--ht-line); padding: 34px 0; overflow: hidden; }
.ht-logostrip-title { text-align: center; color: var(--ht-steel); font-family: var(--ht-font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; margin: 0 0 22px; }
.ht-logostrip-track { display: flex; gap: 60px; align-items: center; }
.ht-logostrip-row { display: flex; gap: 60px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
.ht-logostrip-row img { max-height: 54px; width: auto; object-fit: contain; }
.ht-logostrip--gray .ht-logostrip-row img { filter: grayscale(1); opacity: 0.65; transition: filter 0.25s, opacity 0.25s; }
.ht-logostrip--gray .ht-logostrip-row img:hover { filter: grayscale(0); opacity: 1; }
.ht-logostrip--scroll .ht-logostrip-track { width: max-content; animation: ht-logoscroll 28s linear infinite; }
.ht-logostrip--scroll .ht-logostrip-row { flex-wrap: nowrap; width: max-content; }
.ht-logostrip--scroll:hover .ht-logostrip-track { animation-play-state: paused; }
@keyframes ht-logoscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ht-logostrip--scroll .ht-logostrip-track { animation: none; width: 100%; } .ht-logostrip--scroll .ht-logostrip-row { flex-wrap: wrap; width: 100%; } .ht-logostrip--scroll .ht-logostrip-row[aria-hidden] { display: none; } }

/* FAQ accordion */
.ht-faq { max-width: 820px; margin: 0 auto; }
.ht-faq-item { border: 1px solid var(--ht-line); background: #ffffff; margin-bottom: 12px; }
.ht-faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 18px 20px; font-family: var(--ht-font-display); font-size: 1.05rem; font-weight: var(--ht-h-weight); letter-spacing: 0.03em; color: var(--ht-ink); }
.ht-faq-q:hover { color: var(--ht-navy); }
.ht-faq-icon { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; background: var(--ht-panel); color: var(--ht-navy); font-size: 18px; font-weight: 700; transition: transform 0.2s; }
.ht-faq-item.is-open .ht-faq-icon { transform: rotate(45deg); background: var(--ht-amber); color: var(--ht-ink); }
.ht-faq-a { padding: 0 20px 18px; }
.ht-faq-a p { margin: 0; color: var(--ht-text); }

/* Scroll progress */
.ht-scrollbar { position: fixed; top: 0; left: 0; height: 4px; width: 0; z-index: 400; transition: width 0.08s linear; }

/* Preloader */
.ht-preloader { position: fixed; inset: 0; z-index: 500; background: var(--ht-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; transition: opacity 0.4s; }
.ht-preloader.is-done { opacity: 0; pointer-events: none; }
.ht-preloader img { max-height: 64px; width: auto; }
.ht-preloader-name { font-family: var(--ht-font-display); font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ht-ink); }
.ht-preloader-bar { width: 140px; height: 4px; background: var(--ht-line); position: relative; overflow: hidden; }
.ht-preloader-bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--ht-amber); animation: ht-preload 1s ease-in-out infinite; }
@keyframes ht-preload { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .ht-preloader { display: none; } }

/* Table responsive scroll wrapper */
.ht-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
.ht-table-scroll table { margin: 0; min-width: 560px; }

/* 404 image */
.ht-404-img { max-height: 300px; width: auto; margin: 0 auto 8px; }

/* Footer column variants */
@media (min-width: 861px) {
	.ht-footer--cols2 .ht-footer-grid { grid-template-columns: 1.4fr 1fr; }
	.ht-footer--cols4 .ht-footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; }
}

/* Product card actions: direct link + WhatsApp quote */
.ht-plate-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; }
.ht-plate { display: flex; flex-direction: column; }
.ht-wa-quote { display: inline-flex; align-items: center; gap: 7px; background: #25d366; color: #ffffff !important; font-family: var(--ht-font-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 14px; line-height: 1; border-radius: var(--ht-radius); transition: background 0.2s, transform 0.15s; }
.ht-wa-quote:hover { background: #1eb957; transform: translateY(-1px); }
.ht-wa-quote svg { flex: 0 0 auto; }

/* Google Translate language widget */
.ht-gt { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }
.ht-gt-icon { display: inline-flex; color: var(--ht-amber); }
.ht-header-actions .ht-gt-icon { color: var(--ht-navy); }
.ht-gt .goog-te-gadget { font-size: 0 !important; color: transparent !important; }
.ht-gt .goog-te-gadget .goog-te-combo {
	font-size: 13px; font-family: var(--ht-font-body);
	padding: 4px 6px; margin: 0; max-width: 132px;
	background: #ffffff; color: #18222e;
	border: 1px solid rgba(255,255,255,0.35); border-radius: var(--ht-radius);
	cursor: pointer;
}
.ht-header-actions .ht-gt .goog-te-combo { border-color: var(--ht-line); }
.ht-gt .goog-te-gadget > span, .ht-gt .goog-logo-link { display: none !important; }
/* Kill Google's top banner + tooltips so layout never jumps */
.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }
font[style] { background: none !important; box-shadow: none !important; }

/* Product carousel: whole slide clickable */
/* .ht-slide-cover removed — no longer used */
/* old slide container rules removed */
.ht-car-arrow, .ht-car-dots { z-index: 5; }

/* ============ v2.6 additions ============ */

/* Banner / page header with image */
.ht-pagehead {
  display: flex; align-items: center;
  background-size: cover; background-position: center;
  transition: background 0.3s;
}
.ht-pagehead .ht-container { padding-top: 28px; padding-bottom: 28px; }
.ht-pagehead h1 { margin: 4px 0 0; }
.ht-pagehead .ht-eyebrow { opacity: 0.8; }
.ht-pagehead .ht-breadcrumbs { opacity: 0.75; font-size: 0.85rem; margin-bottom: 6px; }
.ht-pagehead--image h1,
.ht-pagehead--gradient h1 { text-shadow: 0 1px 4px rgba(0,0,0,0.35); }

/* Footer logo */
.ht-footer-logo { margin-bottom: 14px; }
.ht-footer-logo img { max-height: 56px; width: auto; filter: brightness(0) invert(1); }
.ht-footer-logo .custom-logo-link img { max-height: 56px; width: auto; filter: brightness(0) invert(1); }
.ht-footer-extra { color: var(--ht-steel); font-size: 0.9rem; margin-top: 12px; }
.ht-footer-col-img { margin-top: 16px; }
.ht-footer-col-img img { max-width: 100%; max-height: 120px; object-fit: contain; border-radius: var(--ht-radius); opacity: 0.9; }
.ht-footer-badges { display: flex; align-items: center; }
.ht-footer-badges img { max-height: 32px; width: auto; opacity: 0.75; filter: brightness(0) invert(1); }

/* Card styles */
.ht-plate.ht-card--shadow { border: 0; box-shadow: 0 4px 24px rgba(0,0,0,0.10); }
.ht-plate.ht-card--flat { border: 0; box-shadow: none; background: var(--ht-panel); }
.ht-plate.ht-card--industrial { border: 0; border-left: 4px solid var(--ht-amber); box-shadow: 0 2px 12px rgba(0,0,0,0.07); }

/* Dividers */
.ht-section--wave-top { position: relative; }
.ht-section--wave-top::before { content: ""; display: block; height: 48px; background: inherit; clip-path: ellipse(55% 100% at 50% 0%); position: absolute; top: -48px; left: 0; right: 0; }
.ht-section--angle-top { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); margin-top: -40px; padding-top: 60px !important; }

/* Link underline variants */
.ht-link-none .entry-content a { text-decoration: none; }
.ht-link-always .entry-content a { text-decoration: underline; text-underline-offset: 3px; }

/* Button style variants */
.ht-btn--outline { background: transparent !important; border: 2px solid var(--ht-navy); color: var(--ht-navy) !important; }
.ht-btn--outline:hover { background: var(--ht-navy) !important; color: #fff !important; }
.ht-btn--pill { border-radius: 999px !important; }

/* Reading time */
.ht-reading-time { font-size: 0.82rem; color: var(--ht-steel); margin-left: 10px; }
.ht-reading-time::before { content: "· "; }

/* Social share */
.ht-share { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--ht-line); }
.ht-share a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 0.82rem; font-weight: 600; border-radius: var(--ht-radius); text-decoration: none; }
.ht-share-wa { background: #25d366; color: #fff !important; }
.ht-share-li { background: #0077b5; color: #fff !important; }
.ht-share-copy { background: var(--ht-panel); color: var(--ht-ink) !important; }

/* Sticky mobile CTA bar */
.ht-sticky-cta { display: none; }
@media (max-width: 768px) {
  .ht-sticky-cta {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 120; background: var(--ht-navy); border-top: 3px solid var(--ht-amber);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
  }
  .ht-sticky-cta a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 8px; font-family: var(--ht-font-display); font-size: 0.85rem;
    font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    text-decoration: none; color: #fff;
  }
  .ht-sticky-cta a:first-child { background: var(--ht-amber); color: #18222e; }
  .ht-sticky-cta a + a { border-left: 1px solid rgba(255,255,255,0.15); }
}

/* ── Subpages Navigation Grid ── */
.ht-subpages { margin-top: 48px; }
.ht-subpages__title {
  font-family: var(--ht-font-display);
  font-size: 1.3rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ht-navy);
  border-bottom: 3px solid var(--ht-amber); padding-bottom: 10px;
  margin-bottom: 24px;
}
.ht-subpages__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.ht-subpage-card {
  display: flex; flex-direction: column;
  border: 1px solid #e2e8f0; border-radius: 6px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.ht-subpage-card:hover {
  box-shadow: 0 6px 24px rgba(20,54,92,0.13);
  transform: translateY(-3px);
}
.ht-subpage-card__img {
  height: 140px;
  background: var(--ht-navy) center/cover no-repeat;
}
.ht-subpage-card__img--blank {
  background: linear-gradient(135deg, var(--ht-navy) 0%, #1e4a7a 100%);
}
.ht-subpage-card__body {
  padding: 16px 18px; flex: 1;
}
.ht-subpage-card__body h3 {
  font-family: var(--ht-font-display);
  font-size: 1rem; font-weight: 700; margin: 0 0 8px;
  color: var(--ht-navy); letter-spacing: 0.03em;
}
.ht-subpage-card__body p {
  font-size: 0.88rem; color: #5a6a7a; margin: 0; line-height: 1.5;
}
@media (max-width: 600px) {
  .ht-subpages__grid { grid-template-columns: 1fr; }
}

/* ── Carousel Quote CTA button ── */
.ht-btn--outline-white {
  background: transparent;
  border: 2px solid #fff;
  color: #fff !important;
  margin-left: 12px;
}
.ht-btn--outline-white:hover {
  background: rgba(255,255,255,0.15);
}
@media (max-width: 600px) {
  .ht-btn--outline-white { margin-left: 0; margin-top: 10px; }
}

/* ── Floating button tooltips ── */
.ht-float-btn { position: relative; overflow: visible; }

.ht-float-tip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  white-space: nowrap;
  background: #18222e;
  color: #fff;
  font-size: 0.78rem;
  font-family: var(--ht-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10;
}

/* Arrow on the tip bubble */
.ht-float-tip::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
}

/* Position based on button side */
.ht-float--left .ht-float-tip {
  left: calc(100% + 10px);
}
.ht-float--left .ht-float-tip::after {
  left: -10px;
  border-right-color: #18222e;
}

.ht-float--right .ht-float-tip {
  right: calc(100% + 10px);
}
.ht-float--right .ht-float-tip::after {
  right: -10px;
  border-left-color: #18222e;
}

/* Show on hover — desktop */
@media (hover: hover) {
  .ht-float-btn.has-tip:hover .ht-float-tip {
    opacity: 1;
  }
  .ht-float--left .ht-float-btn.has-tip:hover .ht-float-tip {
    transform: translateY(-50%) translateX(4px);
  }
  .ht-float--right .ht-float-btn.has-tip:hover .ht-float-tip {
    transform: translateY(-50%) translateX(-4px);
  }
}

/* Mobile: show only when button is focused/tapped via JS class */
@media (hover: none) {
  .ht-float-btn.has-tip.tip-visible .ht-float-tip {
    opacity: 1;
  }
}

/* ── Clickable product card body link ── */
.ht-plate-body-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ht-plate-body-link:hover { color: inherit; text-decoration: none; }