/* ==========================================================================
   KK IT Solutions — Core Stylesheet
   Smart Solutions. Stronger Future.
   --------------------------------------------------------------------------
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Buttons & links
   06. Forms
   07. Top bar & header
   08. Mega menu
   09. Mobile navigation
   10. Hero slider
   11. Marquee / trust strip
   12. About & split layouts
   13. USP cards
   14. Service cards
   15. Featured security band
   16. Stats
   17. Process timeline
   18. Testimonials
   19. Enquiry block
   20. Modal
   21. Accordion / FAQ
   22. Brand & product cards
   23. Blog
   24. Page hero & breadcrumb
   25. Long-form prose
   26. Contact
   27. Footer
   28. Floating actions
   29. Motion & utilities
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------
     Brand palette, taken directly from the logo.

     The logo uses exactly two colours: #EF591E for the circuit mark and the
     K-K IT wordmark, and #000000 for the tagline. Everything below is built
     from those two — the orange is used verbatim, and the darks and greys are
     that black lifted to usable values, carrying a trace of the brand hue
     (17deg) at very low saturation so they read warm next to the orange
     rather than drifting cool. There is no blue anywhere in the system.
     ------------------------------------------------------------------ */

  /* Brand orange — #EF591E is the exact logo value */
  --accent:         #EF591E;
  --accent-light:   #F37D4F;   /* lifted, for orange on dark surfaces        */
  --accent-deep:    #BF400D;   /* AA on white (5.3:1) and on the band grey   */
  --accent-tint:    #FDEDE7;   /* faint wash for chips and icon plates       */

  /* Warm near-black scale, derived from the logo's black */
  --primary:        #24201E;   /* primary dark surface                       */
  --primary-dark:   #141110;   /* deepest surface: footer, hero, dark bands  */
  --primary-mid:    #38312E;   /* hover state on dark                        */
  --primary-soft:   #4D4542;

  /* Text */
  --text:           #1A1715;
  --text-soft:      #453D39;
  --muted:          #736864;
  --muted-light:    #9A918E;

  /* Light surfaces */
  --background:     #FFFFFF;
  --surface:        #F4F1EF;   /* alternating band grey            */
  --surface-2:      #EBE7E3;   /* card grounds, logo plates        */
  --border:         #E8E5E3;
  --border-strong:  #D5D0CD;
  --white:          #FFFFFF;

  /* Dark-section tokens */
  --on-dark:        #F6F3F1;
  --on-dark-muted:  #B4ABA7;
  --dark-border:    rgba(255, 255, 255, .12);
  --dark-surface:   rgba(255, 255, 255, .045);

  /* Typography */
  /* Manrope sets every heading; Inter carries body copy and all UI. */
  --font-heading: "Manrope", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Spacing scale */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 64px; --sp-11: 80px; --sp-12: 100px;

  --section-y: 54px;
  --container: 1280px;
  --gutter: 24px;

  /* Radii — one scale drives every rounded corner on the site.
     Change these four values to soften or sharpen the whole design. */
  --r-xs:  6px;    /* tags, small chips, compact icon plates */
  --r-sm:  10px;   /* buttons, inputs, icon tiles, badges     */
  --r-md:  16px;   /* cards, figures, panels, modal           */
  --r-lg:  22px;   /* large media blocks                      */
  --r-pill: 999px;

  /* Elevation — soft, low-spread */
  --sh-xs: 0 1px 2px rgba(26, 23, 21, .07);
  --sh-sm: 0 2px 8px rgba(26, 23, 21, .07), 0 1px 2px rgba(26, 23, 21, .05);
  --sh-md: 0 10px 30px rgba(26, 23, 21, .09), 0 2px 6px rgba(26, 23, 21, .05);
  --sh-lg: 0 22px 55px rgba(26, 23, 21, .13), 0 6px 14px rgba(26, 23, 21, .06);
  --sh-accent: 0 12px 30px rgba(205, 68, 14, .28);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t-base: .3s;
  --t-slow: .6s;

  /* Chrome */
  --topbar-h: 42px;
  --header-h: 76px;
  --header-h-sm: 68px;
  --z-header: 900;
  --z-mega: 910;
  --z-drawer: 960;
  --z-modal: 1000;
  --z-float: 880;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-sm) + 20px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-soft);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Contains any decorative element that sits slightly outside the grid
     (offset frames, floating cards) without ever showing a horizontal bar. */
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; border-style: none; }

/* Icons are authored as viewBox-only SVGs and sized by their component.
   This backstop stops any icon that misses a rule from filling its box. */
svg { width: 20px; height: 20px; flex: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-8) 0; }

::selection { background: var(--accent); color: #fff; }

/* Visible, on-brand focus for keyboard users only */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.section--dark :focus-visible,
.footer :focus-visible { outline-color: var(--accent-light); }

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: var(--fw-semibold);
  transition: top var(--t-base) var(--ease);
}
.skip-link:focus { top: 16px; }

/* Custom scrollbar (desktop, subtle) */
@media (hover: hover) and (min-width: 992px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--surface); }
  ::-webkit-scrollbar-thumb { background: #CFC8C4; border-radius: 8px; border: 2px solid var(--surface); }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted-light); }
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .42em;
  font-family: var(--font-heading);
  color: var(--text);
  font-weight: var(--fw-bold);
  line-height: 1.18;
  letter-spacing: -.018em;
}

h1 { font-size: clamp(1.95rem, 1.25rem + 2.6vw, 3.2rem); letter-spacing: -.026em; font-weight: var(--fw-black); }
h2 { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.35rem); letter-spacing: -.024em; }
h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); }
h4 { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); }
h5 { font-size: 1rem; }
h6 { font-size: .92rem; }

p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--fw-semibold); color: var(--text); }

/* --------------------------------------------------------------------------
   Eyebrow — a pill badge with a live pulse dot. Used above every section
   heading across the site so each block opens the same way.
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(239, 89, 30, .26);
  border-radius: var(--r-pill);
  background: rgba(253, 237, 231, .6);
  box-shadow: 0 4px 14px rgba(239, 89, 30, .09);
  font-size: .72rem;
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  animation: kk-eyebrow-pulse 2.4s var(--ease-out) infinite;
}
@keyframes kk-eyebrow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 89, 30, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(239, 89, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 89, 30, 0); }
}
.eyebrow--center::after { content: none; }

.section--dark .eyebrow,
.section--dark-alt .eyebrow,
.page-hero .eyebrow {
  border-color: rgba(243, 125, 79, .34);
  background: rgba(255, 255, 255, .07);
  box-shadow: none;
  color: var(--accent-light);
}
.section--dark .eyebrow::before,
.section--dark-alt .eyebrow::before,
.page-hero .eyebrow::before { background: var(--accent-light); }

/* --------------------------------------------------------------------------
   Heading accent — the closing word of a section heading, lifted into the
   brand gradient with a slow sweep and a rule that draws itself in view.
   The word is wrapped automatically by animations.js.
   -------------------------------------------------------------------------- */
.hl {
  position: relative;
  font-style: normal;
  padding-bottom: .08em;
  background-image: linear-gradient(100deg, var(--accent-deep) 0%, var(--accent) 30%, #F9A03F 50%, var(--accent) 70%, var(--accent-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: kk-title-sweep 6s linear infinite;
}
.hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), #F9A03F 55%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--ease-out) .2s;
}
.is-lit .hl::after { transform: scaleX(1); }
@keyframes kk-title-sweep {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}
.section--dark .hl,
.section--dark-alt .hl,
.page-hero .hl {
  background-image: linear-gradient(100deg, var(--accent-light) 0%, #FFC98F 45%, var(--accent-light) 100%);
}
.section--dark .hl::after,
.section--dark-alt .hl::after,
.page-hero .hl::after {
  background: linear-gradient(90deg, var(--accent-light), #FFC98F 55%, transparent);
}

/* --------------------------------------------------------------------------
   Shine sweep — a light band travels across every section heading, then
   rests off-screen before the next pass. Same idea as the React ShinyText
   component, done with one gradient and one keyframe so it costs nothing.
   -------------------------------------------------------------------------- */
.section-title,
.section-head h2,
.page-hero__copy h1,
.enquiry__aside h2 {
  --shine-base: var(--text);
  --shine-hot: #857B77;
  background-image: linear-gradient(
    120deg,
    var(--shine-base) 0%,
    var(--shine-base) 35%,
    var(--shine-hot) 50%,
    var(--shine-base) 65%,
    var(--shine-base) 100%
  );
  /* The tile repeats, so the rest position leaves the text in its base colour */
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: kk-shine 5.5s linear infinite;
}
@keyframes kk-shine {
  0%   { background-position: 150% center; }
  42%  { background-position: -50% center; }
  100% { background-position: -50% center; }
}
.section--dark .section-title,
.section--dark-alt .section-title,
.section--dark .section-head h2,
.section--dark-alt .section-head h2,
.page-hero__copy h1 {
  --shine-base: #E8E2DF;
  --shine-hot: #FFFFFF;
}
/* The accent word paints its own gradient, so it opts out of the parent's */
.hl { -webkit-text-fill-color: transparent; }

.section-title { margin: 0 0 14px; }
.section-lead {
  max-width: 62ch;
  font-size: .97rem;
  color: var(--muted);
  margin: 0;
}
.section--dark, .section--dark-alt { color: var(--on-dark-muted); }
.section--dark .section-lead,
.section--dark-alt .section-lead { color: var(--on-dark-muted); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6,
.section--dark-alt h1, .section--dark-alt h2, .section--dark-alt h3,
.section--dark-alt h4, .section--dark-alt h5, .section--dark-alt h6 { color: var(--on-dark); }
.section--dark strong, .section--dark-alt strong { color: var(--white); }

.text-accent { color: var(--accent); }
.text-center { text-align: center; }

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 900px; }
.container--wide { max-width: 1440px; }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight { padding-block: 34px; }
/* Grounds are flat, and alternate down the page: every content section is
   either white or the tinted band, never two of the same in a row. */
.section--alt { background: var(--surface); }
.section--surface { background: var(--surface); }
.section--dark,
.section--dark-alt {
  background: var(--primary-dark);
  color: var(--on-dark-muted);
}
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Every section opens the same way: badge, heading and lead centred, with
   any section-level action stacked underneath. */
.section-head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 30px;
  text-align: center;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.section-head--split .section-head__copy { max-width: 100%; }
.section-head .section-lead { margin-inline: auto; }

/* Section-level action, sitting under the cards it belongs to */
.section-foot {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Decorative backdrops */
.bg-grid, .bg-radial { position: absolute; inset: 0; pointer-events: none; }
.bg-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 40%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 68% at 50% 40%, #000 35%, transparent 100%);
}
.bg-grid--light {
  background-image:
    linear-gradient(rgba(26, 23, 21, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 23, 21, .05) 1px, transparent 1px);
}
.bg-radial {
  background:
    radial-gradient(560px 340px at 88% 8%, rgba(239, 89, 30, .18), transparent 70%),
    radial-gradient(620px 420px at 4% 92%, rgba(255, 238, 228, .07), transparent 70%);
}
.section > .container { position: relative; z-index: 2; }

/* Elegant divider */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
}

/* ==========================================================================
   05. BUTTONS & LINKS
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: .94rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Resting motion. Buttons and their arrows carry a light sheen and a slow
   nudge on their own, so the page reads as live before anyone points at it.
   Hover simply takes over and intensifies each one.
   -------------------------------------------------------------------------- */
.btn__icon {
  display: inline-flex;
  animation: kk-btn-nudge 2.8s var(--ease) infinite;
  transition: transform var(--t-base) var(--ease-out);
}
.btn:hover .btn__icon { animation: none; transform: translateX(5px); }
@keyframes kk-btn-nudge {
  0%, 62%, 100% { transform: translateX(0); }
  78%           { transform: translateX(4px); }
}

/* A band of light travelling across the solid buttons */
.btn--primary,
.btn--dark,
.btn--wa,
.btn--light { overflow: hidden; }
.btn--primary::after,
.btn--dark::after,
.btn--wa::after,
.btn--light::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-18deg);
  animation: kk-btn-sheen 4.5s var(--ease) infinite;
  pointer-events: none;
}
.btn--light::after { background: linear-gradient(100deg, transparent, rgba(239, 89, 30, .16), transparent); }
@keyframes kk-btn-sheen {
  0%        { left: -140%; }
  38%, 100% { left: 150%; }
}

