/* ==========================================================================
   Protech — Design System Stylesheet
   See /design-system.md for rationale behind every token & pattern.
   ========================================================================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700;800&display=swap');

/* ---- Tokens ---- */
:root {
   /* Re-tuned to the actual Protech logo mark: deep indigo + brand blue from the
     hexagon symbol, brand red from the "PRO" wordmark. See design-system.md §2. */
   --color-primary: #170B5E;
   --color-primary-2: #2E0BA2;
   --color-secondary: #0B72C4;
   --color-cyan: #00ABEF;
   --color-accent: #DD0100;
   --color-accent-dark: #B40100;
   --color-success: #1E9E5A;
   --color-bg: #F7F9FC;
   --color-surface: #FFFFFF;
   --color-ink: #101828;
   --color-muted: #5B6472;
   --color-border: #E4E9F1;

   --font-display: 'Sora', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;

   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
   --space-7: 48px;
   --space-8: 64px;
   --space-9: 112px;
   --space-10: 144px;

   --radius-sm: 8px;
   --radius-md: 16px;
   --radius-lg: 24px;
   --radius-pill: 999px;

   --shadow-sm: 0 2px 8px rgba(23, 11, 94, .07);
   --shadow-md: 0 8px 24px rgba(23, 11, 94, .12);
   --shadow-lg: 0 20px 48px rgba(23, 11, 94, .18);

   --ease-out: cubic-bezier(.22, .61, .36, 1);
   --dur-fast: 180ms;
   --dur-med: 480ms;

   --container: 1240px;
   --gutter: clamp(20px, 5vw, 72px);
   --header-h: 80px;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
   }
}

body {
   margin: 0;
   font-family: var(--font-body);
   color: var(--color-ink);
   background: var(--color-bg);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
}

img {
   max-width: 100%;
   display: block;
}

a {
   color: inherit;
   text-decoration: none;
}

ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

button {
   font: inherit;
   cursor: pointer;
}

input,
textarea,
select {
   font: inherit;
}

h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   line-height: 1.2;
   margin: 0 0 var(--space-4);
   color: var(--color-primary);
   font-weight: 700;
}

p {
   margin: 0 0 var(--space-4);
   max-width: 68ch;
   color: var(--color-muted);
}

h1 {
   font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
   font-weight: 800;
   letter-spacing: -0.02em;
}

h2 {
   font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
   letter-spacing: -0.015em;
}

h3 {
   font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem);
}

.container {
   max-width: var(--container);
   margin-inline: auto;
   padding-inline: var(--gutter);
}

section {
   padding-block: var(--space-9);
}

@media (max-width:768px) {
   section {
      padding-block: var(--space-7);
   }
}

:focus-visible {
   outline: 2px solid var(--color-secondary);
   outline-offset: 3px;
   border-radius: 4px;
}

/* skip link */
.skip-link {
   position: absolute;
   left: -999px;
   top: 0;
   background: var(--color-accent);
   color: #fff;
   padding: 12px 20px;
   z-index: 200;
   border-radius: 0 0 8px 0;
}

.skip-link:focus {
   left: 0;
}

/* ---- Utilities ---- */
/* ---- Section Eyebrow — Editorial Overline Label ----
   Replaces the generic pill badge (dot + light-blue pill) with a structured
   overline treatment: a short gradient rule sits above the label text.
   The gradient uses all three brand colors (red→indigo→blue) so even a
   plain word like "Sales" carries the full brand identity.
   No background fill, no border-radius, no pill shape — pure typography. */
.eyebrow {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: .72rem;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: var(--color-primary);
   background: none;
   padding: 0;
   border-radius: 0;
   margin-bottom: var(--space-5);
}

/* The overline rule — brand gradient, short and precise. Width is fixed (not
   100%) so it reads as a deliberate graphic element rather than a text underline
   that changed sides. Works equally at any text length: "AMC" or "Consumables Supply". */
.eyebrow::before {
   content: '';
   width: 32px;
   height: 3px;
   border-radius: 2px;
   background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 55%, var(--color-secondary) 100%);
   flex-shrink: 0;
}

/* Center-aligned sections: center the overline too */
.section-head.center .eyebrow,
.text-center .eyebrow {
   align-items: center;
}

/* On-dark variant (e.g. the stats gradient panel) — white text, muted rule */
.eyebrow.on-dark {
   color: rgba(255, 255, 255, .92);
}

.eyebrow.on-dark::before {
   background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35));
}

.text-center {
   text-align: center;
}

.text-center p {
   margin-inline: auto;
}

.muted {
   color: var(--color-muted);
}

.section-head {
   max-width: 680px;
   margin-bottom: var(--space-8);
}

.section-head.center {
   margin-inline: auto;
   text-align: center;
}

.grid {
   display: grid;
   gap: var(--space-6);
}

.cols-2 {
   grid-template-columns: repeat(2, 1fr);
}

.cols-3 {
   grid-template-columns: repeat(3, 1fr);
}

.cols-4 {
   grid-template-columns: repeat(4, 1fr);
}

.cols-5 {
   grid-template-columns: repeat(5, 1fr);
}

@media (max-width:1024px) {
   .cols-4 {
      grid-template-columns: repeat(2, 1fr);
   }

   .cols-3 {
      grid-template-columns: repeat(2, 1fr);
   }

   .cols-5 {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width:640px) {

   .cols-2,
   .cols-3,
   .cols-4,
   .cols-5 {
      grid-template-columns: 1fr;
   }
}

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 48px;
   padding: 0 28px;
   border-radius: var(--radius-sm);
   font-weight: 600;
   font-size: .95rem;
   border: 2px solid transparent;
   transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
   white-space: nowrap;
}

.btn:active {
   transform: scale(.97);
}

.btn-primary {
   background: linear-gradient(135deg, #ED1C1C, var(--color-accent) 55%, var(--color-accent-dark));
   color: #fff;
   box-shadow: 0 6px 16px rgba(221, 1, 0, .28);
}

.btn-primary:hover {
   box-shadow: 0 10px 22px rgba(221, 1, 0, .36);
   transform: translateY(-2px);
}

.btn-outline {
   border-color: rgba(255, 255, 255, .5);
   color: #fff;
}

.btn-outline:hover {
   background: rgba(255, 255, 255, .12);
   transform: translateY(-2px);
}

.btn-outline.on-light {
   border-color: var(--color-primary);
   color: var(--color-primary);
}

.btn-outline.on-light:hover {
   background: var(--color-primary);
   color: #fff;
}

.btn-ghost {
   color: var(--color-secondary);
   padding: 0;
   min-height: auto;
   font-weight: 600;
   border-bottom: 2px solid transparent;
   border-radius: 0;
}

.btn-ghost:hover {
   border-color: var(--color-secondary);
}

.btn-block {
   width: 100%;
}

.btn svg {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
}

/* ---- Header ---- */
/* Header topbar — the dealer credentials from the original signage/logo lockup
   (MFD Sales & Service · full solutions · authorized dealer), carried as a slim
   strip above the sticky nav rather than crammed into it. It's in normal flow
   (scrolls away with the page) so the sticky nav below it keeps its own fixed
   height and never has to account for it. */
.header-topbar {
   background: var(--color-primary);
   color: rgba(255, 255, 255, .88);
}

.header-topbar .container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
   flex-wrap: wrap;
   padding-block: 9px;
}

.header-topbar-item {
   display: flex;
   align-items: center;
   gap: 7px;
   white-space: nowrap;
   font-size: .74rem;
   font-weight: 600;
   letter-spacing: .01em;
}

.header-topbar-item svg {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
   color: rgba(255, 255, 255, .65);
}

.header-topbar-item.trust svg {
   color: var(--color-accent);
}

.header-topbar-divider {
   width: 1px;
   height: 12px;
   background: rgba(255, 255, 255, .22);
}

@media (max-width:900px) {

   .header-topbar-item.hide-tablet,
   .header-topbar-divider.hide-tablet {
      display: none;
   }
}

@media (max-width:640px) {
   .header-topbar .container {
      padding-block: 7px;
   }

   .header-topbar-item.hide-mobile,
   .header-topbar-divider.hide-mobile {
      display: none;
   }

   .header-topbar-item.trust {
      white-space: normal;
      text-align: center;
      font-size: .7rem;
   }
}

/* Note: backdrop-filter is applied via ::before (not on .site-header itself) because
   filter/backdrop-filter on an element makes it a containing block for fixed-position
   descendants — which would trap the fixed, full-viewport mobile .nav-links panel
   inside the header's own box instead of covering the screen. */
/* Fixed height at all times — a shrink-on-scroll here caused the header/content to
   thrash near the scroll threshold (toggling scrolled on/off as the reflow it caused
   nudged the page by a few px), which read as a visible "vibration". Only background,
   border and shadow change on scroll now; layout never does. */
.site-header {
   position: sticky;
   top: 0;
   z-index: 100;
   border-bottom: 1px solid transparent;
   transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.site-header::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   background: rgba(247, 249, 252, .85);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   transition: background var(--dur-fast) var(--ease-out);
}

.site-header.scrolled {
   border-color: var(--color-border);
   box-shadow: var(--shadow-sm);
}

.site-header.scrolled::before {
   background: rgba(247, 249, 252, .96);
}

.nav-wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: var(--header-h);
}

.brand {
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--color-primary);
}

.brand .mark {
   width: 42px;
   height: 42px;
   flex-shrink: 0;
   object-fit: contain;
}

