/* ============================================================
   ACTION SYSTEM
   Loaded last on every page, so it owns every interactive state
   without needing specificity tricks.

   ONE signature: the EDGE WIPE. On hover a solid fill enters from
   the inline-start edge in 180ms, the 1px boundary darkens a step,
   the resting shadow tightens rather than spreads, and a trailing
   arrow advances. Nothing lifts, scales or glows.

   Shape grammar: a 4px rectangle is an action. A 999px pill is a
   label or a jump chip. Previously everything was a pill, so
   nothing in the shape told you what was clickable.

   Contrast: saffron #C79A3E carries ink (#1B2A38) at 5.66:1, not
   white at 2.59:1. Text-weight gold is #8A6A1E (5.04:1 on white),
   and hover darkens to #6E5313 rather than lightening.
   ============================================================ */

:root {
  --ease-edge: cubic-bezier(0.2, 0, 0.12, 1);
  --dur-wipe-in: 180ms;
  --dur-wipe-out: 220ms;
  --dur-ink: 140ms;
  --dur-shadow: 160ms;
  --dur-icon: 200ms;
  --act-rest-shadow: 0 1px 2px rgba(20, 33, 44, 0.10), 0 2px 6px -2px rgba(20, 33, 44, 0.10);
  --act-hover-shadow: 0 1px 1px rgba(20, 33, 44, 0.16);
  --act-press-shadow: inset 0 2px 0 rgba(20, 33, 44, 0.20);
  --act-press-flat: inset 0 2px 0 rgba(20, 33, 44, 0.12);
  --focus-light: 0 0 0 2px #FCFAF5, 0 0 0 4px #14212C;
  --focus-dark: 0 0 0 2px #14212C, 0 0 0 4px #E0BC6E;
  --gold-wipe: rgba(199, 154, 62, 0.18);
  --gold-press: rgba(199, 154, 62, 0.30);
  --gold-wipe-dark: rgba(224, 188, 110, 0.22);
}

/* Every dark band, listed once. */
@media all {
  /* placeholder so the grouping comment survives minifiers */
}

/* ---- 1. Engine ---- */
.btn {
  --btn-bg: transparent;
  --btn-wipe: transparent;
  --btn-edge: transparent;
  --btn-edge-hover: var(--btn-edge);
  --icon-advance: 3px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap, 0.5rem);
  padding: var(--btn-pad, 0.6875rem 1.5rem);
  min-height: var(--btn-min, 44px);
  border: 1px solid var(--btn-edge);
  border-radius: 4px;
  font-family: inherit;
  font-size: var(--btn-size, 0.9375rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transform: none;
  background-color: var(--btn-bg);
  background-image: linear-gradient(var(--btn-wipe), var(--btn-wipe));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  box-shadow: var(--act-rest-shadow);
  transition:
    background-size var(--dur-wipe-out) var(--ease-edge),
    background-color var(--dur-ink) var(--ease-edge),
    border-color var(--dur-ink) var(--ease-edge),
    color var(--dur-ink) var(--ease-edge),
    box-shadow var(--dur-shadow) var(--ease-edge);
}
.btn:hover,
.btn:focus-visible {
  background-size: 100% 100%;
  border-color: var(--btn-edge-hover);
  box-shadow: var(--act-hover-shadow);
  transform: none;
  transition-duration: var(--dur-wipe-in), var(--dur-ink), var(--dur-ink), var(--dur-ink), var(--dur-shadow);
}
.btn:focus-visible { outline: 0; box-shadow: var(--act-hover-shadow), var(--focus-light); }
.btn:active {
  background-size: 100% 100%;
  border-color: var(--btn-edge-hover);
  box-shadow: var(--act-press-shadow);
  transform: none;
  transition-duration: 0ms;
}