/* The outline button fills from the left instead */
.btn--outline { overflow: hidden; z-index: 0; }
.btn--outline::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out);
}
.btn--outline:hover::after { transform: scaleX(1); }

.btn--primary {
  background: var(--accent-deep);
  color: #fff;
  box-shadow: 0 6px 18px rgba(205, 68, 14, .22);
}
.btn--primary:hover {
  background: var(--accent);
  box-shadow: var(--sh-accent);
  transform: translateY(-2px);
}
.btn--primary:active { transform: translateY(0); }

.btn--dark {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(26, 23, 21, .22);
}
.btn--dark:hover { background: var(--primary-mid); transform: translateY(-2px); box-shadow: var(--sh-md); }

.btn--outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--border-strong);
}
.btn--outline:hover {
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

.btn--light {
  background: #fff;
  color: var(--primary);
  box-shadow: var(--sh-sm);
}
.btn--light:hover { background: var(--accent-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-accent); }

.btn--ghost-light {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}
.btn--ghost-light:hover { background: #fff; color: var(--primary); border-color: #fff; transform: translateY(-2px); }

.btn--wa { background: #128C4B; color: #fff; }
.btn--wa:hover { background: #0F7A41; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(18, 140, 75, .28); }

.btn--sm { padding: 11px 20px; font-size: .84rem; }
.btn--lg { padding: 18px 34px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn.is-loading { opacity: .72; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kk-spin .7s linear infinite;
}
@keyframes kk-spin { to { transform: rotate(360deg); } }

/* Text link with animated arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .84rem;
  font-weight: var(--fw-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.link-arrow svg {
  width: 15px;
  height: 15px;
  animation: kk-btn-nudge 2.8s var(--ease) infinite;
  transition: transform var(--t-base) var(--ease-out);
}
.link-arrow:hover svg { animation: none; transform: translateX(5px); }

.link-underline {
  position: relative;
  color: var(--accent-deep);
  font-weight: var(--fw-medium);
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* Circular icon button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.icon-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.icon-btn svg { width: 17px; height: 17px; }

.btn-group { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   06. FORMS
   ========================================================================== */
.field { position: relative; margin-bottom: 12px; }
.field--full { grid-column: 1 / -1; }

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: .78rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.field__label .req { color: var(--accent-deep); }

.field__control {
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: .95rem;
  color: var(--text);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.field__control::placeholder { color: var(--muted-light); }
.field__control:hover { border-color: var(--muted-light); }
.field__control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(239, 89, 30, .16);
  outline: none;
}
.field:focus-within .field__label { color: var(--accent-deep); }

textarea.field__control { min-height: 96px; resize: vertical; line-height: 1.55; }

select.field__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23736864' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
  cursor: pointer;
}

/* --------------------------------------------------------------------
   Customisable select — the open list, not just the closed field.

   A native <select> renders its dropdown as an OS-drawn popup that no
   amount of CSS on the element can reach, which is why the open list
   arrives with the platform's blue highlight, square corners and its own
   width. `appearance: base-select` opts the control into the CSS-drawn
   picker so ::picker(select) and the options become real, styleable boxes.

   Progressive enhancement only. The <select> stays in the markup and keeps
   its value/options/change events, so validation and the URL pre-select in
   forms.js are untouched; browsers without base-select simply keep the
   native popup they draw today.
   -------------------------------------------------------------------- */
@supports (appearance: base-select) {

  select.field__control,
  select.field__control::picker(select) { appearance: base-select; }

  select.field__control,
  select.field__control:open,
  select.field__control:active {
    /* base-select supplies its own ::picker-icon, so drop the bg arrow.
       The explicit colour is needed because Chromium's base-select UA sheet
       greys the button while it is open or pressed. */
    background: #fff;
    background-image: none;
  }
  select.field__control {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding-right: 14px;
  }
  select.field__control::picker-icon {
    margin-left: auto;
    color: var(--muted);
    transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
  }
  select.field__control:open {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(239, 89, 30, .16);
  }
  select.field__control:open::picker-icon {
    transform: rotate(180deg);
    color: var(--accent-deep);
  }

  /* The popup itself.

     Left to the UA the picker is a free-floating box: it sizes to its widest
     option (so it grew past the field) and it is free to flip above the
     control, which is how it ended up covering the section over the form.
     Anchoring it to the field fixes both — it takes the field's exact width
     and always opens directly underneath.

     position-try-fallbacks must be set to none explicitly, not just left out:
     Chromium's UA sheet ships flip-block on the picker, so omitting the
     declaration hands the popup straight back to the UA and it flips above
     the field again. none pins it below, always. */
  select.field__control::picker(select) {
    position-area: block-end span-inline-end;
    position-try-fallbacks: none;
    position-try-order: normal;
    /* The global reset only reaches *, ::before and ::after, so the picker
       needs its own border-box or anchor-size() overshoots by the padding */
    box-sizing: border-box;
    width: anchor-size(width);
    margin-block: 6px;

    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: #fff;
    box-shadow: var(--sh-lg);
    padding: 6px;
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;

    opacity: 0;
    translate: 0 -6px;
    transition: opacity var(--t-fast) var(--ease),
                translate var(--t-fast) var(--ease),
                display var(--t-fast) allow-discrete,
                overlay var(--t-fast) allow-discrete;
  }
  select.field__control:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style {
    select.field__control:open::picker(select) { opacity: 0; translate: 0 -6px; }
  }

  select.field__control option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--r-xs);
    font-size: .92rem;
    line-height: 1.45;
    /* Long labels ("Security Solutions — CCTV, Access Control & Gating")
       wrap inside the popup instead of stretching it past the field */
    text-wrap: pretty;
    color: var(--text-soft);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  /* "Select a service" is the field's prompt, not one of the services. It is
     already shown on the closed control, so it gets no row of its own in the
     list. Hiding it here rather than with a hidden attribute on the <option>
     keeps it as the fallback label inside <selectedcontent>, so the closed
     field never renders blank. */
  select.field__control option[value=""] { display: none; }

  select.field__control option:hover,
  select.field__control option:focus,
  select.field__control option:active {
    background: var(--accent-tint);
    color: var(--accent-deep);
    outline: none;
  }
  select.field__control option:checked {
    background: var(--accent-tint);
    color: var(--accent-deep);
    font-weight: var(--fw-semibold);
  }
  /* Chromium reserves a gutter for its tick even when the option is unchecked */
  select.field__control option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--accent);
  }
  select.field__control option:not(:checked)::checkmark { visibility: hidden; }

  /* The field shows only the chosen label — never the tick or its gutter */
  select.field__control selectedcontent::checkmark { display: none; }

  .field.has-error select.field__control:open { border-color: #C42B1C; }
  .field.has-error select.field__control:open::picker-icon { color: #C42B1C; }

  @media (prefers-reduced-motion: reduce) {
    select.field__control::picker(select),
    select.field__control::picker-icon { transition: none; }
  }
}

/* Radio pills for site type */
.pill-group { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; }
.pill input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.pill span {
  display: block;
  padding: 10px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: .87rem;
  font-weight: var(--fw-medium);
  color: var(--muted);
  transition: all var(--t-base) var(--ease);
}
.pill input:hover + span { border-color: var(--muted-light); }
.pill input:checked + span {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-weight: var(--fw-semibold);
}
.pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Validation */
.field__error {
  display: none;
  margin-top: 7px;
  font-size: .8rem;
  font-weight: var(--fw-medium);
  color: #C42B1C;
}
.field.has-error .field__control { border-color: #C42B1C; background: #FFF7F6; }
.field.has-error .field__control:focus { box-shadow: 0 0 0 3px rgba(196, 43, 28, .13); }
.field.has-error .field__error { display: block; }
.field.has-error .field__label { color: #C42B1C; }

.form-note {
  margin-top: 14px;
  font-size: .8rem;
  color: var(--muted-light);
  line-height: 1.6;
}

.form-status {
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  line-height: 1.6;
}
.form-status.is-visible { display: flex; }
.form-status--success {
  background: #EDF9F1;
  border: 1px solid #B7E3C6;
  color: #14663A;
}
.form-status--error {
  background: #FDF2F1;
  border: 1px solid #F3C6C1;
  color: #96271A;
}
.form-status svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* Conditional block reveal */
.conditional {
  display: none;
  grid-column: 1 / -1;
}
.conditional.is-shown {
  display: block;
  animation: kk-reveal .35s var(--ease-out) both;
}
@keyframes kk-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Honeypot */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   07. TOP BAR & HEADER
   ========================================================================== */
.topbar {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  background: var(--primary-dark);
  color: #fff;
  font-size: .8rem;
}
/* hairline of brand colour along the very top edge of the site */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 22%, rgba(239, 89, 30, .25) 48%, transparent 78%);
}
.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .1) 70%, transparent);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--topbar-h);
}
.topbar__group {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.topbar__divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, .14);
  flex: none;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  letter-spacing: .01em;
  transition: color var(--t-base) var(--ease);
  min-width: 0;
}
.topbar__item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  flex: none;
  border-radius: var(--r-xs);
  background: rgba(239, 89, 30, .14);
  color: var(--accent);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.topbar__ico svg { width: 12px; height: 12px; }
.topbar__item:hover { color: var(--accent-light); }
.topbar__item:hover .topbar__ico { background: var(--accent-deep); color: #fff; }

.topbar__note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  white-space: nowrap;
}
.topbar a,
.topbar span,
.topbar strong,
.topbar small { color: #fff; }
.topbar__ico { color: var(--accent); }

.topbar__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #35C46E;
  box-shadow: 0 0 0 3px rgba(53, 196, 110, .18);
  flex: none;
}