.mark-chip {
   width: 42px;
   height: 42px;
   flex-shrink: 0;
   border-radius: 11px;
   background: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 5px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.mark-chip img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.brand-text {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.brand .wordmark {
   height: 20px;
   width: auto;
   display: block;
   object-fit: contain;
   object-position: left center;
}

/* The two-line "designation" under the wordmark — always visible (this is
   inside the sticky nav, unlike .header-topbar above it which scrolls away).
   Kept to two short, high-value lines rather than reproducing the full
   three-line lockup: at nav height/width this has to survive down to a
   narrow phone next to a hamburger button, so it stays legible instead of
   wrapping or forcing the header taller. The topbar carries the fuller
   three-line version for anyone at the top of the page. */
.brand-tags {
   display: flex;
   flex-direction: column;
   gap: 1px;
}

.brand-tags small {
   font-family: var(--font-body);
   font-weight: 600;
   font-size: .62rem;
   letter-spacing: .02em;
   line-height: 1.3;
   color: var(--color-muted);
   white-space: nowrap;
}

.brand-tags small.trust {
   color: var(--color-secondary);
}

.nav-links {
   display: flex;
   align-items: center;
   gap: var(--space-6);
}

.nav-links a {
   font-weight: 600;
   font-size: .95rem;
   color: var(--color-primary);
   position: relative;
   padding: 6px 0;
}

.nav-links a::after {
   content: '';
   position: absolute;
   left: 0;
   right: 100%;
   bottom: 0;
   height: 2px;
   background: var(--color-accent);
   transition: right var(--dur-fast) var(--ease-out);
}

.nav-links a:hover::after,
.nav-links a.active::after {
   right: 0;
}

.nav-links a.active {
   color: var(--color-accent-dark);
}

.nav-actions {
   display: flex;
   align-items: center;
   gap: var(--space-4);
}

.nav-actions .btn {
   padding: 0 20px;
   min-height: 44px;
}

.nav-toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: 0;
   padding: 8px;
}

.nav-toggle span {
   width: 24px;
   height: 2px;
   background: var(--color-primary);
   border-radius: 2px;
   transition: all var(--dur-fast) var(--ease-out);
}

@media (max-width:480px) {
   .brand .wordmark {
      height: 17px;
   }

   .brand-tags small {
      font-size: .56rem;
   }
}

/* Floating action button — the single conversion control for every page,
   replacing both the old header contact widget and the mobile call bar.
   Closed, it shows a chat-bubble "contact" glyph; open, it cross-fades to a
   close icon while three labeled pills fan up. DOM order (Call, WhatsApp,
   Book a Service) puts Book a Service last — closest to the main button,
   the natural "first thing your thumb reaches" spot — since it's the
   primary action. Fixed positioning + a shared z-index keeps it above
   content and the mobile-nav panel alike without per-breakpoint variants. */
.fab-widget {
   position: fixed;
   right: 24px;
   bottom: 24px;
   z-index: 150;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.fab-menu {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 10px;
   margin-bottom: 14px;
}

.fab-menu-item {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--color-surface);
   color: var(--color-primary);
   padding: 8px 20px 8px 8px;
   border-radius: var(--radius-pill);
   box-shadow: var(--shadow-lg);
   border: 1px solid var(--color-border);
   font-weight: 600;
   font-size: .88rem;
   white-space: nowrap;
   opacity: 0;
   transform: translateY(10px) scale(.94);
   transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
   pointer-events: none;
}

.fab-widget.open .fab-menu-item {
   opacity: 1;
   transform: translateY(0) scale(1);
   pointer-events: auto;
}

.fab-widget.open .fab-menu-item.book {
   transition-delay: 0s;
}

.fab-widget.open .fab-menu-item.whatsapp {
   transition-delay: .04s;
}

.fab-widget.open .fab-menu-item.call {
   transition-delay: .08s;
}

.fab-icon {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   color: #fff;
}

.fab-icon svg {
   width: 17px;
   height: 17px;
}

.fab-menu-item.book .fab-icon {
   background: linear-gradient(135deg, var(--color-secondary), var(--color-primary-2));
}

.fab-menu-item.call .fab-icon {
   background: linear-gradient(135deg, var(--color-secondary), var(--color-primary-2));
}

.fab-menu-item.whatsapp .fab-icon {
   background: linear-gradient(135deg, #25D366, #128C7E);
}

.fab-main {
   position: relative;
   width: 58px;
   height: 58px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--color-secondary), var(--color-primary) 75%);
   color: #fff;
   border: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 26px rgba(11, 42, 74, .32);
   cursor: pointer;
   flex-shrink: 0;
   transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.fab-main:hover {
   transform: scale(1.06);
   box-shadow: 0 12px 30px rgba(11, 42, 74, .4);
}

/* Two overlapping icons, cross-faded + scaled rather than one glyph rotated
   into another shape — a chat bubble doesn't read as a "close" when spun 45°. */
.fab-main svg {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 24px;
   height: 24px;
   transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}

.fab-main .icon-default {
   transform: translate(-50%, -50%) scale(1);
   opacity: 1;
}

.fab-main .icon-close {
   transform: translate(-50%, -50%) scale(.5) rotate(-45deg);
   opacity: 0;
}

.fab-widget.open .fab-main .icon-default {
   transform: translate(-50%, -50%) scale(.5) rotate(45deg);
   opacity: 0;
}

.fab-widget.open .fab-main .icon-close {
   transform: translate(-50%, -50%) scale(1) rotate(0);
   opacity: 1;
}

/* A quiet pulse on the closed button only — draws the eye once without being
   a constant distraction once someone has already noticed it. */
.fab-main::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: var(--color-secondary);
   opacity: .5;
   animation: fab-pulse 2.6s ease-out infinite;
   z-index: -1;
}

.fab-widget.open .fab-main::before {
   display: none;
}

@keyframes fab-pulse {
   0% {
      transform: scale(1);
      opacity: .45;
   }

   100% {
      transform: scale(1.6);
      opacity: 0;
   }
}

@media (max-width:640px) {
   .fab-widget {
      right: 16px;
      bottom: 16px;
   }

   .fab-main {
      width: 52px;
      height: 52px;
   }

   .fab-main svg {
      width: 22px;
      height: 22px;
   }

   .fab-menu-item {
      font-size: .85rem;
      padding: 7px 16px 7px 7px;
   }

   .fab-icon {
      width: 32px;
      height: 32px;
   }

   .fab-icon svg {
      width: 15px;
      height: 15px;
   }
}

@media (max-width:900px) {
   .nav-toggle {
      display: flex;
   }

   /* top is a JS-measured custom property (main.js), not a hardcoded 64px: the
     header-topbar above the sticky nav means "where the header ends" varies
     with scroll position (topbar visible vs already scrolled away), so a
     fixed offset would either gap or overlap depending on where you are. */
   .nav-links {
      position: fixed;
      top: var(--mobile-nav-top, 64px);
      right: 0;
      bottom: 0;
      left: 0;
      background: var(--color-surface);
      flex-direction: column;
      justify-content: flex-start;
      padding: var(--space-7) var(--gutter);
      gap: var(--space-5);
      transform: translateX(100%);
      transition: transform var(--dur-med) var(--ease-out);
      z-index: 99;
   }

   body.nav-open .nav-links {
      transform: translateX(0);
   }

   .nav-links a {
      font-size: 1.25rem;
   }

   body.nav-open .nav-toggle span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
   }

   body.nav-open .nav-toggle span:nth-child(2) {
      opacity: 0;
   }

   body.nav-open .nav-toggle span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
   }
}

/* ---- Hero ---- */
/* Dot-grid texture, generated as a tiny inline SVG data-URI — no extra asset request
   needed for this one. Used at low opacity for a premium, non-flat backdrop. */
.hero {
   position: relative;
   min-height: calc(100svh - var(--header-h));
   display: flex;
   align-items: center;
   padding-block: var(--space-6);
   overflow: hidden;
   background: var(--color-bg);
}

/* Bottom layer is a real photo (see assetrequest.md, "Hero section background").
   A near-opaque light scrim sits on top of it (first layer = topmost) so headline
   and body text stay legible over whatever the photo looks like; the old
   radial-gradient wash + dot-grid still sit between the scrim and the photo for
   texture. Until the file exists the url() 404s silently and this looks exactly
   like the plain gradient-and-dots background it always was. Mobile keeps a flat,
   heavy scrim since the photo sits directly behind full-width stacked text there;
   the wider layout below fades the scrim left-to-right so the photo shows through
   on the product/image side while the text column stays protected. */
.hero::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 0;
   background-image: linear-gradient(rgba(247, 249, 252, .95), rgba(247, 249, 252, .95)), radial-gradient(1400px 700px at 88% -15%, rgba(0, 171, 239, .18), transparent 60%), radial-gradient(900px 500px at -10% 100%, rgba(46, 11, 162, .10), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23170B5E' fill-opacity='0.06'/%3E%3C/svg%3E"), url("../assets/images/hero/hero-bg.jpg");
   background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
   background-size: auto, auto, auto, auto, cover;
   background-position: 0 0, 0 0, 0 0, 0 0, center;
}

@media (min-width:901px) {
   .hero::before {
      background-image: linear-gradient(100deg, rgba(247, 249, 252, .97) 0%, rgba(247, 249, 252, .93) 34%, rgba(247, 249, 252, .55) 54%, rgba(247, 249, 252, .2) 74%, rgba(247, 249, 252, .06) 100%), radial-gradient(1400px 700px at 88% -15%, rgba(0, 171, 239, .18), transparent 60%), radial-gradient(900px 500px at -10% 100%, rgba(46, 11, 162, .10), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23170B5E' fill-opacity='0.06'/%3E%3C/svg%3E"), url("../assets/images/hero/hero-bg.jpg");
   }
}

.hero .container {
   position: relative;
   z-index: 1;
   width: 100%;
}

.hero-grid {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: var(--space-8);
   align-items: center;
}

@media (max-width:900px) {
   .hero-grid {
      grid-template-columns: 1fr;
      gap: var(--space-7);
   }
}

/* Hero headline is deliberately capped smaller than the global h1 scale: short,
   outcome-led copy (<=8 words per UX research) needs less room, which is what
   frees up space for the product image to actually be the star. */
.hero h1 {
   margin-bottom: var(--space-4);
   letter-spacing: -0.02em;
   font-size: clamp(2.25rem, 2.6vw + 1.3rem, 3.25rem);
   line-height: 1.08;
}

/* ---- Hero Kicker — Brand Credential Mark ----
   Replaces the generic eyebrow pill with a structured typographic credential:
   brand accent bar | Protech hexagon mark | two-line text (title + sub).
   No pill shape, no background fill — pure typographic authority. The gradient
   bar echoes the brand mark's own blue→indigo gradient; the symbol reinforces
   the visual identity right at the hero's first reading anchor point.
   Sits at a tight size so it reads as a credential, not a nav element — the
   weight and scale hierarchy intentionally steps down from H1, not toward it. */
.hero-kicker {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   margin-bottom: var(--space-5);
   position: relative;
}

/* A three-segment gradient bar: red (brand accent) → indigo → brand blue.
   Mirrors the visual language of the Protech symbol itself. */
.hero-kicker-bar {
   width: 3px;
   height: 38px;
   background: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-primary) 50%, var(--color-secondary) 100%);
   border-radius: 2px;
   flex-shrink: 0;
}