/* ---- 2. Size scale, mapped from context so no markup changes ---- */
.btn-sm,
.certificate-actions .btn,
.catalog-heading .btn,
.service-list .btn {
  --btn-pad: 0.4375rem 0.875rem;
  --btn-min: 38px;
  --btn-size: 0.8125rem;
  --btn-gap: 0.375rem;
  --icon-advance: 2px;
  border-radius: 3px;
  letter-spacing: 0.015em;
}
.btn-lg,
.hero .btn,
.brand-hero .btn,
.whatsapp-panel .btn {
  --btn-pad: 0.9375rem 2rem;
  --btn-min: 52px;
  --btn-size: 1.0625rem;
  --btn-gap: 0.625rem;
  --icon-advance: 4px;
  border-radius: 5px;
  letter-spacing: 0;
}
.nav-cta { --btn-pad: 0.5rem 1.125rem; --btn-min: 40px; --btn-size: 0.875rem; }

/* ---- 3. Icons. Only trailing directional icons advance; leading
        phone / whatsapp / download glyphs hold still. ---- */
.btn i,
.btn svg,
.contact-action i,
.card-arrow i {
  flex-shrink: 0;
  font-size: var(--icon-size, 0.875em);
  transition: transform var(--dur-icon) var(--ease-quint);
}
.btn:hover :is(.fa-arrow-right, .fa-chevron-right, .icon-advance),
.btn:focus-visible :is(.fa-arrow-right, .fa-chevron-right, .icon-advance),
:is(.btn-quiet, .card-arrow):hover i,
:is(.bento-cell, .service-card, .brand-choice, .card):is(:hover, :focus-visible, :focus-within) .card-arrow i {
  transform: translateX(var(--icon-advance));
}
.btn:active :is(.fa-arrow-right, .fa-chevron-right, .icon-advance) { transform: none; }

/* ---- 4. Primary. One skin on every background: #C79A3E is 5.66:1
        on ink and its #A97F27 edge is 3.65:1 on white. ---- */
:is(.btn-primary, .btn-gold) {
  --btn-bg: #C79A3E;
  --btn-wipe: #E0BC6E;
  --btn-edge: #A97F27;
  --btn-edge-hover: #8A6A1E;
  color: #1B2A38;
}
:is(.btn-primary, .btn-gold):is(:hover, :focus-visible, :active) { color: #1B2A38; }

/* ---- 5. Navy, light backgrounds only ---- */
.btn-navy {
  --btn-bg: #1B2A38;
  --btn-wipe: #14212C;
  --btn-edge: #14212C;
  --btn-edge-hover: #C79A3E;
  color: #ffffff;
}
.btn-navy:is(:hover, :focus-visible, :active) { color: #ffffff; }

/* ---- 6. Outline, light. Edge #646E78 is 4.39:1; the previous
        #A9A292 was 2.54:1 and also outside the palette. ---- */
.btn-outline {
  --btn-bg: #ffffff;
  --btn-wipe: var(--gold-wipe);
  --btn-edge: #646E78;
  --btn-edge-hover: #A97F27;
  color: #1B2A38;
}
.btn-outline:is(:hover, :focus-visible, :active) { color: #1B2A38; }

/* ---- 7. WhatsApp, light. Green is the edge and the icon, never the
        text: #1DA851 on white is only 3.10:1. ---- */
.btn-whatsapp {
  --btn-bg: #ffffff;
  --btn-wipe: #1B2A38;
  --btn-edge: #1DA851;
  --btn-edge-hover: #1B2A38;
  color: #1B2A38;
}
.btn-whatsapp i {
  color: #1DA851;
  transition: color var(--dur-ink) var(--ease-edge), transform var(--dur-icon) var(--ease-quint);
}
.btn-whatsapp:is(:hover, :focus-visible, :active) { color: #ffffff; }
.btn-whatsapp:is(:hover, :focus-visible, :active) i { color: #25D366; }

/* ---- 8. Dark-band skins ---- */
:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .stats-band, .whatsapp-panel, .hero, .site-footer) :is(.btn-navy, .btn-outline) {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-wipe: var(--gold-wipe-dark);
  --btn-edge: rgba(255, 255, 255, 0.55);
  --btn-edge-hover: #E0BC6E;
  color: #ffffff;
  box-shadow: none;
}
:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .stats-band, .whatsapp-panel, .hero, .site-footer)
  :is(.btn-navy, .btn-outline):is(:hover, :focus-visible, :active) {
  color: #ffffff;
  box-shadow: var(--act-hover-shadow);
}
:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .stats-band, .whatsapp-panel, .hero, .site-footer)
  :is(.btn-navy, .btn-outline):active { box-shadow: var(--act-press-shadow); }

:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .stats-band, .hero, .site-footer) .btn-whatsapp {
  --btn-bg: rgba(37, 211, 102, 0.14);
  --btn-wipe: #25D366;
  --btn-edge: #25D366;
  --btn-edge-hover: #25D366;
  color: #ffffff;
  box-shadow: none;
}
:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .stats-band, .hero, .site-footer) .btn-whatsapp i { color: #25D366; }
:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .stats-band, .hero, .site-footer) .btn-whatsapp:is(:hover, :focus-visible, :active) {
  color: #14212C;
  box-shadow: var(--act-hover-shadow);
}
:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .stats-band, .hero, .site-footer) .btn-whatsapp:is(:hover, :focus-visible, :active) i { color: #14212C; }
:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .stats-band, .hero, .site-footer) .btn-whatsapp:active { box-shadow: var(--act-press-shadow); }