/* ------------------------------------------------------- social (brand hues)
   The tile carries each platform's own colour with a white glyph, the same
   way the official share buttons look. Instagram runs its real gradient but
   stops at the magenta — the official ramp ends on blue, and the palette has
   no blue in it. */
.social { display: flex; align-items: center; gap: 8px; }
.social-link {
  --brand: var(--muted);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--brand-bg, var(--brand));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease),
              filter var(--t-base) var(--ease);
}
.social-link svg { width: 15px; height: 15px; }
.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .34);
  filter: brightness(1.1) saturate(1.05);
}
.social-link:active { transform: translateY(-1px); }

.social--xs .social-link { width: 28px; height: 28px; box-shadow: 0 1px 5px rgba(0, 0, 0, .28); }
.social--xs .social-link svg { width: 12px; height: 12px; }
.social--lg .social-link { width: 42px; height: 42px; }
.social--lg .social-link svg { width: 18px; height: 18px; }

.social-link[data-brand="linkedin"]  { --brand: #0A66C2; }
.social-link[data-brand="facebook"]  { --brand: #1877F2; }
.social-link[data-brand="instagram"] {
  --brand: #E4405F;
  --brand-bg: radial-gradient(circle at 28% 108%, #FDF497 0%, #FDF497 5%, #FD5949 42%, #D6249F 72%, #A32D91 100%);
}
.social-link[data-brand="twitter"]   { --brand: #000000; }
.social-link[data-brand="whatsapp"]  { --brand: #25D366; }
.social-link[data-brand="youtube"]   { --brand: #FF0000; }

/* X's official button is black on white; on our dark chrome it needs a hairline
   so the tile still reads as a button rather than a hole. */
.topbar .social-link[data-brand="twitter"],
.footer .social-link[data-brand="twitter"] { border-color: rgba(255, 255, 255, .32); }

/* --- Header ------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: #fff;
  border-bottom: 1px solid var(--border-strong);
  transition: box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.header > .container { position: relative; z-index: 1; }
.header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
  transition: min-height var(--t-base) var(--ease);
}
.header.is-stuck {
  box-shadow: 0 10px 30px rgba(26, 23, 21, .12);
  border-bottom-color: transparent;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.header.is-stuck .header__inner { min-height: var(--header-h-sm); }
.header.is-stuck .brand__mark { width: 33px; height: 36px; }
.header.is-stuck .brand__mark img { width: 56.6px; left: -12px; }
.header.is-stuck .brand__word { width: 79px; height: 25px; }
.header.is-stuck .brand__word img { width: 78.6px; top: -53.2px; }

/* Scroll progress hairline */
.header__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transition: width .1s linear;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Brand lockup. The supplied logo is a vertical stack — circular mark over
   the wordmark over the tagline — which reads badly in a horizontal bar and
   shrinks the tagline to a few illegible pixels. Both halves are cropped out
   of the same file and set side by side instead, so the header carries the
   real artwork in a proper horizontal lockup. Source is 824x872; the mark
   occupies x175-648 / y1-524 and the wordmark x0-823 / y557-818.
   -------------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  margin-right: auto;
}
.brand__mark,
.brand__word {
  position: relative;
  display: block;
  overflow: hidden;
  flex: none;
  transition: width var(--t-base) var(--ease), height var(--t-base) var(--ease);
}
.brand__mark img,
.brand__word img {
  position: absolute;
  max-width: none;
  height: auto;
  transition: width var(--t-base) var(--ease), left var(--t-base) var(--ease), top var(--t-base) var(--ease);
}
/* circular mark */
.brand__mark { width: 40px; height: 44px; }
.brand__mark img { width: 69.2px; left: -14.7px; top: 0; }
/* K-K IT + SOLUTIONS wordmark, tagline cropped away */
.brand__word { width: 95px; height: 30px; }
.brand__word img { width: 94.4px; left: 0; top: -63.8px; }

/* Larger lockup for the footer, smaller for the mobile drawer. Both crop the
   tagline away — the footer already prints it as its own pill. */
.brand--footer { margin: 0 0 14px; }
.brand--footer .brand__mark { width: 50px; height: 55px; }
.brand--footer .brand__mark img { width: 86.5px; left: -18.4px; top: 0; }
.brand--footer .brand__word { width: 118px; height: 37.5px; }
.brand--footer .brand__word img { width: 117.9px; top: -79.7px; }

.brand--drawer { margin-right: 0; }
.brand--drawer .brand__mark { width: 36px; height: 40px; }
.brand--drawer .brand__mark img { width: 62.9px; left: -13.4px; top: 0; }
.brand--drawer .brand__word { width: 86px; height: 27px; }
.brand--drawer .brand__word img { width: 84.9px; top: -57.4px; }

.brand__text { display: none; }

/* --- Primary navigation -------------------------------------------------- */
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__item { position: relative; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: .93rem;
  font-weight: var(--fw-medium);
  color: var(--text-soft);
  letter-spacing: -.005em;
  transition: color var(--t-base) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link { border-radius: var(--r-sm); }
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__item.is-active > .nav__link { background: var(--accent-tint); }
.nav__link:hover::after,
.nav__item.is-active > .nav__link::after { transform: scaleX(1); transform-origin: left; }
.nav__item.is-active > .nav__link { color: var(--primary); font-weight: var(--fw-semibold); }
.nav__caret {
  width: 10px; height: 10px;
  transition: transform var(--t-base) var(--ease);
  opacity: .7;
}
.nav__item.has-mega:hover .nav__caret,
.nav__item.has-mega.is-open .nav__caret { transform: rotate(180deg); }

.header__actions { display: none; align-items: center; gap: 18px; flex: none; }

.header__call {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding-right: 18px;
  border-right: 1px solid var(--border);
}
.header__call-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.header__call-icon svg { width: 17px; height: 17px; }
.header__call:hover .header__call-icon {
  background: var(--accent-deep);
  color: #fff;
  transform: rotate(-10deg);
}
.header__call-meta { display: block; line-height: 1.25; }
.header__call-meta small {
  display: block;
  font-size: .66rem;
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-light);
  margin-bottom: 2px;
}
.header__call-meta strong {
  display: block;
  font-size: .95rem;
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color var(--t-base) var(--ease);
}
.header__call:hover .header__call-meta strong { color: var(--accent-deep); }

/* ==========================================================================
   08. MEGA MENU
   ========================================================================== */
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--z-mega);
  width: min(560px, calc(100vw - 48px));
  transform: translate(-50%, 12px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out), visibility var(--t-base);
}
.nav__item.has-mega:hover .mega,
.nav__item.has-mega.is-open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
/* invisible hover bridge so the pointer can travel into the panel */
.nav__item.has-mega::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 14px;
}
.mega__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-height: calc(100vh - var(--header-h-sm) - 40px);
  overflow-y: auto;
}

.mega__panel {
  padding: 24px 24px 26px;
  min-width: 0;
}
.mega__panel + .mega__panel { border-left: 1px solid var(--border); }
.mega__group + .mega__group { margin-top: 22px; }
.mega__title {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 14px;
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.mega__title::before {
  content: "";
  width: 16px; height: 2px;
  margin-top: 7px;
  background: var(--accent);
  flex: none;
}
.mega__list { display: flex; flex-direction: column; gap: 1px; }
.mega__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 0;
  font-size: .9rem;
  color: var(--text-soft);
  border-radius: var(--r-xs);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mega__link::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: none;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mega__link:hover { color: var(--accent-deep); padding-left: 8px; background: var(--surface); }
.mega__link:hover::before { background: var(--accent); transform: scale(1.35); }

.mega__services .mega__link {
  display: block;
  position: relative;
  padding: 9px 10px 9px 16px;
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.mega__services .mega__link::before {
  position: absolute;
  left: 0; top: 17px;
}
.mega__services .mega__link:hover { padding-left: 20px; }
.mega__services .mega__link > span { display: block; line-height: 1.4; }
.mega__services .mega__link small {
  display: block;
  margin-top: 2px;
  font-size: .77rem;
  font-weight: var(--fw-regular);
  color: var(--muted-light);
  line-height: 1.45;
}

/* ==========================================================================
   09. MOBILE NAVIGATION
   ========================================================================== */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  flex: none;
  transition: border-color var(--t-base) var(--ease);
}
.burger:hover { border-color: var(--border-strong); }
.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease), width var(--t-base) var(--ease);
}
.burger span:nth-child(2) { width: 70%; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: translateX(8px); }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(18, 15, 13, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: var(--z-drawer);
  width: min(400px, 88vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -18px 0 50px rgba(18, 15, 13, .24);
  transform: translateX(100%);
  transition: transform .42s var(--ease-out);
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  flex: none;
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--primary);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.drawer__close:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.drawer__close svg { width: 17px; height: 17px; }

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 24px;
}

.mnav__item { border-bottom: 1px solid var(--border); }
.mnav__link,
.mnav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 17px 22px;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  color: var(--text);
  text-align: left;
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.mnav__link:hover, .mnav__toggle:hover { background: var(--surface); color: var(--accent-deep); }
.mnav__link svg {
  width: 13px; height: 13px;
  flex: none;
  color: var(--muted-light);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.mnav__link:hover svg { transform: translateX(3px); color: var(--accent-deep); }
.mnav__item.is-active > .mnav__link { color: var(--accent-deep); font-weight: var(--fw-semibold); }
.mnav__item.is-active > .mnav__link::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px; height: 22px;
  background: var(--accent);
}
.mnav__item.is-active { position: relative; }
.mnav__toggle svg {
  width: 13px; height: 13px;
  flex: none;
  color: var(--muted);
  transition: transform var(--t-base) var(--ease);
}
.mnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--accent-deep); }
.mnav__toggle[aria-expanded="true"] { color: var(--accent-deep); }

.mnav__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s var(--ease);
  background: var(--surface);
}
.mnav__panel-inner { padding: 6px 22px 20px; }
.mnav__group + .mnav__group { margin-top: 18px; }
.mnav__group-title {
  margin: 0 0 8px;
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.mnav__sub { display: flex; flex-direction: column; }
.mnav__sub a {
  padding: 9px 0;
  font-size: .9rem;
  color: var(--text-soft);
  border-bottom: 1px solid rgba(26, 23, 21, .06);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.mnav__sub a:hover { color: var(--accent-deep); padding-left: 6px; }

.drawer__foot {
  flex: none;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: #fff;
  display: grid;
  gap: 10px;
}
.drawer__foot .btn { width: 100%; }
.drawer__meta {
  margin-top: 4px;
  font-size: .78rem;
  color: var(--muted-light);
  text-align: center;
}

/* ==========================================================================
   10. HERO SLIDER
   ========================================================================== */
.hero {
  position: relative;
  background: var(--primary-dark);
  overflow: hidden;
}
.hero__viewport { position: relative; }
.hero__track { position: relative; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.05s var(--ease), visibility 1.05s;
}
.hero__slide:first-child { position: relative; }
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

.hero__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.045);
  transition: transform 9s linear;
  will-change: transform;
}
.hero__slide.is-active .hero__media img { transform: scale(1); }