/* The hexagon symbol at a small, precise size — not decorative, it's a brand
   anchor. Slight opacity drop keeps it secondary to the text credential. */
.hero-kicker-mark {
   width: 28px;
   height: 28px;
   object-fit: contain;
   flex-shrink: 0;
   opacity: .88;
}

.hero-kicker-text {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

/* Title — primary credential line. Tight tracking, display weight, brand primary
   color. Feels like a stamped authorization rather than a marketing label. */
.hero-kicker-title {
   font-family: var(--font-display);
   font-size: .76rem;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--color-primary);
   line-height: 1;
}

/* Subtitle — location line. Lighter treatment, slightly more tracking,
   muted color. The interpunct (·) separators read as a geographic code,
   not a bulleted list. */
.hero-kicker-sub {
   font-family: var(--font-body);
   font-size: .68rem;
   font-weight: 500;
   letter-spacing: .06em;
   color: var(--color-muted);
   line-height: 1;
}

.hero .lead {
   font-size: 1.15rem;
   max-width: 42ch;
   margin-bottom: 0;
}

.hero-cta {
   display: flex;
   align-items: center;
   gap: var(--space-5);
   flex-wrap: wrap;
   margin-top: var(--space-6);
}

/* Extra top padding reserves room for the badge to sit ABOVE the image entirely —
   not overlapping it at any aspect ratio — instead of relying on percentage insets
   that only happened to clear whichever product photo was tested. */
.hero-media {
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   min-height: 340px;
   padding-top: 96px;
}

.hero-media::after {
   content: '';
   position: absolute;
   bottom: 2%;
   width: 58%;
   height: 26px;
   background: radial-gradient(ellipse, rgba(23, 11, 94, .28), transparent 72%);
   filter: blur(4px);
   z-index: 0;
}

.hero-media img {
   position: relative;
   z-index: 1;
   max-width: 90%;
   width: 100%;
   height: auto;
   max-height: min(50vh, 480px);
   object-fit: contain;
   filter: drop-shadow(0 28px 30px rgba(23, 11, 94, .22));
}

.hero-badge {
   position: absolute;
   top: 0;
   right: 2%;
   background: var(--color-surface);
   border-radius: 18px;
   box-shadow: 0 18px 32px rgba(23, 11, 94, .16), 0 2px 8px rgba(23, 11, 94, .06);
   padding: 14px 20px 14px 14px;
   display: flex;
   align-items: center;
   gap: 14px;
   max-width: 230px;
   z-index: 2;
}

.hero-badge-icon {
   width: 44px;
   height: 44px;
   flex-shrink: 0;
   border-radius: 12px;
   background: linear-gradient(135deg, var(--color-secondary), var(--color-primary-2));
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 16px rgba(11, 114, 196, .32);
}

.hero-badge-icon svg {
   width: 22px;
   height: 22px;
   color: #fff;
}

.hero-badge .num {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.55rem;
   color: var(--color-primary);
   line-height: 1;
}

.hero-badge .label {
   font-size: .78rem;
   color: var(--color-muted);
   font-weight: 600;
   margin-top: 3px;
   white-space: nowrap;
}

@media (max-width:640px) {
   .hero-media {
      flex-direction: column;
      align-items: center;
      padding-top: 0;
   }

   .hero-badge {
      position: static;
      margin-top: var(--space-6);
      max-width: none;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--color-border);
   }
}

/* Hero carousel — 3–4 featured products cycling behind the constant headline.
   Slides stack via position:absolute so they can cross-fade in place; the
   "6+ Years" badge stays a normal sibling so it doesn't fade with them. */
.hero-slides {
   position: relative;
   width: 100%;
   min-height: 340px;
   display: flex;
   align-items: flex-end;
   justify-content: center;
}

.hero-slide {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity .6s var(--ease-out);
}

.hero-slide.active {
   opacity: 1;
   pointer-events: auto;
   z-index: 1;
}

.hero-slide img {
   max-width: 90%;
   width: 100%;
   height: auto;
   max-height: min(50vh, 480px);
   object-fit: contain;
   filter: drop-shadow(0 28px 30px rgba(23, 11, 94, .22));
}

.hero-slide-caption {
   position: absolute;
   left: 0;
   bottom: 6%;
   background: var(--color-surface);
   border-radius: 14px;
   box-shadow: 0 14px 28px rgba(23, 11, 94, .14);
   padding: 12px 18px;
   z-index: 2;
   max-width: 220px;
}

.hero-slide-caption .tag {
   display: block;
   font-size: .66rem;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--color-accent);
   margin-bottom: 3px;
}

.hero-slide-caption h3 {
   font-size: .95rem;
   margin: 0 0 6px;
   line-height: 1.25;
}

.hero-slide-caption a {
   font-size: .78rem;
   font-weight: 700;
   color: var(--color-secondary);
   white-space: nowrap;
}

.hero-dots {
   position: absolute;
   left: 50%;
   bottom: -34px;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
   z-index: 3;
}

.hero-dot {
   width: 8px;
   height: 8px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: var(--color-border);
   cursor: pointer;
   transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}

.hero-dot.active {
   background: var(--color-secondary);
   width: 22px;
   border-radius: 4px;
}

@media (max-width:640px) {
   .hero-slide-caption {
      position: static;
      max-width: none;
      margin-top: var(--space-5);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--color-border);
   }

   .hero-slide {
      position: relative;
      inset: auto;
      display: none;
      flex-direction: column;
      align-items: center;
   }

   .hero-slide.active {
      display: flex;
   }

   .hero-slides {
      min-height: 0;
   }

   .hero-dots {
      position: static;
      transform: none;
      margin-top: var(--space-5);
   }
}

/* Premium category "showcase" card — full-width category detail banner on
   top (eyebrow + headline + description + Discover More, laid out like a
   section head so the copy isn't stretched edge-to-edge), then a two-tile
   image spread below: a real category-context photo on the left, the actual
   product cutout on a clean panel on the right. Two dedicated photos side by
   side each do one job (atmosphere vs. product ID) instead of one competing
   with the other as an overlay. Hover state zooms both photos slightly and
   shifts the link to accent color, on top of the existing card lift. */
.showcase-grid {
   display: flex;
   flex-direction: column;
   gap: var(--space-6);
}

.showcase-card {
   position: relative;
   display: block;
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   border: 1px solid var(--color-border);
   border-top: 4px solid var(--color-accent);
   transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.showcase-card:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-4px);
}

.showcase-card-content {
   padding: var(--space-5) var(--space-7);
   border-bottom: 1px solid var(--color-border);
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   flex-wrap: wrap;
}

.showcase-card-content-text {
   max-width: 58ch;
}

.showcase-card-eyebrow {
   font-size: .7rem;
   font-weight: 800;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--color-accent);
}

.showcase-card-content h3 {
   font-size: 1.4rem;
   margin: 4px 0 5px;
}

.showcase-card-content p {
   color: var(--color-muted);
   margin: 0;
}

.showcase-card-link {
   flex-shrink: 0;
   font-weight: 700;
   font-size: .8rem;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--color-primary);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding-bottom: 4px;
   transition: color var(--dur-fast) var(--ease-out);
}

.showcase-card-link svg {
   width: 14px;
   height: 14px;
   transition: transform var(--dur-fast) var(--ease-out);
}

.showcase-card:hover .showcase-card-link {
   color: var(--color-accent);
}

.showcase-card:hover .showcase-card-link svg {
   transform: translateX(4px);
}

.showcase-card-media-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 295px;
}

/* Real category-context photo (see assetrequest.md), as an <img> rather than a
   CSS background so it can be transform:scale()'d on hover — the card clips
   it via overflow:hidden so the zoom never spills into the product tile. */
.showcase-card-context {
   position: relative;
   overflow: hidden;
   background: var(--color-bg);
}

.showcase-card-context img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: inherit;
   transition: transform .5s var(--ease-out);
}

.showcase-card:hover .showcase-card-context img {
   transform: scale(1.08);
}

.showcase-card-context::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(160deg, rgba(23, 11, 94, .18), rgba(11, 114, 196, .04));
   opacity: 0;
   transition: opacity var(--dur-med) var(--ease-out);
}

.showcase-card:hover .showcase-card-context::after {
   opacity: 1;
}

.showcase-card-product {
   position: relative;
   background: var(--color-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.showcase-card-product img {
   max-width: 74%;
   max-height: 220px;
   object-fit: contain;
   filter: drop-shadow(0 16px 18px rgba(23, 11, 94, .16));
   transition: transform .5s var(--ease-out), filter .5s var(--ease-out);
}

.showcase-card:hover .showcase-card-product img {
   transform: scale(1.06);
   filter: drop-shadow(0 20px 22px rgba(23, 11, 94, .24));
}

@media (max-width:760px) {
   .showcase-card-media-row {
      grid-template-columns: 1fr;
   }

   .showcase-card-context {
      min-height: 180px;
   }

   .showcase-card-product {
      min-height: 220px;
   }

   .showcase-card-content {
      padding: var(--space-6);
   }
}

/* Trust bar — premium "verified" pill badges (filled circular check, like a
   platform verification mark) instead of plain text + outline checkmark. */
/* ---- Trust Bar — Premium Credential Strip ----
   The trust bar anchors every page immediately below the hero. The old design
   used generic green-pill badges with SVG icons — functional but visually
   forgettable. The new design is a proper credential strip:
   - Dark deep-indigo background (brand primary) — immediately separates it
     from the white page body and signals authority
   - Each item: a generated circular badge seal image (laurel wreath + gold
     accents, blue gradient) + two-line text (bold title + muted subtitle)
   - Thin 1px white/low-opacity vertical separators between items instead of
     individual pill borders — the strip reads as a single unified credential
     panel, not a row of disconnected chips
   - No hover transform: trust credentials feel stable and permanent, not
     interactive — removing the hover lift communicates permanence */
.trust-bar {
   background: linear-gradient(135deg, var(--color-primary) 0%, #0e0657 40%, var(--color-primary-2) 100%);
   border-block: none;
   position: relative;
   overflow: hidden;
}

/* Subtle noise/depth overlay on the dark background */
.trust-bar::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at 50% 0%, rgba(11, 114, 196, .18) 0%, transparent 70%);
   pointer-events: none;
}

.trust-bar .container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   align-items: center;
   padding-block: var(--space-5);
   position: relative;
   z-index: 1;
}