/* The WhatsApp panel's button is that page's primary, so it is solid at rest. */
.whatsapp-panel .btn-whatsapp {
  --btn-bg: #25D366;
  --btn-wipe: #ffffff;
  --btn-edge: #25D366;
  --btn-edge-hover: #ffffff;
  color: #14212C;
  font-weight: 700;
  box-shadow: var(--act-rest-shadow);
}
.whatsapp-panel .btn-whatsapp i,
.whatsapp-panel .btn-whatsapp:is(:hover, :focus-visible, :active) i { color: #14212C; }
.whatsapp-panel .btn-whatsapp:is(:hover, :focus-visible, :active) { color: #14212C; }

:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .stats-band, .whatsapp-panel, .hero, .site-footer) .btn:focus-visible {
  box-shadow: var(--act-hover-shadow), var(--focus-dark);
}

/* ---- 9. Quiet / card arrow: the same signature at text scale ---- */
:is(.btn-quiet, .card-arrow) {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.25rem 0;
  min-height: 24px;
  border: 0;
  border-radius: 2px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #8A6A1E;
  background-color: transparent;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(rgba(138, 106, 30, 0.45), rgba(138, 106, 30, 0.45));
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 2px, 100% 1px;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-size var(--dur-wipe-out) var(--ease-edge),
    color var(--dur-ink) var(--ease-edge);
}
:is(.btn-quiet, .card-arrow):is(:hover, :focus-visible),
:is(.bento-cell, .service-card, .brand-choice, .card):is(:hover, :focus-visible, :focus-within) .card-arrow {
  color: #6E5313;
  background-size: 100% 2px, 100% 1px;
  transition-duration: var(--dur-wipe-in), var(--dur-ink);
}
:is(.btn-quiet, .card-arrow):focus-visible {
  outline: 2px solid #A97F27;
  outline-offset: 3px;
  box-shadow: none;
}
:is(.btn-quiet, .card-arrow):active { background-size: 100% 2px, 100% 1px; transition-duration: 0ms; }

:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .bento-wide, .service-bento-contact, .whatsapp-panel, .hero, .site-footer)
  :is(.btn-quiet, .card-arrow) {
  color: #E0BC6E;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(rgba(224, 188, 110, 0.5), rgba(224, 188, 110, 0.5));
}
:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .bento-wide, .service-bento-contact, .whatsapp-panel, .hero, .site-footer)
  :is(.btn-quiet, .card-arrow):is(:hover, :focus-visible) { color: #FCFAF5; }
:is(.bento-wide, .service-bento-contact):is(:hover, :focus-visible, :focus-within) .card-arrow { color: #FCFAF5; }
:is(.section-deep, .cta-banner, .brand-hero, .services-hero, .certificate-hero,
  .fleet-band, .bento-wide, .service-bento-contact, .whatsapp-panel, .hero, .site-footer)
  :is(.btn-quiet, .card-arrow):focus-visible { outline-color: #E0BC6E; }

/* ---- 10. Contact action becomes a small outline action ---- */
.contact-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  padding: 0.4375rem 0.875rem;
  min-height: 38px;
  border: 1px solid #A97F27;
  border-radius: 3px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: #1B2A38;
  background-color: #ffffff;
  background-image: linear-gradient(var(--gold-wipe), var(--gold-wipe));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  box-shadow: var(--act-rest-shadow);
  cursor: pointer;
  transform: none;
  --icon-advance: 2px;
  transition:
    background-size var(--dur-wipe-out) var(--ease-edge),
    border-color var(--dur-ink) var(--ease-edge),
    color var(--dur-ink) var(--ease-edge),
    box-shadow var(--dur-shadow) var(--ease-edge);
}
.contact-action i { color: #8A6A1E; }
.contact-action:is(:hover, :focus-visible) {
  background-size: 100% 100%;
  border-color: #8A6A1E;
  color: #1B2A38;
  box-shadow: var(--act-hover-shadow);
  transform: none;
  transition-duration: var(--dur-wipe-in), var(--dur-ink), var(--dur-ink), var(--dur-shadow);
}
.contact-action:focus-visible { outline: 0; box-shadow: var(--act-hover-shadow), var(--focus-light); }
.contact-action:active {
  background-size: 100% 100%;
  border-color: #8A6A1E;
  box-shadow: var(--act-press-shadow);
  transform: none;
  transition-duration: 0ms;
}

/* ---- 11. Jump chips stay pills, and take the wipe ---- */
:is(.catalog-nav a, .certificate-jumps a:not(.cert-brand)) {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transform: none;
  transition:
    background-size var(--dur-wipe-out) var(--ease-edge),
    background-color var(--dur-ink) var(--ease-edge),
    border-color var(--dur-ink) var(--ease-edge),
    color var(--dur-ink) var(--ease-edge),
    box-shadow var(--dur-shadow) var(--ease-edge);
}
.catalog-nav a {
  border: 1px solid #E6E3DC;
  color: #4E5A66;
  background-color: #ffffff;
  background-image: linear-gradient(var(--gold-wipe), var(--gold-wipe));
}
.catalog-nav a:is(:hover, :focus-visible) {
  background-size: 100% 100%;
  border-color: #A97F27;
  color: #6E5313;
  transition-duration: var(--dur-wipe-in), var(--dur-ink), var(--dur-ink), var(--dur-ink), var(--dur-shadow);
}
.catalog-nav a:focus-visible { outline: 2px solid #14212C; outline-offset: 2px; }
.catalog-nav a:active { background-size: 100% 100%; box-shadow: var(--act-press-flat); transition-duration: 0ms; }
.catalog-nav a[aria-current] {
  border-color: #14212C;
  color: #ffffff;
  background-color: #1B2A38;
  background-image: linear-gradient(#14212C, #14212C);
  box-shadow: inset 0 -2px 0 #C79A3E;
}

/* ---- 12. Back to top: square, ink wipe, double focus ring ---- */
.to-top {
  width: 44px;
  height: 44px;
  border: 1px solid #1B2A38;
  border-radius: 4px;
  color: #1B2A38;
  background-color: rgba(255, 255, 255, 0.94);
  background-image: linear-gradient(#1B2A38, #1B2A38);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  box-shadow: var(--act-rest-shadow);
  transition:
    opacity 260ms var(--ease-quint),
    background-size var(--dur-wipe-out) var(--ease-edge),
    color var(--dur-ink) var(--ease-edge),
    border-color var(--dur-ink) var(--ease-edge),
    box-shadow var(--dur-shadow) var(--ease-edge);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:is(:hover, :focus-visible) {
  background-size: 100% 100%;
  color: #ffffff;
  border-color: #1B2A38;
  box-shadow: var(--act-hover-shadow);
  transform: none;
}
.to-top:focus-visible { outline: 0; box-shadow: 0 0 0 2px #FCFAF5, 0 0 0 4px #14212C; }
.to-top:active { background-size: 100% 100%; box-shadow: var(--act-press-shadow); transform: none; transition-duration: 0ms; }

/* ---- 13. Hamburger: its only boundary was 1.28:1 ---- */
.nav-toggle {
  border: 1px solid #646E78;
  border-radius: 4px;
  background-color: #ffffff;
  background-image: linear-gradient(var(--gold-wipe), var(--gold-wipe));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transform: none;
  transition: background-size var(--dur-wipe-in) var(--ease-edge), border-color var(--dur-ink) var(--ease-edge);
}
.nav-toggle:is(:hover, :focus-visible) { background-size: 100% 100%; border-color: #A97F27; transform: none; }
.nav-toggle:focus-visible { outline: 2px solid #14212C; outline-offset: 2px; }
.nav-toggle span { background: #1B2A38; }
.nav-toggle[aria-expanded="true"] { border-color: #A97F27; background-size: 100% 100%; }

/* ---- 14. Nav links: the wipe at nav scale ---- */
.main-nav a {
  background-color: transparent;
  background-image: linear-gradient(var(--gold-wipe), var(--gold-wipe));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transition: background-size var(--dur-wipe-out) var(--ease-edge), color var(--dur-ink) var(--ease-edge);
}
.main-nav a:is(:hover, :focus-visible) {
  background-size: 100% 100%;
  color: #1B2A38;
  transition-duration: var(--dur-wipe-in), var(--dur-ink);
}
.main-nav a:active { background-image: linear-gradient(var(--gold-press), var(--gold-press)); transition-duration: 0ms; }
.main-nav > ul > li > a[aria-current="page"] { color: #1B2A38; font-weight: 700; background-size: 0% 100%; }
.dropdown-menu a {
  background-image: linear-gradient(#F7F6F2, #F7F6F2);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transition: background-size var(--dur-wipe-out) var(--ease-edge), color var(--dur-ink) var(--ease-edge);
}
.dropdown-menu a:is(:hover, :focus-visible) {
  background-size: 100% 100%;
  color: #1B2A38;
  transition-duration: var(--dur-wipe-in), var(--dur-ink);
}
.dropdown-menu a:hover i { background: #C79A3E; color: #1B2A38; }

.skip-link {
  border-radius: 0 0 4px 0;
  border-bottom: 3px solid #C79A3E;
  background: #1B2A38;
  color: #ffffff;
}
.skip-link:focus { left: 0; outline: 2px solid #E0BC6E; outline-offset: -5px; }

/* ---- 15. Disabled. Links stay focusable, so aria-disabled rather
        than pointer-events: none. ---- */
:is(.btn, .contact-action, .card-arrow, .btn-quiet)[aria-disabled="true"],
:is(.btn, .contact-action, .card-arrow, .btn-quiet).is-disabled,
.btn:disabled {
  --btn-bg: #F7F6F2;
  --btn-wipe: #F7F6F2;
  --btn-edge: #E6E3DC;
  --btn-edge-hover: #E6E3DC;
  color: #646E78;
  background-color: #F7F6F2;
  background-image: linear-gradient(#F7F6F2, #F7F6F2);
  background-size: 0% 100%;
  border-color: #E6E3DC;
  box-shadow: none;
  cursor: not-allowed;
}
:is(.btn, .contact-action, .card-arrow, .btn-quiet)[aria-disabled="true"]:is(:hover, :active, :focus-visible),
:is(.btn, .contact-action, .card-arrow, .btn-quiet).is-disabled:is(:hover, :active, :focus-visible),
.btn:disabled:is(:hover, :active) {
  background-size: 0% 100%;
  border-color: #E6E3DC;
  box-shadow: none;
  color: #646E78;
  transform: none;
}
:is(.btn, .contact-action)[aria-disabled="true"] i,
:is(.btn, .contact-action).is-disabled i { color: #646E78; transform: none; }

/* ---- 16. Retire the 2px lift everywhere ---- */
:is(.btn, .contact-action, .card-arrow, .btn-quiet, .catalog-nav a,
  .certificate-jumps a, .to-top, .nav-toggle, .main-nav a):is(:hover, :focus-visible, :active) {
  transform: none;
}

/* ---- 17. Gold re-tiering.
        Gold appeared about 50 times per page, so the primary CTA was
        competing with 45 other gold objects. Three tiers now:
        fill = act here, mark = belongs to this system, text = link.
        Card hover goes to ink, which gives focus a colour nobody
        else uses. ---- */
.badge { color: #6E5313; border-color: rgba(138, 106, 30, 0.32); }
.badge i { color: #8A6A1E; }

:is(.card, .bento-cell, .client-card, .workflow-step, .certificate-card):hover { border-color: rgba(20, 33, 44, 0.32); }
.service-card:hover { border-color: rgba(20, 33, 44, 0.40); }
.service-list .service-card:hover { border-color: rgba(20, 33, 44, 0.40); background: #FCFAF5; }
:is(.family-card, .unit-card, .brand-choice, .ref-group):hover { border-color: rgba(20, 33, 44, 0.32); }
:is(.card, .bento-cell, .client-card, .workflow-step, .certificate-card,
  .service-card, .brand-choice, .family-card, .unit-card):focus-within { border-color: #A97F27; }

:is(.card-icon, .highlight-icon, .bento-icon, .family-icon) {
  background: #F7F6F2;
  border: 1px solid #E6E3DC;
  color: #4E5A66;
}
:is(.service-bento-contact, .bento-wide) .bento-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #E0BC6E;
}
:is(.card-accent, .contact-card) { border-top-color: #A97F27; }
.check-list li::before { color: #646E78; }
.hero-feature-item i { color: #E0BC6E; }
.spec-tag { color: #4E5A66; border-color: #E6E3DC; background: #FCFAF5; }
.service-card .service-num,
.bento-num { color: #646E78; }
:is(.service-bento-contact, .bento-wide, .fleet-band) .service-num { color: rgba(224, 188, 110, 0.75); }

/* ---- 18. Reduced motion: the fill still arrives, it arrives at once.
        Every state stays distinguishable by colour, edge and shadow. ---- */
@media (prefers-reduced-motion: reduce) {
  :is(.btn, .contact-action, .card-arrow, .btn-quiet, .catalog-nav a,
    .certificate-jumps a, .to-top, .nav-toggle, .main-nav a, .dropdown-menu a),
  :is(.btn, .contact-action, .card-arrow, .btn-quiet) i,
  .btn svg { transition: none; }
  :is(.btn, .contact-action, .card-arrow, .btn-quiet, .catalog-nav a,
    .certificate-jumps a, .to-top, .nav-toggle, .main-nav a,
    .dropdown-menu a):is(:hover, :focus-visible, :active) { transition: none; transform: none; }
  .btn:hover i,
  .btn:focus-visible i,
  .btn:hover svg,
  .contact-action:hover i,
  :is(.btn-quiet, .card-arrow):hover i,
  :is(.bento-cell, .service-card, .brand-choice, .card):is(:hover, :focus-visible, :focus-within) .card-arrow i { transform: none; }
  .to-top { transition: opacity 120ms linear; }
}

/* ---- 19. RTL: the edge is logical, so the wipe flips ---- */
[dir="rtl"] .btn,
[dir="rtl"] .contact-action,
[dir="rtl"] .catalog-nav a,
[dir="rtl"] .certificate-jumps a,
[dir="rtl"] .to-top,
[dir="rtl"] .nav-toggle,
[dir="rtl"] .main-nav a,
[dir="rtl"] .dropdown-menu a { background-position: 100% 0; }
[dir="rtl"] :is(.btn-quiet, .card-arrow) { background-position: 100% 100%, 100% 100%; }
[dir="rtl"] .btn:hover :is(.fa-arrow-right, .fa-chevron-right, .icon-advance),
[dir="rtl"] :is(.bento-cell, .service-card, .brand-choice, .card):hover .card-arrow i {
  transform: translateX(calc(-1 * var(--icon-advance)));
}

/* ---- 20. Specificity backstops.
        Page stylesheets set some of these with two-class selectors, which beat
        the single-class rules above regardless of load order. These restate the
        intent at matching specificity. ---- */
.brand-choice .card-arrow,
.bento-cell .card-arrow,
.service-card .card-arrow,
.service-list .service-card .card-arrow { color: #8A6A1E; }
.brand-choice:hover .card-arrow,
.brand-choice:focus-visible .card-arrow,
.bento-cell:hover .card-arrow,
.service-card:hover .card-arrow,
.service-card:focus-visible .card-arrow { color: #6E5313; }

/* Same for the dark cells, where the light gold is the readable one. */
.bento-wide .card-arrow,
.service-bento-contact .card-arrow { color: #E0BC6E; }
.bento-wide:hover .card-arrow,
.service-bento-contact:hover .card-arrow { color: #FCFAF5; }

.service-card .service-num,
.service-list .service-card .service-num { color: #646E78; }
.service-bento-contact .service-num { color: rgba(224, 188, 110, 0.78); }

/* products.css and certificates.css both tint these with two-class selectors. */
.family-card .family-icon,
.unit-card .family-icon { background: #F7F6F2; border: 1px solid #E6E3DC; color: #4E5A66; }
.catalog-heading .section-label,
.certificate-section-heading .section-label { color: #8A6A1E; }
.certificate-details .section-label { color: #6E5313; background: #F7F6F2; }
.ref-group h4 { color: #8A6A1E; }

/* ---- 21. Token correction.
        --text-light was #646E78 = 4.39:1 on white, just under the 4.5:1 AA
        floor, and it carries real content: the spec-table lab column, card
        kickers, service numbers, the hours labels and the info footnotes.
        #646E78 is 5.19:1 on white and 4.82:1 on --bg-surface. ---- */
:root { --text-light: #646E78; }

/* contact.css sets this with a two-class selector, so restate it here. */
.enquiry-list a { color: #8A6A1E; }
.enquiry-list a:hover { color: #6E5313; }

/* ---- 22. Phone targets.
        The size scale in §2 was drawn for a mouse. Below 600px the small
        variant's 38px box and the jump chip's 13px-on-8px padding are both
        under the 44px floor, and the large variant goes the other way: at
        17px with 32px of side padding, "Message us on WhatsApp" is wider
        than a 320px screen's content box and wraps mid-label inside the
        pill. On a phone every action collapses to the one middle size.
        Nothing here applies above 600px. ---- */
@media (max-width: 600px) {
  .btn-sm,
  .certificate-actions .btn,
  .catalog-heading .btn,
  .service-list .btn {
    --btn-pad: 0.5625rem 1rem;
    --btn-min: 44px;
    --btn-size: 0.875rem;
  }

  .btn-lg,
  .hero .btn,
  .brand-hero .btn,
  .whatsapp-panel .btn {
    --btn-pad: 0.75rem 1.25rem;
    --btn-min: 48px;
    --btn-size: 1rem;
    --btn-gap: 0.5rem;
  }

  .contact-action {
    min-height: 44px;
    padding: 0.5625rem 1rem;
    font-size: 0.875rem;
  }

  /* The chip rail is the only navigation on the catalogue pages and it is
     driven by a horizontal swipe, so the chips need the full thumb. */
  .catalog-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1rem;
  }
}