/* Desktop: the supplied banner artwork already carries its own headline —
   it is shown complete, uncropped and never covered by HTML copy. */
/* The <picture> has to carry the height too, otherwise the img's height:100%
   resolves against an auto-height parent and falls back to the file's own
   aspect ratio — which left a gap under the portrait mobile artwork. */
.hero__media picture { display: block; height: 100%; }
.hero__media img { display: block; }
.hero__slide .hero__media { aspect-ratio: 2560 / 799; max-height: 640px; }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 11, 9, .82) 0%, rgba(14, 11, 9, .55) 46%, rgba(14, 11, 9, .12) 78%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}
.hero__content {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  align-items: center;
}
.hero__content .container { width: 100%; }
.hero__copy { max-width: 620px; }
.hero__title { color: #fff; margin-bottom: 16px; }
.hero__text {
  color: rgba(246, 243, 241, .86);
  font-size: 1.02rem;
  margin-bottom: 28px;
  max-width: 46ch;
}
.hero__rule {
  width: 0; height: 2px;
  background: var(--accent);
  margin-bottom: 22px;
  transition: width .9s var(--ease-out) .3s;
}
.hero__slide.is-active .hero__rule { width: 76px; }

/* Slide-in choreography for mobile copy */
.hero__copy > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.hero__slide.is-active .hero__copy > * { opacity: 1; transform: none; }
.hero__slide.is-active .hero__copy > *:nth-child(1) { transition-delay: .18s; }
.hero__slide.is-active .hero__copy > *:nth-child(2) { transition-delay: .28s; }
.hero__slide.is-active .hero__copy > *:nth-child(3) { transition-delay: .38s; }
.hero__slide.is-active .hero__copy > *:nth-child(4) { transition-delay: .48s; }
.hero__slide.is-active .hero__copy > *:nth-child(5) { transition-delay: .58s; }
.hero__rule { opacity: 1 !important; transform: none !important; }

/* Controls */
.hero__nav {
  position: absolute;
  bottom: 22px;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(18, 15, 13, .32);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.hero__nav:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.hero__nav--prev { right: 82px; }
.hero__nav--next { right: 26px; }
.hero__nav--prev:hover { transform: translateX(-3px); }
.hero__nav--next:hover { transform: translateX(3px); }
.hero__nav svg { width: 17px; height: 17px; }

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 6;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: rgba(18, 15, 13, .4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero__dot {
  position: relative;
  width: 28px; height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .35);
  overflow: hidden;
  transition: width var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.hero__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--accent);
}
.hero__dot:hover { background: rgba(255, 255, 255, .6); }
.hero__dot.is-active { width: 48px; background: rgba(255, 255, 255, .28); }
.hero__dot.is-active::after { animation: kk-dot-fill var(--hero-duration, 6500ms) linear forwards; }
.hero.is-paused .hero__dot.is-active::after { animation-play-state: paused; }
@keyframes kk-dot-fill { from { width: 0; } to { width: 100%; } }

/* Floating trust chips beneath the hero */
.hero-trust {
  position: relative;
  z-index: 4;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: var(--primary-dark);
}
/* Travelling accent rule along the top edge, shared with the brand band */
.hero-trust::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, #F9A03F 50%, var(--accent) 78%, transparent);
  background-size: 200% 100%;
  animation: kk-strip-rule 9s linear infinite;
  pointer-events: none;
}
.hero-trust__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero-trust__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-right: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--on-dark);
  font-size: .9rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -.005em;
  transition: background var(--t-base) var(--ease);
}
/* Accent bar that draws itself under the item on hover */
.hero-trust__item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #F9A03F);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease-out);
}
.hero-trust__item:hover { background: rgba(255, 255, 255, .05); }
.hero-trust__item:hover::after { transform: scaleX(1); }

.hero-trust__item svg {
  width: 42px;
  height: 42px;
  padding: 10px;
  flex: none;
  border-radius: var(--r-sm);
  border: 1px solid rgba(239, 89, 30, .26);
  background: rgba(239, 89, 30, .13);
  color: var(--accent);
  transition:
    background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease-out);
}
.hero-trust__item:hover svg {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px) scale(1.05);
}
.hero-trust__item small {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  font-weight: var(--fw-regular);
  color: var(--on-dark-muted);
  letter-spacing: 0;
}

/* ==========================================================================
   11. MARQUEE / TRUST STRIP
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: kk-marquee var(--marquee-duration, 46s) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
@keyframes kk-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee__group { display: flex; align-items: center; flex: none; }

/* --------------------------------------------------------------------------
   Brand chips — glass plates that lift, glow and colour up on hover.
   -------------------------------------------------------------------------- */
.marquee--brands { padding-block: 10px; }
.marquee--brands + .marquee--brands { margin-top: 16px; }
.marquee--brands .marquee__group { gap: 16px; padding-inline: 8px; }

.brand-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 82px;
  padding: 3px 0;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(26, 23, 21, .06), 0 1px 2px rgba(26, 23, 21, .05);
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
/* Gradient hairline that fades in around the plate on hover */
.brand-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), #F9A03F 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
}
/* Warm wash that rises from the base of the plate */
.brand-chip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: 150%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 89, 30, .2), transparent 62%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
  pointer-events: none;
}
/* Diagonal light sweep, fired on hover */
.brand-chip__shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.brand-chip img {
  position: relative;
  z-index: 1;
  height: 76px;
  width: auto;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: contrast(1.08);
  opacity: 1;
  transition:
    filter var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease-out);
}
.brand-chip:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 18px 38px rgba(239, 89, 30, .22), 0 4px 10px rgba(26, 23, 21, .07);
}
.brand-chip:hover::before,
.brand-chip:hover::after { opacity: 1; }
.brand-chip:hover img { filter: saturate(1.15) contrast(1.12); opacity: 1; transform: scale(1.06); }
.brand-chip:hover .brand-chip__shine { animation: kk-chip-shine .85s var(--ease) forwards; }
@keyframes kk-chip-shine {
  to { left: 130%; }
}

.marquee--dark .brand-chip {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
  box-shadow: none;
}
.marquee--dark .brand-chip img {
  mix-blend-mode: normal;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .42;
}
.marquee--dark .brand-chip:hover img { filter: grayscale(0) brightness(1) invert(0); opacity: 1; }

/* ==========================================================================
   12. ABOUT & SPLIT LAYOUTS
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.split--reverse .split__media { order: -1; }

.split__media { position: relative; }
/* Warm bloom behind the picture so it sits on the page rather than on top of it */
.split__media::before {
  content: "";
  position: absolute;
  left: -8%;
  top: 6%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 89, 30, .18), transparent 68%);
  filter: blur(52px);
  z-index: 0;
  pointer-events: none;
}
.section--dark .split__media::before,
.section--dark-alt .split__media::before { background: radial-gradient(circle, rgba(239, 89, 30, .3), transparent 68%); }

.figure {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--sh-lg);
}
/* Hairline highlight along the top of the plate */
.figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(26, 23, 21, .06);
  pointer-events: none;
}
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.figure--portrait { aspect-ratio: 4 / 5; }
.figure--landscape { aspect-ratio: 16 / 9; }
.figure--square { aspect-ratio: 1 / 1; }
.figure--tall { aspect-ratio: 4 / 5; }
.figure--cap { max-height: 520px; }
.split__media:hover .figure img { transform: scale(1.045); }

/* Decorative frame offset behind the main image */
.figure-frame { position: relative; }
.figure-frame::before {
  content: "";
  position: absolute;
  left: -16px; top: -16px;
  width: 44%; height: 44%;
  border-left: 3px solid transparent;
  border-top: 3px solid transparent;
  border-radius: var(--r-lg) 0 0 0;
  background: linear-gradient(135deg, var(--accent), #F9A03F 55%, transparent) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.figure-frame::after {
  content: "";
  position: absolute;
  right: -16px; bottom: -16px;
  width: 44%; height: 44%;
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0 0 var(--r-lg) 0;
  pointer-events: none;
}
.section--dark .figure-frame::after,
.section--dark-alt .figure-frame::after {
  border-color: rgba(255, 255, 255, .2);
}

/* Small floating card over the image */
.float-card {
  position: absolute;
  left: -18px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 320px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: 0 20px 44px rgba(26, 23, 21, .16), 0 4px 10px rgba(239, 89, 30, .1);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.split__media:hover .float-card {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px rgba(26, 23, 21, .18), 0 6px 14px rgba(239, 89, 30, .16);
}
.float-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  color: var(--accent-deep);
  flex: none;
}
.float-card__icon svg { width: 21px; height: 21px; }
.float-card strong {
  display: block;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.35;
}
.float-card span {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.45;
}

.float-card--top-left {
  left: auto; bottom: auto;
  right: -14px; top: 34px;
}

/* Secondary inset image */
.figure-inset {
  position: absolute;
  right: -26px;
  bottom: -26px;
  width: 44%;
  border: 6px solid #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  z-index: 3;
}
.figure-inset img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* Feature checklist */
.checklist { display: grid; gap: 9px; margin: 18px 0 0; }
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.checklist li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .7);
  font-size: .92rem;
  color: var(--text-soft);
  line-height: 1.45;
  transition:
    transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    background var(--t-base) var(--ease);
}
.checklist li:hover {
  transform: translateY(-2px);
  border-color: rgba(239, 89, 30, .38);
  background: #fff;
  box-shadow: 0 10px 22px rgba(239, 89, 30, .12);
}
.checklist svg {
  width: 26px; height: 26px;
  padding: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.checklist li:hover svg { background: var(--accent); color: #fff; }
.section--dark .checklist li,
.section--dark-alt .checklist li {
  border-color: var(--dark-border);
  background: var(--dark-surface);
  color: var(--on-dark-muted);
}
.section--dark .checklist li:hover,
.section--dark-alt .checklist li:hover { background: rgba(255, 255, 255, .08); }
.section--dark .checklist svg,
.section--dark-alt .checklist svg { background: rgba(239, 89, 30, .18); color: var(--accent-light); }

.split__actions { margin-top: 22px; }

/* Small stat row under about copy */
.mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.mini-stats__item { background: #fff; padding: 16px 20px; }
.mini-stats__item strong {
  display: block;
  font-size: 1.02rem;
  font-weight: var(--fw-bold);
  color: var(--primary);
  line-height: 1.3;
  margin-bottom: 3px;
}
.mini-stats__item span { font-size: .8rem; color: var(--muted); }

/* ==========================================================================
   13. USP CARDS
   ========================================================================== */
/* --------------------------------------------------------------------------
   Why-choose-us cards. Squared off against a full-height accent spine on the
   left and rounded away from it, with a round icon plate and the count as a
   small pill — deliberately a different shape from the boxed category cards.
   -------------------------------------------------------------------------- */
.usp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px 26px;
  background: #FFFFFF;
  border: 1px solid rgba(239, 89, 30, .26);
  border-radius: var(--r-sm) var(--r-lg) var(--r-lg) var(--r-sm);
  overflow: hidden;
  transition:
    transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
/* The spine — always lit, widening on hover */
.usp-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), #F9A03F);
  transition: width var(--t-base) var(--ease);
}
.usp-card:hover {
  transform: translateY(-5px);
  border-color: rgba(239, 89, 30, .5);
  box-shadow: 0 18px 40px rgba(239, 89, 30, .14), 0 4px 12px rgba(26, 23, 21, .06);
}
.usp-card:hover::before { width: 6px; }

/* The count reads as a small pill rather than a ghost numeral */
.usp-card__num {
  position: absolute;
  right: 16px;
  top: 16px;
  padding: 4px 11px;
  border: 1px solid rgba(239, 89, 30, .24);
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  line-height: 1.45;
  color: var(--accent-deep);
  transition:
    background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
  pointer-events: none;
}
.usp-card:hover .usp-card__num {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

.usp-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: 14px;
  border: 1px solid rgba(239, 89, 30, .22);
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  transition:
    background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    transform var(--t-base) var(--ease-out);
}
.usp-card__icon svg { width: 23px; height: 23px; }
.usp-card:hover .usp-card__icon {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 18px rgba(239, 89, 30, .3);
}

/* Category variant — the accent treatment is the resting state here, not a
   hover reveal, so the four cards carry colour on the page as they sit. */
.usp-card--cat {
  padding: 22px 22px 20px;
  border-color: rgba(239, 89, 30, .26);
  border-radius: var(--r-md);
}
/* a rule across the top rather than a spine down the side */
.usp-card--cat::before {
  left: 0;
  top: 0;
  bottom: auto;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #F9A03F);
}
.usp-card--cat:hover::before { width: 100%; }
.usp-card--cat .usp-card__icon {
  border-color: transparent;
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(239, 89, 30, .28);
}
.usp-card--cat:hover .usp-card__icon {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 24px rgba(239, 89, 30, .36);
}
.usp-card--cat .usp-card__num {
  right: 18px;
  top: 15px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 2.75rem;
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent-tint);
}
@supports (-webkit-text-stroke: 1px red) {
  .usp-card--cat .usp-card__num {
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(239, 89, 30, .45);
  }
}
.usp-card--cat:hover .usp-card__num { background: none; color: transparent; }
@supports not (-webkit-text-stroke: 1px red) {
  .usp-card--cat:hover .usp-card__num { color: var(--accent-tint); }
}
.usp-card--cat:hover {
  border-color: rgba(239, 89, 30, .5);
  box-shadow: 0 22px 46px rgba(239, 89, 30, .2), 0 5px 14px rgba(26, 23, 21, .07);
}
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip-list li {
  padding: 4px 10px;
  border: 1px solid rgba(239, 89, 30, .26);
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  font-size: .74rem;
  font-weight: var(--fw-medium);
  color: var(--accent-deep);
  line-height: 1.5;
  transition:
    border-color var(--t-base) var(--ease),
    background var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}