/* Separators are now CSS border-right on each item — no extra HTML spans needed */
.trust-divider {
   display: none;
}

.trust-item {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   background: none;
   border: none;
   border-right: 1px solid rgba(255, 255, 255, .15);
   border-radius: 0;
   padding: var(--space-4) var(--space-5);
   transition: none;
}

.trust-item:last-child {
   border-right: none;
}

/* The generated badge seal image — circular, elevated with a gold drop-shadow */
/* object-fit:contain keeps the full badge graphic (including its gold outer
   ring) visible without clipping. background fills any white-corner gaps from
   the source JPG with the strip's own dark indigo, making all 4 badges look
   identical regardless of how tightly each badge fills its image canvas. */
.trust-badge-img {
   width: 64px;
   height: 64px;
   object-fit: contain;
   flex-shrink: 0;
   border-radius: 50%;
   outline: 2px solid rgba(255, 255, 255, .22);
   outline-offset: 3px;
   filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .5));
}

.trust-item-text {
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.trust-item-title {
   font-family: var(--font-display);
   font-size: .88rem;
   font-weight: 700;
   color: #fff;
   letter-spacing: .01em;
   line-height: 1;
   white-space: nowrap;
}

.trust-item-sub {
   font-family: var(--font-body);
   font-size: .72rem;
   font-weight: 400;
   color: rgba(255, 255, 255, .6);
   letter-spacing: .02em;
   line-height: 1;
   white-space: nowrap;
}

/* ≤ 900px — 2-column grid (2×2)
   DOM positions of .trust-item children: 1, 3, 5, 7
   (the .trust-divider spans at positions 2, 4, 6 are display:none)
   Row 1 in the 2-col grid: nth-child(1) and nth-child(3)
   Row 2 in the 2-col grid: nth-child(5) and nth-child(7) */
@media (max-width: 900px) {
   .trust-bar .container {
      grid-template-columns: repeat(2, 1fr);
   }

   /* 2nd column of row 1 — remove the right separator */
   .trust-item:nth-child(3) {
      border-right: none;
   }

   /* Row 1 items — add bottom separator to divide from row 2 */
   .trust-item:nth-child(1),
   .trust-item:nth-child(3) {
      border-bottom: 1px solid rgba(255, 255, 255, .15);
      padding-bottom: var(--space-4);
      margin-bottom: var(--space-1);
   }
}

/* ≤ 640px — allow text to wrap so nothing overflows */
@media (max-width: 640px) {

   .trust-item-title,
   .trust-item-sub {
      white-space: normal;
   }

   .trust-badge-img {
      width: 52px;
      height: 52px;
   }

   /* .trust-item {
      gap: 10px;
   } */
}

/* ≤ 480px — single column, left-aligned items */
@media (max-width: 480px) {
   .trust-bar .container {
      grid-template-columns: 1fr;
   }

   .trust-item {
      border-right: none;
      border-bottom: 1px solid rgba(255, 255, 255, .15);
      justify-content: flex-start;
      padding-inline: var(--space-5);
   }

   .trust-item:last-child {
      border-bottom: none;
   }

   /* Reset the row-1 bottom border added at 900px — single column
      has its own bottom border on every item */
   .trust-item:nth-child(1),
   .trust-item:nth-child(3) {
      margin-bottom: 0;
   }

   .trust-badge-img {
      width: 44px;
      height: 44px;
   }
}

/* ---- Cards ---- */
.card {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: 20px;
   padding: var(--space-6);
   position: relative;
   overflow: hidden;
   transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--color-accent), var(--color-primary-2));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform var(--dur-med) var(--ease-out);
}

.card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
   border-color: transparent;
}

.card:hover::before {
   transform: scaleX(1);
}

.card .icon-wrap,
.spec-card .icon-wrap {
   width: 56px;
   height: 56px;
   border-radius: 16px;
   background: linear-gradient(135deg, var(--color-secondary), var(--color-primary-2));
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: var(--space-5);
   box-shadow: 0 8px 16px rgba(11, 114, 196, .28);
}

.card .icon-wrap svg,
.spec-card .icon-wrap svg {
   width: 26px;
   height: 26px;
   color: #fff;
}

.spec-card {
   display: flex;
   flex-direction: column;
}

.card h3 {
   margin-bottom: var(--space-2);
}

.card p {
   margin-bottom: 0;
   font-size: .95rem;
}

/* "What We Do" service cards: titles wrap to different line counts
   ("Repairs & Maintenance" vs "Rental"), which staggers where each card's
   paragraph starts. Give the title row a fixed height so every card's
   paragraph lines up on the same baseline regardless of title length. */
.services-grid .card {
   display: flex;
   flex-direction: column;
}

.services-grid .card h3 {
   min-height: 2.6em;
   display: flex;
   align-items: center;
}

/* Bento grid: a proper 2×2 (two per row, two rows) instead of a 4-across strip —
   the 4-across always felt like a spreadsheet row. A single spanning "feature" tile
   was tried and cut: with 4 cards in 4 columns it leaves one card orphaned alone on
   its own row with empty space beside it. The feature card is now called out by
   treatment (gradient surface) instead of by breaking the grid. */
.bento-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-5);
}

.bento-grid .card.feature {
   background: linear-gradient(155deg, var(--color-primary), var(--color-primary-2));
   border-color: transparent;
}

.bento-grid .card.feature h3,
.bento-grid .card.feature p {
   color: #fff;
}

.bento-grid .card.feature p {
   color: rgba(255, 255, 255, .75);
}

.bento-grid .card.feature .icon-wrap {
   background: rgba(255, 255, 255, .16);
   box-shadow: none;
}

@media (max-width:640px) {
   .bento-grid {
      grid-template-columns: 1fr;
   }
}

/* Product card — premium single-CTA treatment. One clear action (WhatsApp) instead
   of two competing buttons; image+title link through to the product detail page.
/* ---- Trending Strip — Ducati-inspired diagonal panel layout ----
   The trending section replaces the generic 4-card grid with a cinematic
   horizontal strip that occupies the full section width:

   LEFT (64%): Four parallelogram panels created with clip-path diagonal
   cuts. Each panel shows a product cutout on a light brand-tinted bg.
   On hover: the panel expands (flex-grow), the product image lifts and
   scales, and a deep-indigo glass overlay slides up from the bottom
   revealing the product name, price, and "Discover More" CTA.

   RIGHT (36%): Brand dark info panel (indigo gradient) with eyebrow,
   heading, description, and "View All Products" button. Two subtle
   decorative angled stripes echo the Ducati right-panel chevron motif. */

.trending-strip {
   display: flex;
   height: 480px;
   overflow: hidden;
   background: var(--color-primary);
}

/* ---- Left: 4 angled panels ---- */
.trending-panels {
   display: flex;
   flex: 0 0 64%;
   overflow: hidden;
   position: relative;
}

.tpanel {
   position: relative;
   flex: 1;
   overflow: hidden;
   text-decoration: none;
   background: #eef1fb;
   /* Diagonal right-edge cut — the "slash" between adjacent panels.
      polygon: top-left → top-right → bottom-right-offset → bottom-left */
   clip-path: polygon(0 0, 100% 0, calc(100% - 38px) 100%, 0 100%);
   margin-right: -22px;
   transition: flex .45s cubic-bezier(.22,.68,0,1.2),
               filter var(--dur-med) var(--ease-out);
}