.usp-card--cat:hover .chip-list li {
  border-color: rgba(239, 89, 30, .45);
  background: #FCE0D4;
}

/* Two-up cards are wide enough to run the icon down the side, with the
   heading and copy set beside it rather than stacked underneath. */
.grid--2 > .usp-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon text";
  align-items: start;
  column-gap: 18px;
  row-gap: 5px;
  padding: 26px 26px;
  /* evenly rounded and washed in the brand tint — no spine on this variant */
  border: 1px solid rgba(191, 64, 13, .34);
  border-radius: var(--r-lg);
  background: #EDB395;
}
.grid--2 > .usp-card::before { content: none; }
.grid--2 > .usp-card:hover {
  border-color: rgba(191, 64, 13, .6);
  background: #E79E79;
}
/* the second card takes the amber side of the palette so the pair reads as
   two related tones rather than a repeat */
.grid--2 > .usp-card:nth-child(2n) {
  border-color: rgba(180, 112, 14, .38);
  background: #F0CE95;
}
.grid--2 > .usp-card:nth-child(2n):hover {
  border-color: rgba(180, 112, 14, .6);
  background: #EABF77;
}
.grid--2 > .usp-card:nth-child(2n) .usp-card__icon {
  color: #B4700E;
  box-shadow: 0 6px 16px rgba(249, 160, 63, .26);
}
.grid--2 > .usp-card:nth-child(2n):hover .usp-card__icon { background: #F9A03F; color: #fff; }
.grid--2 > .usp-card:nth-child(2n) .usp-card__num {
  border-color: rgba(249, 160, 63, .4);
  color: #B4700E;
}
.grid--2 > .usp-card .usp-card__icon {
  grid-area: icon;
  width: 56px; height: 56px;
  margin-bottom: 0;
  border-color: transparent;
  background: #fff;
  color: var(--accent-deep);
  box-shadow: 0 6px 16px rgba(239, 89, 30, .18);
}
.grid--2 > .usp-card:hover .usp-card__icon {
  background: var(--accent);
  color: #fff;
}
.grid--2 > .usp-card .usp-card__num {
  border-color: rgba(239, 89, 30, .3);
  background: #fff;
}
.grid--2 > .usp-card .usp-card__icon svg { width: 26px; height: 26px; }
.grid--2 > .usp-card h3 { grid-area: title; margin-bottom: 0; font-size: 1.14rem; }
.grid--2 > .usp-card p  { grid-area: text; padding-right: 48px; color: var(--text); }

.usp-card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.usp-card p { font-size: .87rem; color: var(--muted); margin: 0; line-height: 1.6; }
.usp-card > .link-arrow { margin-top: auto; padding-top: 16px; }

/* Company USP strip — scannable advantage points, deliberately lighter
   chrome than the numbered Why-Choose-Us cards so the two never look alike. */
.usp-strip {
  border-block: 1px solid var(--border);
  background: #fff;
}
.usp-strip__list {
  display: grid;
  grid-template-columns: 1fr;
}
.usp-point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-base) var(--ease);
}
.usp-point:hover { background: #fff; }
.usp-point:last-child { border-right: 0; }
.usp-point__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  color: var(--accent-deep);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.usp-point:hover .usp-point__icon { background: var(--accent-deep); color: #fff; }
.usp-point__icon svg { width: 21px; height: 21px; }
.usp-point strong {
  display: block;
  font-size: .98rem;
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 4px;
}
.usp-point span {
  display: block;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.6;
}

/* Dark variant */
.usp-card--dark {
  background: var(--dark-surface);
  border-color: var(--dark-border);
}
.usp-card--dark h3 { color: var(--on-dark); }
.usp-card--dark p { color: var(--on-dark-muted); }
.usp-card--dark .usp-card__num { color: rgba(255, 255, 255, .07); -webkit-text-stroke-color: rgba(255, 255, 255, .16); }
.usp-card--dark .usp-card__icon { background: rgba(255, 255, 255, .07); border-color: var(--dark-border); color: var(--accent); }
.usp-card--dark:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); }

/* ==========================================================================
   14. SERVICE CARDS
   ========================================================================== */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  height: 100%;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}

.service-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
  flex: none;
}
.service-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .85s var(--ease-out);
}
.service-card:hover .service-card__media img { transform: scale(1.075); }
.service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 15, 13, 0) 32%, rgba(18, 15, 13, .55) 100%);
  opacity: .75;
  transition: opacity var(--t-base) var(--ease);
}
.service-card:hover .service-card__media::after { opacity: 1; }

.service-card__icon {
  position: absolute;
  right: 22px;
  top: -27px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: var(--r-sm);
  background: var(--accent-deep);
  color: #fff;
  box-shadow: var(--sh-accent);
  transition: transform var(--t-base) var(--ease-out), background var(--t-base) var(--ease);
}
.service-card__icon svg { width: 24px; height: 24px; }
.service-card:hover .service-card__icon { transform: translateY(-4px) scale(1.05); background: var(--accent); }

.service-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 24px 20px;
}
.service-card__body h3 {
  font-size: 1.18rem;
  margin: 0 0 12px;
  padding-right: 46px;
  transition: color var(--t-base) var(--ease);
}
.service-card:hover .service-card__body h3 { color: var(--accent-deep); }
.service-card__body p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.66;
  margin: 0 0 16px;
}
.service-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.service-card__accent {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width var(--t-slow) var(--ease-out);
}
.service-card:hover .service-card__accent { width: 100%; }

/* ==========================================================================
   15. FEATURED SECURITY BAND
   ========================================================================== */
.security {
  position: relative;
  overflow: hidden;
  background: var(--primary-dark);
}
.security__scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(239, 89, 30, .55), transparent);
  animation: kk-scan 7s var(--ease) infinite;
  pointer-events: none;
}
@keyframes kk-scan {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(var(--scan-distance, 620px)); opacity: 0; }
}

.security__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.security__features { display: grid; gap: 1px; margin: 16px 0 18px; background: var(--dark-border); border: 1px solid var(--dark-border); }
.security__feature {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 16px;
  background: var(--primary-dark);
  transition: background var(--t-base) var(--ease), padding-left var(--t-base) var(--ease);
}
.security__feature:hover { background: rgba(255, 255, 255, .05); padding-left: 26px; }
.security__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: rgba(239, 89, 30, .13);
  color: var(--accent);
  flex: none;
}
.security__feature-icon svg { width: 19px; height: 19px; }
.security__feature strong {
  display: block;
  font-size: .96rem;
  color: var(--on-dark);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}
.security__feature span { font-size: .8rem; line-height: 1.45; color: var(--on-dark-muted); }

.security__badge {
  position: absolute;
  left: 26px; bottom: 26px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(18, 15, 13, .78);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: .84rem;
  font-weight: var(--fw-semibold);
}
.security__badge svg { width: 18px; height: 18px; color: var(--accent); }

/* ==========================================================================
   16. STATS
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--dark-border);
  border: 1px solid var(--dark-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stat {
  position: relative;
  padding: 26px 24px;
  background: var(--primary-dark);
  text-align: left;
  transition: background var(--t-base) var(--ease);
}
.stat:hover { background: rgba(255, 255, 255, .04); }
.stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .06);
  color: var(--accent);
}
.stat__icon svg { width: 22px; height: 22px; }
.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, .95rem + .7vw, 1.45rem);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin-bottom: 7px;
}
.stat__label { font-size: .87rem; color: var(--on-dark-muted); line-height: 1.6; }
.stat::after {
  content: "";
  position: absolute;
  left: 28px; bottom: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width var(--t-base) var(--ease-out);
}
.stat:hover::after { width: 46px; }

/* ==========================================================================
   17. PROCESS TIMELINE
   ========================================================================== */