/* Each panel gets a slightly different tint for subtle visual separation */
.tpanel:nth-child(1) { z-index: 1; background: #f0f4fc; }
.tpanel:nth-child(2) { z-index: 2; background: #edf1fa; }
.tpanel:nth-child(3) { z-index: 3; background: #eaeff9; }
/* Last panel has no right-side cut and no negative margin */
.tpanel:nth-child(4),
.tpanel--last {
   z-index: 4;
   clip-path: none;
   margin-right: 0;
   background: #e8ecf8;
}

/* Expand the hovered panel; dim the others for focus */
.tpanel:hover {
   flex: 1.45;
   z-index: 10;
}

.trending-panels:has(.tpanel:hover) .tpanel:not(:hover) {
   filter: brightness(.84);
}

/* Product cutout — centered absolutely; lifts on hover */
.tpanel-img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-height: 74%;
   max-width: 88%;
   width: auto;
   height: auto;
   object-fit: contain;
   pointer-events: none;
   transition: transform .45s cubic-bezier(.22,.68,0,1.2);
   user-select: none;
}

.tpanel:hover .tpanel-img {
   transform: translate(-50%, -60%) scale(1.08);
}

/* ---- Glass overlay — slides up from the bottom on hover on desktop ---- */
.tpanel-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 3;
   padding: 16px 18px 20px;
   background: rgba(8, 5, 40, .86);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-top: 1px solid rgba(255,255,255,.12);
   display: flex;
   flex-direction: column;
   gap: 5px;
   transform: translateY(100%);
   transition: transform .38s cubic-bezier(.22,.68,0,1.2);
}

.tpanel:hover .tpanel-overlay {
   transform: translateY(0);
}

.tpanel-tag {
   font-size: .62rem;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: #6ee7b7;
   line-height: 1;
}

.tpanel-name {
   font-family: var(--font-display);
   font-size: .9rem;
   font-weight: 700;
   color: #fff;
   line-height: 1.2;
   display: block;
}

.tpanel-price {
   font-size: .8rem;
   font-weight: 600;
   color: #fde047;
   display: block;
}

.tpanel-cta {
   display: flex;
   align-items: center;
   gap: 5px;
   margin-top: 4px;
   font-size: .72rem;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: #6ee7b7; /* mint accent — legible on dark */
}

.tpanel-cta svg {
   width: 13px;
   height: 13px;
   flex-shrink: 0;
   transition: transform var(--dur-fast) var(--ease-out);
}

.tpanel:hover .tpanel-cta svg {
   transform: translateX(4px);
}

/* ---- Right: Brand info panel ---- */
.trending-info {
   flex: 0 0 36%;
   background: linear-gradient(135deg, var(--color-primary) 0%, #0c0550 55%, var(--color-primary-2) 100%);
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
}

.trending-info-content {
   position: relative;
   z-index: 2;
   padding: var(--space-8) var(--space-7);
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
}

.trending-badge-wrap {
   display: flex;
   align-items: center;
   margin-bottom: 2px;
}

.trending-badge {
   width: 72px;
   height: 72px;
   object-fit: contain;
   filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
}

.trending-info-content h2 {
   color: #fff;
   font-size: clamp(1.35rem, 2.2vw, 1.85rem);
   line-height: 1.2;
   margin: 0;
}

.trending-info-content p {
   color: rgba(255,255,255,.68);
   font-size: .9rem;
   line-height: 1.65;
   margin: 0;
}

.trending-actions {
   display: flex;
   align-items: center;
   gap: var(--space-4);
   flex-wrap: wrap;
   margin-top: var(--space-2);
}

.trending-swipe-hint {
   display: none;
   align-items: center;
   gap: 6px;
   font-size: .78rem;
   font-weight: 600;
   color: rgba(255,255,255,.7);
   letter-spacing: .02em;
}

/* Decorative angled chevron stripes echoing the Ducati right panel */
.trending-info-deco {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
}

.trending-info-deco::before,
.trending-info-deco::after {
   content: '';
   position: absolute;
   top: -20%;
   height: 140%;
   transform: skewX(-8deg);
}

.trending-info-deco::before {
   right: 44px;
   width: 30px;
   background: rgba(255,255,255,.065);
}

.trending-info-deco::after {
   right: 14px;
   width: 15px;
   background: rgba(255,255,255,.04);
}

/* ---- Responsive: Tablets & Mobile ---- */
@media (max-width: 960px) {
   .trending-strip {
      height: auto;
      flex-direction: column;
      background: #09062b;
      padding-bottom: var(--space-6);
   }

   .trending-info {
      order: -1; /* Header and info at top */
      flex: none;
      width: 100%;
   }

   .trending-info-content {
      padding: var(--space-7) var(--space-5) var(--space-4);
      gap: var(--space-3);
   }

   .trending-info-content h2 {
      font-size: clamp(1.4rem, 4vw, 1.85rem);
   }

   .trending-swipe-hint {
      display: inline-flex;
   }
}

/* Mobile: Horizontal swipe reel with permanently visible details */
@media (max-width: 768px) {
   .trending-panels {
      flex: none;
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding: 10px 20px 24px;
      gap: 14px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,.25) transparent;
   }

   .trending-panels::-webkit-scrollbar {
      height: 5px;
   }

   .trending-panels::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,.25);
      border-radius: 4px;
   }

   .tpanel {
      flex: 0 0 260px;
      width: 260px;
      max-width: 78vw;
      height: 350px;
      clip-path: none !important;
      margin-right: 0 !important;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 10px 28px rgba(0,0,0,.35);
      scroll-snap-align: start;
   }

   .tpanel-img {
      top: 38%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-height: 52%;
      max-width: 82%;
   }

   /* CRITICAL: Information permanently displayed on mobile without hovering */
   .tpanel-overlay {
      transform: translateY(0) !important;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 14px 16px 16px;
      background: linear-gradient(180deg, rgba(8, 5, 40, .72) 0%, rgba(8, 5, 40, .96) 45%, #080528 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,.14);
      border-radius: 0 0 18px 18px;
      gap: 3px;
   }

   .tpanel-name {
      font-size: .88rem;
   }

   .tpanel-price {
      font-size: .78rem;
   }

   .tpanel-cta {
      font-size: .72rem;
   }
}

/* Touch devices (tablets / iPads) where hover doesn't exist */
@media (hover: none) and (min-width: 769px) {
   .tpanel-overlay {
      transform: translateY(0) !important;
   }
   .tpanel-img {
      transform: translate(-50%, -58%) scale(.95);
   }
}

/* ---- Product card (product listing pages) ----
   A permanent (not hover-only) top accent + a chip-style price are what separate
   this from a generic template card; the description is clamped to a fixed 2 lines
   so price/CTA land at the same height across every card in a row, regardless of
   how long each product's blurb runs. */
.product-card {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: 22px;
   overflow: hidden;
   transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
   display: flex;
   flex-direction: column;
   position: relative;
}

.product-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--color-secondary), var(--color-primary-2), var(--color-accent));
   z-index: 2;
}

.product-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-lg);
   border-color: transparent;
}

.product-media {
   aspect-ratio: 1/1;
   background: var(--color-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--space-6);
   position: relative;
   overflow: hidden;
}

.product-media img {
   max-height: 82%;
   max-width: 82%;
   object-fit: contain;
   transition: transform var(--dur-med) var(--ease-out);
   filter: drop-shadow(0 14px 14px rgba(23, 11, 94, .14));
}

.product-card:hover .product-media img {
   transform: scale(1.06) translateY(-2px);
}

.product-tag {
   position: absolute;
   top: 14px;
   left: 14px;
   background: rgba(255, 255, 255, .85);
   backdrop-filter: blur(6px);
   color: var(--color-secondary);
   font-size: .7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .04em;
   padding: 6px 13px;
   border-radius: var(--radius-pill);
   border: 1px solid var(--color-border);
}

.product-link {
   display: flex;
   flex-direction: column;
   color: inherit;
   flex: 1;
}

.product-body {
   padding: var(--space-5) var(--space-5) 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
   border-top: 1px solid var(--color-border);
   flex: 1;
}

.product-body h3 {
   font-size: 1.08rem;
   margin-bottom: 0;
   transition: color var(--dur-fast) var(--ease-out);
   min-height: 2.6em;
   display: flex;
   align-items: flex-start;
}

.product-link:hover h3 {
   color: var(--color-secondary);
}

.product-body .product-desc {
   font-size: .88rem;
   color: var(--color-muted);
   margin-bottom: 2px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: 2.6em;
}

.product-body .price-row {
   margin-top: auto;
   padding-top: var(--space-3);
}

.product-price {
   display: inline-flex;
   align-items: baseline;
   gap: 4px;
   font-family: var(--font-display);
   font-weight: 700;
   color: var(--color-accent-dark);
   font-size: 1.05rem;
   background: rgba(221, 1, 0, .08);
   border-radius: var(--radius-sm);
   padding: 6px 12px;
}

.product-price.on-request {
   color: var(--color-secondary);
   background: rgba(11, 114, 196, .08);
   font-size: .9rem;
}

.product-actions {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: var(--space-4) var(--space-5) var(--space-6);
}

.product-actions .btn {
   width: 100%;
   font-size: .9rem;
}

.product-actions .view-details {
   text-align: center;
   font-size: .85rem;
   font-weight: 600;
   color: var(--color-secondary);
}

.product-actions .view-details:hover {
   text-decoration: underline;
}

/* WhatsApp CTA — used for product enquiries and the floating button. Kept as its
   own recognizable green rather than forced into the indigo/red brand palette:
   the WhatsApp mark is what makes it instantly recognizable as a working, tappable
   channel, which matters more here than palette purity. The icon sits in its own
   white plate (an "app badge" treatment) instead of floating inline with the text,
   which is what was reading as a generic green pill button. */
.btn-whatsapp {
   background: linear-gradient(135deg, #25D366, #128C7E);
   color: #fff;
   box-shadow: 0 6px 16px rgba(18, 140, 126, .3);
   gap: 10px;
   padding-left: 22px;
}

.btn-whatsapp:hover {
   box-shadow: 0 10px 22px rgba(18, 140, 126, .4);
   transform: translateY(-2px);
}

/* Inline SVGs accept normal box-model properties, so the "white icon plate" needs
   no wrapper element — just styling the icon itself. */
.btn-whatsapp svg {
   width: 13px;
   height: 13px;
   color: #128C7E;
   background: #fff;
   border-radius: 50%;
   padding: 5px;
   box-sizing: content-box;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
   flex-shrink: 0;
}

.whatsapp-float {
   position: fixed;
   left: 24px;
   bottom: 24px;
   z-index: 120;
   display: flex;
   align-items: center;
   gap: 12px;
   background: #fff;
   border-radius: 999px;
   padding: 6px;
   box-shadow: 0 12px 28px rgba(23, 11, 94, .22);
   text-decoration: none;
   transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.whatsapp-float:hover {
   box-shadow: 0 16px 36px rgba(23, 11, 94, .3);
   transform: translateY(-2px);
}

.whatsapp-float-icon {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: linear-gradient(135deg, #25D366, #128C7E);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   position: relative;
}

.whatsapp-float-icon::after {
   content: '';
   position: absolute;
   inset: -4px;
   border-radius: 50%;
   border: 2px solid #25D366;
   opacity: .5;
   animation: wa-pulse 2.2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
   .whatsapp-float-icon::after {
      animation: none;
   }
}

@keyframes wa-pulse {
   0% {
      transform: scale(1);
      opacity: .5;
   }

   100% {
      transform: scale(1.35);
      opacity: 0;
   }
}

.whatsapp-float-icon svg {
   width: 26px;
   height: 26px;
   color: #fff;
}

.whatsapp-float-text {
   padding-right: 18px;
   line-height: 1.15;
}

.whatsapp-float-text .t1 {
   font-size: .72rem;
   color: var(--color-muted);
}

.whatsapp-float-text .t2 {
   font-size: .9rem;
   font-weight: 700;
   color: var(--color-primary);
}

@media (max-width:640px) {
   .whatsapp-float {
      left: 16px;
      bottom: 82px;
      padding: 0;
   }

   .whatsapp-float-text {
      display: none;
   }

   .whatsapp-float-icon {
      width: 54px;
      height: 54px;
   }
}

/* Product detail page */
.product-detail-media {
   background: var(--color-bg);
   border-radius: 28px;
   border: 1px solid var(--color-border);
   padding: var(--space-8);
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 380px;
   position: relative;
}

.product-detail-media img {
   max-width: 80%;
   max-height: 400px;
   width: auto;
   filter: drop-shadow(0 24px 26px rgba(23, 11, 94, .18));
}

.spec-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-5);
}

@media (max-width:640px) {
   .spec-grid {
      grid-template-columns: 1fr;
   }
}

.spec-card {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: 20px;
   padding: var(--space-6);
}

.spec-card .spec-value {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: 1.6rem;
   color: var(--color-primary);
}

.spec-card .spec-label {
   font-size: .85rem;
   color: var(--color-muted);
   margin-top: 4px;
}

.spec-list {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--color-surface);
}

.spec-list .row {
   display: grid;
   grid-template-columns: 1fr 1.4fr;
}

.spec-list .row:not(:last-child) {
   border-bottom: 1px solid var(--color-border);
}

.spec-list .row .k {
   padding: var(--space-4) var(--space-5);
   font-weight: 600;
   color: var(--color-primary);
   background: rgba(11, 114, 196, .05);
}

.spec-list .row .v {
   padding: var(--space-4) var(--space-5);
   color: var(--color-muted);
}

@media (max-width:640px) {
   .spec-list .row {
      grid-template-columns: 1fr;
   }

   .spec-list .row .k {
      padding-bottom: 4px;
      background: none;
   }
}

/* Compare-selection: a checkbox chip on each product card feeds a small
   sessionStorage-backed picker (js/compare.js) — pick 2-4, a floating bar appears,
   "Compare" jumps to compare.html?p=slug,slug which filters the static table to
   just those columns. No framework, no server round-trip. */
.compare-check {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 6px;
   background: rgba(255, 255, 255, .9);
   backdrop-filter: blur(6px);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-pill);
   padding: 6px 12px 6px 8px;
   cursor: pointer;
   font-size: .72rem;
   font-weight: 700;
   color: var(--color-primary);
   transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.compare-check:hover {
   border-color: var(--color-secondary);
}

.compare-check input {
   width: 15px;
   height: 15px;
   accent-color: var(--color-secondary);
   cursor: pointer;
   margin: 0;
}

.compare-check:has(input:checked),
.compare-check.checked {
   background: var(--color-secondary);
   color: #fff;
   border-color: var(--color-secondary);
}

.compare-bar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 140;
   background: var(--color-primary);
   color: #fff;
   padding: 14px var(--gutter);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-4);
   flex-wrap: wrap;
   box-shadow: 0 -8px 24px rgba(23, 11, 94, .25);
   transform: translateY(110%);
   transition: transform var(--dur-med) var(--ease-out);
}

.compare-bar.show {
   transform: translateY(0);
}

.compare-bar .cb-info {
   font-weight: 600;
   font-size: .92rem;
   display: flex;
   align-items: center;
   gap: 10px;
}

.compare-bar .cb-count {
   background: var(--color-accent);
   color: #fff;
   border-radius: 50%;
   width: 26px;
   height: 26px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-weight: 800;
   font-size: .85rem;
}

.compare-bar .cb-actions {
   display: flex;
   gap: 10px;
   align-items: center;
}

.compare-bar button.cb-clear {
   background: none;
   border: 0;
   color: rgba(255, 255, 255, .7);
   font-weight: 600;
   font-size: .85rem;
   cursor: pointer;
}

.compare-bar button.cb-clear:hover {
   color: #fff;
}

.compare-bar .btn {
   min-height: 42px;
}

@media (max-width:640px) {
   .compare-bar {
      padding: 12px 16px;
      bottom: 66px;
   }
}

/* Compare table — a wide table is unavoidable with 8 products, so it scrolls
   horizontally inside its own frame rather than breaking the page layout. */
.table-scroll {
   overflow-x: auto;
   border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
}

.compare-table {
   border-collapse: collapse;
   width: 100%;
   min-width: 920px;
   background: var(--color-surface);
}

.compare-table th,
.compare-table td {
   padding: var(--space-4);
   text-align: left;
   border-bottom: 1px solid var(--color-border);
   vertical-align: top;
}

.compare-table thead th {
   background: var(--color-bg);
}

.compare-table tbody tr:last-child td {
   border-bottom: 0;
}

.compare-table th:first-child {
   font-weight: 600;
   color: var(--color-primary);
   white-space: nowrap;
   background: var(--color-bg);
   position: sticky;
   left: 0;
   z-index: 1;
}

.compare-table .col-product {
   min-width: 225px;
}

.compare-table .col-product img {
   width: 64px;
   height: 64px;
   object-fit: contain;
   margin-bottom: 8px;
}

/* Fixed-height name + single-line price so the "View details" link lands on the
   same row across every column, regardless of how many lines a given model's name
   wraps to or how long its price string runs (₹2.25 Lakh vs ₹36,000, etc). */
.compare-table .col-product h3 {
   font-size: .95rem;
   margin-bottom: 4px;
   min-height: 2.6em;
   display: flex;
   align-items: flex-start;
}

.compare-table .col-product .product-price {
   font-size: .85rem;
   min-height: 1.9em;
   box-sizing: border-box;
   white-space: nowrap;
}

.compare-table .col-product a.view-details {
   font-size: .8rem;
   display: inline-block;
   margin-top: 4px;
}

/* Mobile: the label column shrinks and wraps instead of forcing its full
   nowrap width (which used to eat most of the screen, leaving product columns
   cut off mid-content); each product column is sized by JS (compare.js) to
   exactly fill what's left, and scroll-snap makes a swipe land cleanly on one
   product at a time instead of stopping at an arbitrary halfway point. */
.swipe-hint {
   display: none;
}

@media (max-width:640px) {
   .compare-table {
      min-width: 0;
   }

   /* scroll-padding-left tells the snap algorithm the scrollport effectively
     starts after the sticky label column (88px) — without it, "start"-aligned
     snap points land columns flush with the true left edge, i.e. hidden
     behind the label that visually still covers that space. */
   .table-scroll {
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scroll-padding-left: 88px;
   }

   .compare-table th:first-child {
      width: 88px;
      min-width: 88px;
      max-width: 88px;
      white-space: normal;
      font-size: .78rem;
      line-height: 1.25;
      padding: var(--space-3) var(--space-2);
   }

   .compare-table th,
   .compare-table td {
      padding: var(--space-3);
   }

   .compare-table .col-product {
      width: var(--col-w, 240px);
      min-width: var(--col-w, 240px);
      max-width: var(--col-w, 240px);
      scroll-snap-align: start;
   }

   .compare-table tbody td {
      scroll-snap-align: start;
   }

   .swipe-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: .82rem;
      color: var(--color-secondary);
      font-weight: 600;
      margin-bottom: var(--space-3);
   }

   .swipe-hint svg {
      width: 16px;
      height: 16px;
      animation: swipe-hint-move 1.6s ease-in-out infinite;
   }
}

@keyframes swipe-hint-move {

   0%,
   100% {
      transform: translateX(0);
   }

   50% {
      transform: translateX(5px);
   }
}

.related-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--space-5);
}

@media (max-width:1024px) {
   .related-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width:640px) {
   .related-grid {
      grid-template-columns: 1fr;
   }
}

/* Filter tabs */
.filter-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: var(--space-7);
}

.filter-tab {
   padding: 10px 20px;
   border-radius: var(--radius-pill);
   border: 1px solid var(--color-border);
   background: var(--color-surface);
   font-weight: 600;
   font-size: .9rem;
   color: var(--color-muted);
   transition: all var(--dur-fast) var(--ease-out);
}

.filter-tab:hover {
   border-color: var(--color-secondary);
   color: var(--color-secondary);
}

.filter-tab.active {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: #fff;
}

/* Stats */
.stats-section {
   background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
   color: #fff;
}

.stats-section .section-head h2,
.stats-section .section-head p {
   color: #fff;
}

.stats-section .section-head p {
   opacity: .8;
}

.stat {
   text-align: center;
}

.stat .value {
   font-family: var(--font-display);
   font-weight: 800;
   font-size: clamp(2rem, 3vw, 3rem);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
}

.stat .label {
   opacity: .8;
   font-size: .9rem;
   margin-top: 6px;
}

/* Testimonial */
.testimonial {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: 28px;
   padding: var(--space-8);
   position: relative;
   box-shadow: var(--shadow-sm);
}

.testimonial svg.quote {
   width: 40px;
   height: 40px;
   color: var(--color-accent);
   opacity: .3;
   margin-bottom: var(--space-4);
}

.testimonial p {
   font-size: 1.15rem;
   color: var(--color-ink);
   font-family: var(--font-display);
   font-weight: 500;
}

.testimonial .who {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: var(--space-5);
}

.testimonial .who .avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--color-secondary);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-family: var(--font-display);
}

/* CTA banner */
.cta-banner {
   background: linear-gradient(120deg, var(--color-primary), var(--color-primary-2));
   border-radius: 28px;
   padding: var(--space-8);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-6);
   flex-wrap: wrap;
   color: #fff;
   position: relative;
   overflow: hidden;
   box-shadow: var(--shadow-lg);
}

.cta-banner::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(500px 300px at 90% 0%, rgba(0, 171, 239, .25), transparent 70%);
   pointer-events: none;
}

.cta-banner>* {
   position: relative;
}

.cta-banner h2 {
   color: #fff;
   margin-bottom: var(--space-2);
}

.cta-banner p {
   color: rgba(255, 255, 255, .8);
   margin-bottom: 0;
}

/* Steps — a single vertical line runs behind all the numbered circles; its fill
   height is driven directly by scroll position (js/main.js sets --line-progress
   on .steps-line-fill as the block scrolls through the viewport), so the line
   visibly draws itself as you scroll rather than animating once on a timer.
   Each number still pops in via [data-reveal].in-view when its step arrives. */
.steps {
   counter-reset: step;
   position: relative;
}

.steps-line {
   position: absolute;
   left: 23px;
   top: 24px;
   bottom: 24px;
   width: 2px;
   background: var(--color-border);
   z-index: 0;
   overflow: hidden;
   border-radius: 1px;
}

.steps-line-fill {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 0%;
   background: linear-gradient(var(--color-secondary), var(--color-primary-2));
}

.step {
   display: flex;
   gap: var(--space-5);
   position: relative;
   padding-bottom: var(--space-7);
}

.step:last-child {
   padding-bottom: 0;
}

.step::before {
   counter-increment: step;
   content: counter(step);
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--color-primary);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-weight: 700;
   position: relative;
   z-index: 1;
   transform: scale(.5);
   opacity: 0;
   transition: transform .45s var(--ease-out), opacity .4s var(--ease-out), box-shadow .5s var(--ease-out);
}

.step.in-view::before {
   transform: scale(1);
   opacity: 1;
   box-shadow: 0 0 0 6px rgba(11, 114, 196, .14);
}