.process { position: relative; display: grid; gap: 28px; grid-template-columns: 1fr; }
.process::before {
  content: "";
  position: absolute;
  left: 27px; top: 26px; bottom: 26px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(239, 89, 30, .13));
}
.process__step {
  position: relative;
  display: flex;
  gap: 22px;
  padding-left: 0;
}
.process__marker {
  position: relative;
  font-family: var(--font-heading);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  color: var(--primary);
  font-size: .95rem;
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  transition: all var(--t-base) var(--ease);
}
.process__step:hover .process__marker,
.process__step.is-inview .process__marker {
  border-color: var(--accent);
  background: var(--accent-deep);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(239, 89, 30, .13);
}
.process__body { padding-top: 6px; }
.process__body h3 { font-size: 1.12rem; margin-bottom: 8px; }
.process__body p { font-size: .9rem; color: var(--muted); margin: 0; line-height: 1.65; }
.process__icon { display: none; }

/* ==========================================================================
   18. TESTIMONIALS
   ========================================================================== */
/* --------------------------------------------------------------------------
   The testimonial band sits on solid brand colour, with white cards floating
   on it and the carousel arrows parked outside the row.
   -------------------------------------------------------------------------- */
.testimonials {
  padding-block: 42px;
  background: var(--accent-deep);
  color: #fff;
}
.testimonials .section-head { margin-bottom: 24px; }
.testimonials .section-title { --shine-base: #FFFFFF; --shine-hot: #FFE3D5; }
.testimonials .eyebrow {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12);
  box-shadow: none;
  color: #fff;
}
.testimonials .eyebrow::before { background: #fff; }
@keyframes kk-eyebrow-pulse-light {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.testimonials .eyebrow::before { animation-name: kk-eyebrow-pulse-light; }
.testimonials .hl {
  background-image: linear-gradient(100deg, #FFC5A4 0%, #FFE7DA 45%, #FFC5A4 100%);
}
.testimonials .hl::after {
  background: linear-gradient(90deg, #FFFFFF, rgba(255, 255, 255, .4) 55%, transparent);
}

.tcarousel { position: relative; }
.tcarousel__viewport { overflow: hidden; }
.tcarousel__track {
  display: flex;
  transition: transform .6s var(--ease-out);
  will-change: transform;
}
.tcarousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: 0;
}
.tcarousel__slide > * { height: 100%; }

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px 20px;
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(26, 23, 21, .1);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.tcard:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(26, 23, 21, .18); }
.tcard__quote {
  position: absolute;
  right: 20px; top: 18px;
  width: 60px; height: 60px;
  color: rgba(239, 89, 30, .22);
  transition: color var(--t-base) var(--ease);
}
.tcard:hover .tcard__quote { color: rgba(239, 89, 30, .34); }
.tcard__rating { display: flex; gap: 2px; margin-bottom: 13px; }
.tcard__rating svg { width: 19px; height: 19px; color: #F5B301; }
.tcard__text {
  font-size: 1rem;
  line-height: 1.68;
  color: var(--text-soft);
  margin: 0 0 16px;
  position: relative;
  z-index: 2;
}
.tcard__person {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.tcard__avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--surface-2);
}
/* name and role read on one line, as in the reference */
.tcard__person > span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.tcard__person strong { font-size: .97rem; color: var(--text); line-height: 1.4; }
.tcard__person span span { font-size: .86rem; color: var(--muted); }

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 30px;
}
/* On the testimonial band the arrows sit either side of the cards */
.testimonials .carousel-controls { margin-top: 22px; }
.testimonials .icon-btn {
  width: 48px;
  height: 48px;
  border-color: transparent;
  background: #fff;
  color: var(--primary);
  box-shadow: 0 8px 20px rgba(26, 23, 21, .18);
}
.testimonials .icon-btn:hover {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}
.testimonials .cdot { background: rgba(255, 255, 255, .4); }
.testimonials .cdot.is-active { background: #fff; }
.carousel-controls__dots { display: flex; align-items: center; gap: 8px; }
.cdot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: all var(--t-base) var(--ease);
}
.cdot:hover { background: var(--muted-light); }
.cdot.is-active { width: 26px; border-radius: 4px; background: var(--accent-deep); }
.section--dark .cdot, .section--dark-alt .cdot { background: rgba(255, 255, 255, .22); }
.section--dark .cdot.is-active, .section--dark-alt .cdot.is-active { background: var(--accent); }
.section--dark .icon-btn, .section--dark-alt .icon-btn {
  background: transparent;
  border-color: var(--dark-border);
  color: var(--on-dark);
}
.section--dark .icon-btn:hover, .section--dark-alt .icon-btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}

/* ==========================================================================
   19. ENQUIRY BLOCK
   ========================================================================== */
.enquiry {
  position: relative;
  overflow: hidden;
  padding-block: 42px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
/* the decorative glow has to be far softer on a light ground */
.enquiry .bg-radial {
  background:
    radial-gradient(560px 340px at 88% 8%, rgba(239, 89, 30, .1), transparent 70%),
    radial-gradient(620px 420px at 4% 92%, rgba(191, 64, 13, .06), transparent 70%);
}
.enquiry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
}
.enquiry__aside h2 { color: var(--text); }
.enquiry__aside > p { color: var(--muted); max-width: 46ch; }

.contact-list { display: grid; gap: 9px; margin-top: 20px; }
.contact-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.contact-tile:hover {
  border-color: var(--border-strong);
  box-shadow: var(--sh-md);
  transform: translateX(5px);
}
.contact-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  color: var(--accent-deep);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.contact-tile:hover .contact-tile__icon { background: var(--accent-deep); color: #fff; }
.contact-tile__icon svg { width: 20px; height: 20px; }
.contact-tile__meta { min-width: 0; }
.contact-tile__meta span {
  display: block;
  font-size: .72rem;
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.contact-tile__meta strong {
  display: block;
  font-size: 1rem;
  color: var(--text);
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
  word-break: break-word;
}
.contact-tile__arrow { margin-left: auto; color: var(--muted-light); flex: none; transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease); }
.contact-tile:hover .contact-tile__arrow { transform: translateX(4px); color: var(--accent-deep); }
.contact-tile__arrow svg { width: 16px; height: 16px; }

/* Form card */
.form-card {
  position: relative;
  padding: 24px 22px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.form-card__head { margin-bottom: 16px; }
.form-card__head h3 { margin-bottom: 6px; }
.form-card__head p { font-size: .88rem; color: var(--muted); margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 20px; }

/* ==========================================================================
   20. MODAL
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
  overscroll-behavior: contain;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 15, 13, .7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  margin: auto;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  transform: translateY(26px) scale(.985);
  opacity: 0;
  transition: transform .38s var(--ease-out), opacity .38s var(--ease);
}
.modal.is-open .modal__dialog { transform: none; opacity: 1; }

.modal__head {
  position: relative;
  padding: 30px 34px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
}
.modal__head .bg-grid { background-size: 34px 34px; }
.modal__head > * { position: relative; z-index: 2; }
.modal__head .eyebrow { color: var(--accent-light); margin-bottom: 10px; }
.modal__head h3 { color: #fff; margin: 0 0 6px; font-size: 1.35rem; }
.modal__head p { color: var(--on-dark-muted); font-size: .88rem; margin: 0; }
.modal__close {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-sm);
  color: #fff;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.modal__close:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: rotate(90deg); }
.modal__close svg { width: 16px; height: 16px; }
.modal__body { padding: 28px 34px 32px; }

/* Context chip showing what the visitor clicked */
.modal__context {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 12px 16px;
  background: var(--accent-tint);
  border: 1px solid #F8D6C7;
  border-radius: var(--r-sm);
  font-size: .86rem;
  color: var(--accent-deep);
}
.modal__context.is-shown { display: flex; }
.modal__context svg { width: 17px; height: 17px; flex: none; }
.modal__context strong { color: var(--accent-deep); font-weight: var(--fw-bold); }

/* ==========================================================================
   21. ACCORDION / FAQ
   ========================================================================== */
.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  padding: 19px 0;
  text-align: left;
  font-size: 1.03rem;
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: 1.5;
  transition: color var(--t-base) var(--ease);
}
.accordion__trigger:hover { color: var(--accent-deep); }
.accordion__trigger[aria-expanded="true"] { color: var(--accent-deep); }
.accordion__sign {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: all var(--t-base) var(--ease);
}
.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.accordion__sign::before { width: 12px; height: 2px; }
.accordion__sign::after { width: 2px; height: 12px; }
.accordion__trigger[aria-expanded="true"] .accordion__sign {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  transform: rotate(180deg);
}
.accordion__trigger[aria-expanded="true"] .accordion__sign::after { opacity: 0; transform: scaleY(0); }
.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s var(--ease);
}
.accordion__panel-inner {
  padding: 0 60px 20px 0;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.75;
}

/* ==========================================================================
   22. BRAND & PRODUCT CARDS
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.filter-btn {
  padding: 11px 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: .87rem;
  font-weight: var(--fw-medium);
  color: var(--muted);
  transition: all var(--t-base) var(--ease);
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.filter-btn__count {
  display: inline-block;
  margin-left: 7px;
  font-size: .74rem;
  opacity: .65;
}

.filter-grid { transition: opacity var(--t-base) var(--ease); }
.filter-grid.is-filtering { opacity: .35; }
.filter-item.is-hidden { display: none; }
.filter-item.is-entering { animation: kk-pop .42s var(--ease-out) both; }
@keyframes kk-pop {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.filter-empty {
  display: none;
  padding: 60px 24px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}
.filter-empty.is-shown { display: block; }

/* Brand card */
.brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.brand-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.brand-card::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.brand-card:hover::after { transform: scaleX(1); }
.brand-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex: none;
}
.brand-card__logo img {
  max-height: 46px;
  max-width: 78%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter var(--t-base) var(--ease), opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.brand-card:hover .brand-card__logo img { filter: grayscale(0); opacity: 1; transform: scale(1.04); }
.brand-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 20px 18px;
}
.tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 4px 10px;
  margin-bottom: 12px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag--accent { background: var(--accent-tint); color: var(--accent-deep); }
.tag--dark { background: rgba(255, 255, 255, .08); color: var(--on-dark-muted); }
.brand-card__body h3 { font-size: 1.14rem; margin: 0 0 9px; }
.brand-card__body p { font-size: .875rem; color: var(--muted); line-height: 1.62; margin: 0 0 16px; }
.brand-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Product card */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(239, 89, 30, .26);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
/* accent rule across the top, lit from the start */
.product-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, var(--accent), #F9A03F);
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(239, 89, 30, .5);
  box-shadow: 0 20px 44px rgba(239, 89, 30, .18), 0 5px 14px rgba(26, 23, 21, .07);
}
.product-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--surface-2);
  flex: none;
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 18px 18px 16px;
}
.product-card__body .tag {
  border: 1px solid rgba(239, 89, 30, .26);
  background: var(--accent-tint);
  color: var(--accent-deep);
  margin-bottom: 10px;
}
.product-card__body h3 { font-size: 1.04rem; margin: 0 0 12px; line-height: 1.4; }
.product-card__specs { margin: 0 0 16px; display: grid; gap: 7px; }
.product-card__specs li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .84rem;
  color: var(--text-soft);
  line-height: 1.5;
}
/* a small tick plate in place of the plain bullet */
.product-card__specs li::before {
  content: "";
  width: 15px; height: 15px;
  margin-top: 2px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px rgba(239, 89, 30, .3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BF400D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
}
.product-card__foot { margin-top: auto; }
.product-card__foot .btn { width: 100%; }

/* ==========================================================================
   23. BLOG
   ========================================================================== */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.post-card:hover { transform: translateY(-7px); box-shadow: var(--sh-lg); border-color: transparent; }
.post-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
  flex: none;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .85s var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.07); }