.step h3 {
   margin-bottom: 6px;
}

/* Accordion */
.accordion-item {
   border-bottom: 1px solid var(--color-border);
}

.accordion-trigger {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: var(--space-5) 0;
   background: none;
   border: 0;
   text-align: left;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 1.05rem;
   color: var(--color-primary);
}

.accordion-trigger .plus {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
   position: relative;
}

.accordion-trigger .plus::before,
.accordion-trigger .plus::after {
   content: '';
   position: absolute;
   background: var(--color-secondary);
   border-radius: 2px;
   transition: transform var(--dur-fast) var(--ease-out);
}

.accordion-trigger .plus::before {
   left: 0;
   top: 50%;
   width: 100%;
   height: 2px;
   transform: translateY(-50%);
}

.accordion-trigger .plus::after {
   top: 0;
   left: 50%;
   width: 2px;
   height: 100%;
   transform: translateX(-50%);
}

.accordion-item.open .plus::after {
   transform: translateX(-50%) rotate(90deg);
   opacity: 0;
}

.accordion-panel {
   max-height: 0;
   overflow: hidden;
   transition: max-height var(--dur-med) var(--ease-out);
}

.accordion-panel p {
   padding-bottom: var(--space-5);
   margin-bottom: 0;
}

/* Parts & consumables catalog tables (parts.html) — plain, scannable, real
   Kyocera part numbers with no pricing column (kept off the public site;
   pricing is a WhatsApp/call conversation, same as the rest of the site). */
.parts-table-wrap{overflow-x:auto;padding-bottom:var(--space-5);}
.parts-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.parts-table th,.parts-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--color-border);}
.parts-table th{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);background:var(--color-bg);white-space:nowrap;}
.parts-table td:first-child{font-weight:700;color:var(--color-primary);white-space:nowrap;}
.parts-table tbody tr:last-child td{border-bottom:0;}

/* Forms */
.field {
   margin-bottom: var(--space-4);
}

.field label {
   display: block;
   font-weight: 600;
   font-size: .85rem;
   color: var(--color-primary);
   margin-bottom: 6px;
}

.field input,
.field textarea,
.field select {
   width: 100%;
   padding: 11px 14px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   background: var(--color-surface);
   color: var(--color-ink);
   transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
   outline: none;
   border-color: var(--color-secondary);
   box-shadow: 0 0 0 4px rgba(11, 114, 196, .15);
}

.field textarea {
   resize: vertical;
   min-height: 80px;
}

.field .error {
   color: #D14343;
   font-size: .8rem;
   margin-top: 5px;
   display: none;
}

.field.invalid input,
.field.invalid textarea {
   border-color: #D14343;
}

.field.invalid .error {
   display: block;
}

.form-note {
   font-size: .82rem;
   color: var(--color-muted);
   margin-top: var(--space-2);
}

.form-success {
   display: none;
   background: rgba(30, 158, 90, .1);
   border: 1px solid var(--color-success);
   color: #146238;
   padding: var(--space-4) var(--space-5);
   border-radius: var(--radius-sm);
   margin-bottom: var(--space-5);
   font-weight: 600;
}

.form-success.show {
   display: block;
}

/* Contact info card */
.contact-card {
   position: relative;
   overflow: hidden;
   background: var(--color-primary);
   color: #fff;
   border-radius: var(--radius-lg);
   padding: var(--space-7);
}

/* Photo layer */
.contact-card::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 0;
   background-image: url("../assets/images/contact/contact-card-bg.jpg");
   background-size: cover;
   background-position: center;
}

/* Light, appropriate overlay between background and text:
   Deep indigo/navy gradient with gentle backdrop diffusion that keeps the
   atmospheric lobby and warm ambient lights visible while ensuring the text,
   icons, and action buttons remain crisp and comfortable to read. */
.contact-card::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 0;
   background: linear-gradient(175deg, rgba(17, 10, 58, 0.68) 0%, rgba(10, 18, 52, 0.58) 45%, rgba(8, 12, 38, 0.76) 100%);
   backdrop-filter: blur(1.5px);
   -webkit-backdrop-filter: blur(1.5px);
   pointer-events: none;
}

.contact-card>* {
   position: relative;
   z-index: 1;
}

/* The Call/WhatsApp buttons share this row equally via flex:1, but .btn's
   white-space:nowrap gives each one a text-width floor — on narrow phones the
   two floors together exceed the available width, and since a non-wrapping
   flex row's min-content is the SUM of its items' minimums (not reducible by
   min-width:0 on the items alone), that overflow was propagating all the way
   up through the grid to the whole page. flex-wrap is the actual fix: it
   guarantees the row can never be wider than its container — worst case on a
   very narrow phone, the two buttons stack instead of forcing a scrollbar. */
.contact-cta-row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.contact-cta-row .btn {
   flex: 1;
   min-width: 140px;
}

.contact-cta-row .btn-outline {
   background: rgba(255, 255, 255, .10);
   border-color: rgba(255, 255, 255, .4);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
}

.contact-cta-row .btn-outline:hover {
   background: rgba(255, 255, 255, .20);
   border-color: rgba(255, 255, 255, .7);
}

.contact-card h3 {
   color: #fff;
   text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.contact-row {
   display: flex;
   gap: 14px;
   padding-block: var(--space-4);
   border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.contact-row:last-of-type {
   border-bottom: 0;
}

.contact-row svg {
   width: 22px;
   height: 22px;
   color: var(--color-accent);
   flex-shrink: 0;
   margin-top: 2px;
   filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}

.contact-row .k {
   font-size: .78rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   opacity: .80;
   margin-bottom: 2px;
   text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.contact-row .v {
   font-weight: 600;
   text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.contact-grid {
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: var(--space-8);
   align-items: start;
}

@media (max-width:900px) {
   .contact-grid {
      grid-template-columns: 1fr;
   }
}

.map-wrap {
   border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid var(--color-border);
   height: 340px;
}

.map-wrap iframe {
   width: 100%;
   height: 100%;
   border: 0;
}

/* Timeline / factsheet */
.fact-grid {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--color-surface);
}

.fact-row {
   display: grid;
   grid-template-columns: 1fr 1.4fr;
}

.fact-row:not(:last-child) {
   border-bottom: 1px solid var(--color-border);
}

.fact-row .k {
   padding: var(--space-4) var(--space-5);
   font-weight: 600;
   color: var(--color-primary);
   background: rgba(11, 114, 196, .05);
}

.fact-row .v {
   padding: var(--space-4) var(--space-5);
   color: var(--color-muted);
}

@media (max-width:640px) {
   .fact-row {
      grid-template-columns: 1fr;
   }

   .fact-row .k {
      padding-bottom: 4px;
      background: none;
   }
}

/* Modal (quote request) */
.modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(11, 42, 74, .5);
   display: none;
   align-items: center;
   justify-content: center;
   padding: var(--space-5);
   z-index: 200;
}

.modal-overlay.open {
   display: flex;
}

/* Service-booking form: seven fields is a lot for a modal, so this is
   deliberately tighter than the full-page contact form (smaller labels,
   less padding, no wasted note text) — the goal is fitting on one screen
   without a scrollbar rather than reusing the roomier page-form spacing. */
.service-form .field {
   margin-bottom: 8px;
}

.service-form .field label {
   font-size: .78rem;
   margin-bottom: 3px;
}

.service-form .field input {
   padding: 8px 12px;
   font-size: .92rem;
}

.service-form .grid.cols-2 {
   gap: 0 12px;
}

.service-form .btn {
   margin-top: 4px;
   min-height: 44px;
}

/* Below 640px the 2-column field grids collapse to stacked rows (correct —
   there's no width for two side-by-side inputs on a phone), which means
   pairing them saves no height exactly where the modal is tightest. Trim the
   stacked gap specifically, rather than shrinking fields for everyone. */
@media (max-width:640px) {
   .service-form .grid.cols-2 {
      row-gap: 2px;
   }

   .service-form .field {
      margin-bottom: 6px;
   }
}

.modal {
   background: var(--color-surface);
   border-radius: var(--radius-lg);
   padding: var(--space-7);
   max-width: 480px;
   width: 100%;
   position: relative;
   max-height: 90vh;
   overflow-y: auto;
}

.modal.compact {
   padding: var(--space-5);
}

.modal.compact h2 {
   font-size: 1.4rem;
}

.modal-close {
   position: absolute;
   top: var(--space-5);
   right: var(--space-5);
   background: none;
   border: 0;
   width: 32px;
   height: 32px;
   color: var(--color-muted);
}

/* Footer */
.site-footer {
   background: var(--color-primary);
   color: rgba(255, 255, 255, .7);
   padding-top: var(--space-8);
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
   gap: var(--space-6);
   padding-bottom: var(--space-7);
}

@media (max-width:900px) {
   .footer-grid {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width:560px) {
   .footer-grid {
      grid-template-columns: 1fr;
   }
}

/* The global `p{color:var(--color-muted)}` rule is more specific than inheriting
   the footer's own color, so paragraphs here were rendering dark-gray-on-navy —
   nearly invisible. Overridden explicitly. */
.site-footer p {
   color: rgba(255, 255, 255, .7);
}

.site-footer .brand {
   color: #fff;
}

.site-footer h4 {
   color: #fff;
   font-family: var(--font-display);
   font-size: .95rem;
   margin-bottom: var(--space-4);
}

.site-footer ul li {
   margin-bottom: 10px;
}

.site-footer a:hover {
   color: var(--color-accent);
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .1);
   padding-block: var(--space-5);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: var(--space-3);
   font-size: .85rem;
}

.social-row {
   display: flex;
   gap: 12px;
   margin-top: var(--space-4);
}

.social-row a {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background var(--dur-fast);
}

.social-row a:hover {
   background: var(--color-accent);
}

.social-row svg {
   width: 18px;
   height: 18px;
}

/* Back to top — bottom-left, so it never collides with the FAB opposite it. */
.back-to-top {
   position: fixed;
   bottom: 24px;
   left: 24px;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: var(--color-primary);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-md);
   opacity: 0;
   pointer-events: none;
   transform: translateY(10px);
   transition: all var(--dur-fast) var(--ease-out);
   z-index: 90;
}

.back-to-top.show {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
}

/* Scroll reveal */
[data-reveal] {
   opacity: 0;
   transform: translateY(16px);
   transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

[data-reveal].in-view {
   opacity: 1;
   transform: translateY(0);
}

/* Page header (inner pages) — Consistent Height & Premium Photographic Heroes */
.page-hero {
   position: relative;
   min-height: 460px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-block: clamp(64px, 8vh, 96px);
   background-color: var(--color-primary);
   color: #fff;
   overflow: hidden;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 10px 30px rgba(16, 8, 70, 0.18);
}

@media (min-width: 900px) {
   .page-hero {
      min-height: 500px;
   }
}

/* Background image layer with subtle scale */
.page-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 0;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-image: url("../assets/images/hero/hero-general-bg.jpg");
   transform: scale(1.01);
   transition: transform 1.2s var(--ease-out);
}

/* Multi-layer gradient scrim & ambient glow layer */
.page-hero::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
   background-image: 
      linear-gradient(100deg, rgba(16, 8, 70, 0.94) 0%, rgba(23, 11, 94, 0.88) 42%, rgba(16, 8, 70, 0.65) 75%, rgba(11, 37, 69, 0.42) 100%),
      radial-gradient(900px 500px at 90% 10%, rgba(0, 171, 239, 0.22), transparent 70%),
      radial-gradient(700px 400px at 0% 100%, rgba(46, 11, 162, 0.35), transparent 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%23FFFFFF' fill-opacity='0.03'/%3E%3C/svg%3E");
   pointer-events: none;
}

@media (max-width: 768px) {
   .page-hero::after {
      background-image: 
         linear-gradient(180deg, rgba(16, 8, 70, 0.95) 0%, rgba(23, 11, 94, 0.90) 100%),
         radial-gradient(600px 400px at 80% 0%, rgba(0, 171, 239, 0.18), transparent 70%);
   }
}

/* Page-specific hero backgrounds */
.page-hero--about::before {
   background-image: url("../assets/images/hero/hero-about-bg.jpg");
   background-position: center 36%;
}

.page-hero--services::before {
   background-image: url("../assets/images/hero/hero-services-bg.jpg");
   background-position: center 40%;
}

.page-hero--products::before {
   background-image: url("../assets/images/hero/hero-products-bg.jpg");
   background-position: center 36%;
}

.page-hero--parts::before {
   background-image: url("../assets/images/hero/hero-parts-bg.jpg");
   background-position: center 32%;
}

.page-hero--contact::before {
   background-image: url("../assets/images/hero/hero-contact-bg.jpg");
   background-position: center 40%;
}

.page-hero--general::before {
   background-image: url("../assets/images/hero/hero-general-bg.jpg");
   background-position: center;
}

/* Product detail page breadcrumb bar */
.page-hero--detail {
   min-height: auto;
   padding-block: var(--space-6);
}

.page-hero--detail::before {
   background-image: url("../assets/images/hero/hero-products-bg.jpg");
   opacity: 0.35;
}

.page-hero .container {
   position: relative;
   z-index: 2;
   width: 100%;
}

.page-hero h1 {
   color: #fff;
   font-size: clamp(2.1rem, 3.8vw, 3.1rem);
   font-weight: 700;
   letter-spacing: -0.025em;
   line-height: 1.18;
   margin-bottom: var(--space-4);
   max-width: 24ch;
   text-shadow: 0 2px 16px rgba(10, 4, 45, 0.6);
}

.page-hero p {
   color: rgba(255, 255, 255, 0.9);
   font-size: clamp(1.02rem, 1.25vw, 1.15rem);
   line-height: 1.65;
   max-width: 62ch;
   text-shadow: 0 1px 6px rgba(10, 4, 45, 0.4);
}

/* Glassmorphic breadcrumb pill */
.breadcrumb {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 0.84rem;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.75);
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: var(--radius-pill);
   padding: 6px 16px;
   margin-bottom: var(--space-5);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.breadcrumb a {
   color: rgba(255, 255, 255, 0.88);
   text-decoration: none;
   transition: color var(--dur-fast) var(--ease-out);
}

.breadcrumb a:hover {
   color: var(--color-cyan);
}

.breadcrumb span {
   color: #fff;
   font-weight: 600;
}

/* Two-col alternating content */
.split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-9);
   align-items: center;
}

.split.split-media-right {
   grid-template-columns: 1fr 1.3fr;
}

.split.split-media-left {
   grid-template-columns: 1.3fr 1fr;
}

@media (max-width:860px) {

   .split,
   .split.split-media-right,
   .split.split-media-left {
      grid-template-columns: 1fr;
      gap: var(--space-7);
   }
}

.split img {
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
}

/* Premium feature photo: a deliberately-cropped, wide-format frame for real photography
   (as opposed to `.split img`'s "whatever aspect ratio the source happens to be" —
   which squeezed wide group/action shots into a half-width column and made them read
   as cramped). Fixed aspect + object-fit:cover means the crop is a design decision,
   not an accident of column width. */
.feature-media {
   position: relative;
   border-radius: 28px;
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   aspect-ratio: 6/5;
}

.feature-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.feature-media .feature-badge {
   position: absolute;
   bottom: 20px;
   left: 20px;
   background: rgba(255, 255, 255, .94);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: 16px;
   padding: 14px 18px;
   display: flex;
   align-items: center;
   gap: 12px;
   box-shadow: var(--shadow-md);
   max-width: 250px;
}

.feature-media .feature-badge .num {
   font-family: var(--font-display);
   font-weight: 800;
   color: var(--color-primary);
   line-height: 1;
}

.feature-media .feature-badge .label {
   font-size: .78rem;
   color: var(--color-muted);
   font-weight: 600;
   margin-top: 3px;
   white-space: nowrap;
}

@media (max-width:480px) {
   .feature-media .feature-badge {
      padding: 10px 14px;
      gap: 10px;
   }

   .feature-media .feature-badge .hero-badge-icon {
      width: 36px;
      height: 36px;
   }

   .feature-media .feature-badge .hero-badge-icon svg {
      width: 18px;
      height: 18px;
   }
}

/* Subtle dot-grid backdrop for otherwise-bare centered-text sections (reuses the
   hero's texture at a smaller scale so a plain paragraph doesn't read as empty). */
.dot-pattern-bg {
   position: relative;
}

.dot-pattern-bg::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 0;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1.3' cy='1.3' r='1.3' fill='%23170B5E' fill-opacity='0.05'/%3E%3C/svg%3E");
}

.dot-pattern-bg>* {
   position: relative;
   z-index: 1;
}

/* ---- Industry Card Row — Photo Card Grid ----
   Replaces the generic pill chips (dot + pill shape) with a proper photo-card
   grid. Each card is a full-bleed photographic image with a dark scrim at the
   bottom and the label overlaid in white. Cards are equal-height, auto-sizing
   to fill the row, with a tight hover lift + scale on the inner image.
   The outer container is a flex-wrap grid that collapses to 2-col on tablet
   and single-col on mobile without any media-query gymnastics — pure CSS
   intrinsic sizing via min-width. */
.chip-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 14px;
   margin-top: var(--space-6);
}

/* The card itself: fixed height, rounded corners, overflow:hidden to clip
   the image and the scrim cleanly. position:relative anchors the overlay. */
.chip {
   position: relative;
   width: 220px;
   height: 148px;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-md);
   cursor: default;
   flex-shrink: 0;
   transition: transform var(--dur-med) var(--ease-out),
      box-shadow var(--dur-med) var(--ease-out);
}

.chip:hover {
   transform: translateY(-5px) scale(1.01);
   box-shadow: 0 20px 48px rgba(23, 11, 94, .22);
}

/* The photographic background — fills the card, scales slightly on hover
   for a subtle "breathing" effect. object-fit:cover handles any ratio. */
.chip .chip-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform var(--dur-med) var(--ease-out);
}

.chip:hover .chip-bg {
   transform: scale(1.07);
}

/* Dark scrim — strong at the bottom where the label lives, transparent at
   the top. Uses a three-stop gradient for a natural falloff. */
.chip::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to top,
         rgba(10, 6, 40, .88) 0%,
         rgba(10, 6, 40, .30) 55%,
         rgba(10, 6, 40, .04) 100%);
   pointer-events: none;
}

/* The label — positioned at the bottom, above the scrim (z-index). The
   chip-icon slot is hidden for the new card design; only the text label shows. */
.chip .chip-icon {
   display: none;
}

.chip span:not(.chip-icon) {
   position: absolute;
   bottom: 14px;
   left: 16px;
   right: 16px;
   z-index: 2;
   font-family: var(--font-display);
   font-size: .82rem;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: #fff;
   line-height: 1.2;
   text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* Gradient panel used to stage a background-removed product cutout wherever a section
   would otherwise need photography we don't have yet (see assetrequest.md). Keeps the
   page feeling designed on purpose rather than leaving a placeholder hole. */
.media-panel {
   position: relative;
   border-radius: 28px;
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   padding: var(--space-8);
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 320px;
   overflow: hidden;
}

.media-panel img {
   position: relative;
   z-index: 1;
   max-width: 78%;
   max-height: 280px;
   width: auto;
   filter: drop-shadow(0 18px 18px rgba(23, 11, 94, .16));
}

.media-panel .panel-tag {
   position: absolute;
   top: 18px;
   left: 18px;
   z-index: 2;
   background: rgba(255, 255, 255, .85);
   backdrop-filter: blur(6px);
   color: var(--color-secondary);
   font-size: .7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .04em;
   padding: 6px 13px;
   border-radius: var(--radius-pill);
   border: 1px solid var(--color-border);
}

/* Same "no photography yet" panel, but centered on a single big icon badge
   instead of a product cutout — used where a section needs a media-panel but
   there's no product image to stage (e.g. a services concept, not a product). */
.icon-tile-badge {
   position: relative;
   z-index: 1;
   width: 140px;
   height: 140px;
   border-radius: 50%;
   background: var(--color-primary);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 20px 40px rgba(23, 11, 94, .25);
}

.icon-tile-badge svg {
   width: 64px;
   height: 64px;
}

.check-list li {
   display: flex;
   gap: 12px;
   margin-bottom: var(--space-3);
}

.check-list svg {
   width: 22px;
   height: 22px;
   color: var(--color-success);
   flex-shrink: 0;
   margin-top: 2px;
}