.post-card__cat {
  position: absolute;
  left: 16px; top: 16px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: var(--r-xs);
  background: var(--accent-deep);
  color: #fff;
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 20px 18px;
}
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 13px;
  font-size: .78rem;
  color: var(--muted-light);
}
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-meta svg { width: 13px; height: 13px; }
.post-card__body h3 { font-size: 1.13rem; margin: 0 0 11px; line-height: 1.42; transition: color var(--t-base) var(--ease); }
.post-card:hover .post-card__body h3 { color: var(--accent-deep); }
.post-card__body p { font-size: .89rem; color: var(--muted); line-height: 1.65; margin: 0 0 16px; }
.post-card__foot { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border); }

/* Featured post */
.post-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 34px;
  transition: box-shadow var(--t-base) var(--ease);
}
.post-featured:hover { box-shadow: var(--sh-lg); }
.post-featured__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.post-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.post-featured:hover .post-featured__media img { transform: scale(1.045); }
.post-featured__body { padding: 26px 26px; display: flex; flex-direction: column; justify-content: center; }
.post-featured__body h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); margin-bottom: 14px; }
.post-featured__body p { color: var(--muted); margin-bottom: 20px; }
.badge-featured {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--accent);
  border-radius: var(--r-xs);
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.badge-featured svg { width: 12px; height: 12px; }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px; height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: .9rem;
  font-weight: var(--fw-medium);
  color: var(--text-soft);
  transition: all var(--t-base) var(--ease);
}
.page-link:hover { border-color: var(--primary); color: var(--primary); }
.page-link.is-active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: var(--fw-semibold); }
.page-link.is-disabled { opacity: .45; pointer-events: none; }
.page-link svg { width: 15px; height: 15px; }
.page-dots { color: var(--muted-light); padding: 0 4px; }

/* Sidebar */
.sidebar { display: grid; gap: 22px; align-content: start; }
.widget {
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.widget--dark {
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}
.widget--dark h3, .widget--dark h4 { color: #fff; }
.widget--dark p { color: var(--on-dark-muted); font-size: .88rem; }
.widget--dark > * { position: relative; z-index: 2; }
.widget__title {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border);
}
.widget__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 42px; height: 2px;
  background: var(--accent);
}
.widget__list { display: grid; gap: 2px; }
.widget__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: .9rem;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.widget__list a:last-child { border-bottom: 0; }
.widget__list a:hover { color: var(--accent-deep); padding-left: 6px; }
.widget__list span { font-size: .76rem; color: var(--muted-light); }

.mini-post {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.mini-post:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-post img {
  width: 74px; height: 62px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex: none;
  background: var(--surface-2);
}
.mini-post h4 {
  font-size: .89rem;
  line-height: 1.45;
  margin: 0 0 5px;
  font-weight: var(--fw-semibold);
  transition: color var(--t-fast) var(--ease);
}
.mini-post:hover h4 { color: var(--accent-deep); }
.mini-post time { font-size: .76rem; color: var(--muted-light); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-size: .8rem;
  color: var(--muted);
  transition: all var(--t-base) var(--ease);
}
.tag-cloud a:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* ==========================================================================
   24. PAGE HERO & BREADCRUMB
   ========================================================================== */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 330px;
  background: var(--primary-dark);
  padding-block: clamp(28px, 3.2vw, 42px);
}
.page-hero > .container { width: 100%; }
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .62;
}
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 120% at 88% 30%, rgba(239, 89, 30, .2), transparent 62%),
    linear-gradient(100deg, rgba(18, 15, 13, .9) 4%, rgba(18, 15, 13, .62) 48%, rgba(18, 15, 13, .24) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero__copy { max-width: 720px; }
.page-hero h1 { color: #fff; margin-bottom: 10px; }
.page-hero p { color: var(--on-dark-muted); font-size: 1.03rem; max-width: 58ch; margin: 0; }
.page-hero__rule {
  width: 66px; height: 3px;
  background: var(--accent);
  margin-bottom: 14px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 14px;
  font-size: .82rem;
  color: var(--on-dark-muted);
}
.breadcrumb a { color: var(--on-dark-muted); transition: color var(--t-base) var(--ease); }
.breadcrumb a:hover { color: var(--accent-light); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 9px; }
.breadcrumb li + li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
}
.breadcrumb [aria-current] { color: #fff; font-weight: var(--fw-medium); }

/* ==========================================================================
   25. LONG-FORM PROSE
   ========================================================================== */
.prose { font-size: 1.02rem; line-height: 1.85; color: var(--text-soft); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); margin-top: 1.6em; margin-bottom: .5em; }
.prose h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); margin-top: 1.4em; margin-bottom: .45em; }
.prose p { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 4px; display: grid; gap: 11px; }
.prose ul li, .prose ol li {
  position: relative;
  padding-left: 26px;
  line-height: 1.75;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: .68em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.prose ol { counter-reset: kk-ol; }
.prose ol li::before {
  counter-increment: kk-ol;
  content: counter(kk-ol) ".";
  position: absolute;
  left: 0; top: 0;
  font-weight: var(--fw-bold);
  color: var(--accent-deep);
  font-size: .92em;
}
.prose blockquote {
  margin: 1.6em 0;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--text);
  font-weight: var(--fw-medium);
}
.prose blockquote p { margin: 0; }
.prose img { width: 100%; border-radius: var(--r-md); margin-block: 1.6em; }
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent); }
.prose figure { margin: 2em 0; }
.prose figcaption { margin-top: 10px; font-size: .84rem; color: var(--muted-light); text-align: center; }

.article-head { margin-bottom: 34px; }
.article-head h1 { margin-bottom: 18px; }
.article-hero {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-2);
  margin-bottom: 30px;
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.article-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-block: 1px solid var(--border);
}
.article-author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.article-author strong { display: block; font-size: .92rem; color: var(--text); }
.article-author span { font-size: .8rem; color: var(--muted); }

.share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.share__label {
  font-size: .76rem;
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.share a, .share button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: all var(--t-base) var(--ease);
}
.share a:hover, .share button:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-2px); }
.share svg { width: 16px; height: 16px; }

/* ==========================================================================
   26. CONTACT
   ========================================================================== */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: auto;
  height: clamp(240px, 26vw, 340px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.map-embed iframe, .map-embed > img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.map-embed__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 22px;
  background:
    linear-gradient(rgba(26, 23, 21, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 23, 21, .05) 1px, transparent 1px),
    var(--surface);
  background-size: 44px 44px, 44px 44px, auto;
  color: var(--muted);
}
.map-embed__placeholder > svg { width: 32px; height: 32px; color: var(--accent-deep); }
.map-embed__placeholder strong { color: var(--text); font-size: 1rem; }
.map-embed__placeholder span { font-size: .85rem; max-width: 46ch; }

/* Contact details sit two to a row so the column matches the form beside it */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.info-card--wide { grid-column: 1 / -1; }

.info-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(239, 89, 30, .26);
  border-radius: var(--r-md);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.info-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239, 89, 30, .5);
  box-shadow: 0 14px 30px rgba(239, 89, 30, .16);
}
.info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid rgba(239, 89, 30, .22);
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.info-card:hover .info-card__icon { background: var(--accent); border-color: transparent; color: #fff; }
.info-card__icon svg { width: 19px; height: 19px; }
.info-card h3 {
  font-size: .76rem;
  font-weight: var(--fw-bold);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.info-card p, .info-card a {
  display: block;
  font-size: .96rem;
  color: var(--text);
  font-weight: var(--fw-medium);
  line-height: 1.55;
  margin: 0;
  word-break: break-word;
}
.info-card a:hover { color: var(--accent-deep); }
.info-card small { display: block; font-size: .8rem; color: var(--muted); font-weight: var(--fw-regular); margin-top: 3px; }
.info-card small a { display: inline; font-size: .84rem; color: var(--accent-deep); font-weight: var(--fw-semibold); }
.info-card small a:hover { color: var(--accent); }

/* ==========================================================================
   27. FOOTER
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--primary-dark);
  color: #fff;
  font-size: .92rem;
}
.footer::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 30%, transparent 72%);
  z-index: 3;
}
/* warm glow anchoring the brand column */
.footer::after {
  content: "";
  position: absolute;
  left: -6%; top: -20%;
  width: 46%; height: 90%;
  background: radial-gradient(circle, rgba(239, 89, 30, .13), transparent 68%);
  pointer-events: none;
}
.footer__main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-block: 50px 38px;
}

.footer__brand p { font-size: .9rem; line-height: 1.7; max-width: 38ch; margin-bottom: 16px; }
.footer__tagline {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 12px;
  border: 1px solid rgba(239, 89, 30, .34);
  border-radius: var(--r-pill);
  background: rgba(239, 89, 30, .1);
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.footer__social-label {
  display: block;
  margin-bottom: 12px;
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}

.footer__title {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-size: .82rem;
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.footer__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 30px; height: 2px;
  background: var(--accent);
}
.footer__title::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: rgba(255, 255, 255, .08);
}

.footer__links { display: grid; gap: 9px; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: .9rem;
  transition: color var(--t-base) var(--ease), gap var(--t-base) var(--ease);
}
.footer__links a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.footer__links a:hover { color: var(--accent-light); gap: 13px; }
.footer__links a:hover::before { background: var(--accent-light); transform: scale(1.35); }

.footer__contact { display: grid; gap: 9px; }
.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--dark-border);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
a.footer__contact-item:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2);
  transform: translateX(4px);
}
.footer__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-xs);
  background: rgba(239, 89, 30, .14);
  color: var(--accent);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.footer__contact-icon svg { width: 14px; height: 14px; }
a.footer__contact-item:hover .footer__contact-icon { background: var(--accent-deep); color: #fff; }
.footer__contact-item--wa .footer__contact-icon { background: rgba(37, 211, 102, .16); color: #25D366; }
a.footer__contact-item--wa:hover .footer__contact-icon { background: #128C4B; color: #fff; }
.footer__contact-item small {
  display: block;
  font-size: .65rem;
  font-weight: var(--fw-bold);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1px;
}
.footer__contact-item strong {
  display: block;
  font-size: .87rem;
  font-weight: var(--fw-medium);
  color: #fff;
  line-height: 1.45;
  word-break: break-word;
}


/* The legal links row was removed, so the copyright line is the only child
   left down here — it is centred rather than pushed to one edge. */
.footer__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 26px;
  padding-block: 18px;
  border-top: 1px solid var(--dark-border);
  font-size: .84rem;
  text-align: center;
}
.footer__copy { color: #fff; }
.footer__credit { color: rgba(255, 255, 255, .62); }
.footer__credit strong { color: #fff; font-weight: var(--fw-semibold); }
.footer__copy a { color: #fff; }
.footer__copy a:hover { color: var(--accent-light); }

/* Nothing in the footer sits below white at rest */
.footer p,
.footer li,
.footer span,
.footer small,
.footer strong,
.footer address { color: #fff; }
.footer__tagline { color: var(--accent-light); }
.footer__contact-icon { color: var(--accent); }
.footer__contact-item--wa .footer__contact-icon { color: #25D366; }

/* ==========================================================================
   28. FLOATING ACTIONS
   ========================================================================== */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 90px;
  z-index: var(--z-float);
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .38);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.wa-float:hover { transform: scale(1.06); box-shadow: 0 14px 34px rgba(37, 211, 102, .5); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .55);
  animation: kk-pulse 2.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes kk-pulse {
  0%   { transform: scale(1); opacity: .9; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.wa-float__label {
  position: absolute;
  right: calc(100% + 12px);
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: #fff;
  font-size: .8rem;
  font-weight: var(--fw-medium);
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out);
}
.wa-float:hover .wa-float__label { opacity: 1; transform: none; }

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: #fff;
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-out), visibility var(--t-base), background var(--t-base) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent-deep); }
.to-top svg { width: 17px; height: 17px; }

/* Mobile sticky action bar */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-float);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--dark-border);
  border-top: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 -8px 26px rgba(18, 15, 13, .2);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(102%);
  transition: transform .38s var(--ease-out);
}
.mobile-bar.is-visible { transform: none; }
.mobile-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 12px;
  font-size: .93rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  color: #fff;
  background: var(--primary-dark);
  transition: background var(--t-fast) var(--ease);
}
.mobile-bar__btn svg { width: 19px; height: 19px; flex: none; }
.mobile-bar__btn--wa { background: #128C4B; }
.mobile-bar__btn--wa:active { background: #0F7A41; }
.mobile-bar__btn--call { background: var(--accent-deep); }
.mobile-bar__btn--call:active { background: var(--accent); }

/* ==========================================================================
   29. MOTION & UTILITIES
   ========================================================================== */
[data-anim] {
  opacity: 0;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  will-change: opacity, transform;
}
[data-anim="fade-up"]    { transform: translateY(30px); }
[data-anim="fade-down"]  { transform: translateY(-24px); }
[data-anim="fade-in"]    { transform: none; }
[data-anim="slide-left"] { transform: translateX(34px); }
[data-anim="slide-right"]{ transform: translateX(-34px); }
[data-anim="scale-in"]   { transform: scale(.955); }
[data-anim].is-inview { opacity: 1; transform: none; }

/* Stagger helper — applied by animations.js to grid children */
[data-anim-stagger] > * { transition-delay: var(--stagger-delay, 0ms); }

.no-js [data-anim] { opacity: 1; transform: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(18, 15, 13, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1100px, 100%);
  max-height: 86vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  transform: scale(.97);
  transition: transform .35s var(--ease-out);
}
.lightbox.is-open img { transform: none; }
.lightbox__close {
  position: absolute;
  top: 24px; right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-sm);
  color: #fff;
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.lightbox__close:hover { background: var(--accent-deep); transform: rotate(90deg); }
.lightbox__close svg { width: 18px; height: 18px; }
.zoomable { cursor: zoom-in; }

/* Utilities */
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-8 { margin-top: var(--sp-8); }
.u-mt-10 { margin-top: var(--sp-9); }
.u-mt-auto { margin-top: auto; }
.u-hidden { display: none !important; }
.u-relative { position: relative; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   29b. DARK / LIGHT SECTION VARIANTS
   --------------------------------------------------------------------------
   The home page alternates dark and light bands, so these components need to
   work on either ground. Everything below is a variant, never a new component.
   ========================================================================== */

/* --- controls that must flip on a dark band ---------------------------- */
.section--dark .btn--outline,
.section--dark-alt .btn--outline {
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .05);
}
.section--dark .btn--outline:hover,
.section--dark-alt .btn--outline:hover {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}
.section--dark .link-arrow,
.section--dark-alt .link-arrow { color: var(--accent-light); }

/* --- floating card over an image on a dark band ------------------------ */
.section--dark .float-card,
.section--dark-alt .float-card {
  background: var(--primary);
  border-color: var(--dark-border);
  border-left-color: var(--accent);
}
.section--dark .float-card strong,
.section--dark-alt .float-card strong { color: #fff; }
.section--dark .float-card span,
.section--dark-alt .float-card span { color: var(--on-dark-muted); }
.section--dark .float-card__icon,
.section--dark-alt .float-card__icon { background: rgba(239, 89, 30, .16); color: var(--accent); }

/* --- the small paired metrics under the About copy --------------------- */
.section--dark .mini-stats,
.section--dark-alt .mini-stats { background: var(--dark-border); border-color: var(--dark-border); }
.section--dark .mini-stats__item,
.section--dark-alt .mini-stats__item { background: rgba(255, 255, 255, .04); }
.section--dark .mini-stats__item strong,
.section--dark-alt .mini-stats__item strong { color: #fff; }
.section--dark .mini-stats__item span,
.section--dark-alt .mini-stats__item span { color: var(--on-dark-muted); }

/* --- accordion on a dark band ------------------------------------------ */
.section--dark .accordion,
.section--dark-alt .accordion { border-top-color: var(--dark-border); }
.section--dark .accordion__item,
.section--dark-alt .accordion__item { border-bottom-color: var(--dark-border); }
.section--dark .accordion__trigger,
.section--dark-alt .accordion__trigger { color: var(--on-dark); }
.section--dark .accordion__trigger:hover,
.section--dark-alt .accordion__trigger:hover,
.section--dark .accordion__trigger[aria-expanded="true"],
.section--dark-alt .accordion__trigger[aria-expanded="true"] { color: var(--accent-light); }
.section--dark .accordion__sign,
.section--dark-alt .accordion__sign { border-color: rgba(255, 255, 255, .24); }
.section--dark .accordion__trigger[aria-expanded="true"] .accordion__sign,
.section--dark-alt .accordion__trigger[aria-expanded="true"] .accordion__sign {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}
.section--dark .accordion__panel-inner,
.section--dark-alt .accordion__panel-inner { color: var(--on-dark-muted); }

/* --- statistics band on a light ground --------------------------------- */
.stats--light { background: var(--border); border-color: var(--border); }
.stats--light .stat { background: #fff; }
.stats--light .stat:hover { background: var(--surface); }
.stats--light .stat__icon { background: var(--accent-tint); color: var(--accent-deep); }
.stats--light .stat__value { color: var(--text); }
.stats--light .stat__label { color: var(--muted); }

/* --- USP strip on a dark ground ---------------------------------------- */
.usp-strip--dark {
  background: var(--primary);
  border-block-color: var(--dark-border);
}
.usp-strip--dark .usp-point { border-color: var(--dark-border); }
.usp-strip--dark .usp-point:hover { background: rgba(255, 255, 255, .05); }
.usp-strip--dark .usp-point__icon { background: rgba(239, 89, 30, .15); color: var(--accent); }
.usp-strip--dark .usp-point:hover .usp-point__icon { background: var(--accent-deep); color: #fff; }
.usp-strip--dark .usp-point strong { color: var(--on-dark); }
.usp-strip--dark .usp-point span { color: var(--on-dark-muted); }

/* --- process markers already flip; keep the connector visible ---------- */
.section--dark .process::before,
.section--dark-alt .process::before {
  background: linear-gradient(90deg, var(--accent), rgba(239, 89, 30, .16));
}

/* --- decorative frame corner on a dark band ---------------------------- */
.section--dark .figure-frame::after,
.section--dark-alt .figure-frame::after { border-color: rgba(255, 255, 255, .22); }

/* ==========================================================================
   ICON MOTION AT REST
   --------------------------------------------------------------------------
   Every icon plate on the site drifts gently on its own rather than waiting
   for a hover. Grid neighbours are offset so a row never moves in lockstep,
   and any plate with a hover transform drops the animation on hover so the
   two never fight over `transform`.
   ========================================================================== */
@keyframes kk-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.usp-card__icon,
.usp-point__icon,
.service-card__icon,
.float-card__icon,
.contact-tile__icon,
.security__feature-icon,
.hero-trust__item svg {
  animation: kk-icon-float 3.6s var(--ease) infinite;
}
/* Stagger the plates across a row */
.grid > *:nth-child(2n) .usp-card__icon,
.grid > *:nth-child(2n) .service-card__icon { animation-delay: .45s; }
.grid > *:nth-child(3n) .usp-card__icon,
.grid > *:nth-child(3n) .service-card__icon { animation-delay: .9s; }
.grid > *:nth-child(4n) .usp-card__icon,
.grid > *:nth-child(4n) .service-card__icon { animation-delay: 1.35s; }
.usp-strip__list > *:nth-child(2n) .usp-point__icon { animation-delay: .5s; }
.usp-strip__list > *:nth-child(3n) .usp-point__icon { animation-delay: 1s; }
.usp-strip__list > *:nth-child(4n) .usp-point__icon { animation-delay: 1.5s; }
.hero-trust__item:nth-child(2n) svg { animation-delay: .5s; }
.hero-trust__item:nth-child(3n) svg { animation-delay: 1s; }
.hero-trust__item:nth-child(4n) svg { animation-delay: 1.5s; }

/* Hover takes over from the drift */
.usp-card:hover .usp-card__icon,
.usp-card--cat:hover .usp-card__icon,
.usp-point:hover .usp-point__icon,
.service-card:hover .service-card__icon,
.contact-tile:hover .contact-tile__icon,
.security__feature:hover .security__feature-icon,
.hero-trust__item:hover svg { animation: none; }

/* Reduced motion — honour the visitor's system preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
  .eyebrow::before { animation: none !important; }
  .hl { animation: none !important; background-position: 40% 50%; }
  .section-title, .section-head h2, .page-hero__copy h1,
  .enquiry__aside h2 {
    animation: none !important;
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
  .hl::after { transform: scaleX(1); }
  .brand-chip__shine { display: none; }
  .btn__icon, .link-arrow svg { animation: none !important; transform: none !important; }
  .btn--primary::after, .btn--dark::after, .btn--wa::after, .btn--light::after { display: none; }
  .usp-card__icon, .usp-point__icon, .service-card__icon, .float-card__icon,
  .contact-tile__icon, .security__feature-icon, .hero-trust__item svg {
    animation: none !important;
  }
  .hero__media img { transform: none !important; }
  .security__scan { display: none; }
  .wa-float::before { display: none; }
}

/* Print */
@media print {
  .topbar, .header, .drawer, .drawer-overlay, .mobile-bar, .wa-float, .to-top,
  .hero__nav, .hero__dots, .modal, .lightbox { display: none !important; }
  body { color: #000; }
  .section-title, .section-head h2, .page-hero__copy h1,
  .enquiry__aside h2, .hl {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    color: #000;
  }
  .section { padding-block: 24px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}