/* ==========================================================================
   INDIAN RUBBER INDUSTRY — Road Safety Solutions
   Global stylesheet
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography & utilities
   4.  Buttons
   5.  Header / navigation
   6.  Hero
   7.  Stats strip
   8.  Sections: about, products, applications, why, quality
   9.  Page hero (inner pages)
   10. Product detail
   11. Contact & forms
   12. CTA band
   13. Footer
   14. Floating UI (scroll top, mobile action bar)
   15. Animations
   16. Responsive
   ========================================================================== */

/* 1. TOKENS ================================================================= */
:root {
  /* Ink — dark surfaces, headings, body text */
  --ink: #16181a;
  --ink-700: #202326;
  --ink-600: #2b2f33;
  --steel: #5d6266;
  --steel-300: #9aa0a5;
  --line: #e3dfdf;
  --bg: #f7f5f5;
  --white: #ffffff;

  /* Traffic red — the brand accent. Use for buttons, rules and graphics.
     On dark surfaces red only reaches 3.7:1, so small text there must use
     --accent-light (7.8:1 on ink) instead. */
  --accent: #d92d20;
  --accent-dark: #b8241a;
  --accent-light: #ff8a80;

  /* Lane markings. White keeps the road elements believable now that yellow
     has left the palette; set this to var(--accent) if you want them red. */
  --road-line: #f4f6f8;

  /* Blue stays reserved for the floating call button */
  --blue: #0059c8;
  --blue-dark: #00459b;

  --text: #16181a;
  --text-muted: #5d6266;
  --text-invert: #ffffff;
  --text-invert-muted: #bcbfc2;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(22, 24, 26, .06), 0 2px 8px rgba(22, 24, 26, .05);
  --shadow: 0 4px 12px rgba(22, 24, 26, .07), 0 12px 32px rgba(22, 24, 26, .07);
  --shadow-lg: 0 18px 48px rgba(22, 24, 26, .16);

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(2.75rem, 5.2vw, 4.75rem);

  --header-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.dark-panel :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.info-card :focus-visible,
.sidebar-card :focus-visible,
.app-card :focus-visible { outline-color: var(--accent-light); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--accent);
  color: var(--white);
  padding: .75rem 1.25rem;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* 3. TYPOGRAPHY & UTILITIES ================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); }
.section--light { background: var(--white); }
.section--muted { background: var(--bg); }

h1, h2, h3, h4 {
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  text-wrap: balance;
}

.h-lg { font-size: clamp(1.95rem, 4.2vw, 3.1rem); }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 62ch;
}
.dark-panel .lead,
.info-card .lead,
.sidebar-card .lead { color: var(--text-invert-muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--accent);
  flex: none;
}
.dark-panel .eyebrow,
.info-card .eyebrow,
.sidebar-card .eyebrow { color: var(--accent-light); }
.dark-panel .eyebrow::before,
.info-card .eyebrow::before,
.sidebar-card .eyebrow::before { background: var(--accent); }

.section-head { max-width: 720px; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.section-head .lead { margin-top: 1.15rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }

.dark-panel { background: var(--ink); color: var(--text-invert); }
.dark-panel h1, .dark-panel h2, .dark-panel h3,
.info-card h2, .info-card h3,
.sidebar-card h2, .sidebar-card h3 { color: var(--text-invert); }

.mt-lg { margin-top: 2rem; }

/* Road-line divider element */
.hazard-rule {
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, var(--ink) 14px 28px);
}

/* 4. BUTTONS ================================================================ */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  min-height: 50px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--white); }
.btn--primary:hover { --btn-bg: var(--accent-dark); border-color: var(--accent-dark); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--dark:hover { --btn-bg: var(--ink-600); border-color: var(--ink-600); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(22, 24, 26, .28);
}
.btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .45);
}
.btn--ghost-light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.btn--sm { padding: .65rem 1.15rem; min-height: 42px; font-size: .86rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  transition: gap .18s var(--ease), color .18s var(--ease);
}
.link-arrow:hover { gap: .85rem; color: var(--accent); }
.dark-panel .link-arrow { color: var(--white); }

/* 5. HEADER / NAVIGATION ==================================================== */
.topbar {
  background: var(--ink);
  /* Brighter than the general muted-on-dark tone: this is small text that
     carries the phone number and email, so it has to read at a glance. */
  color: #e3e9ee;
  font-size: .84rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  /* Collapsed smoothly (not display:none) when the header compacts, so the
     document height changes gradually and the header cannot flicker. The cap is
     generous enough that the bar can never clip its own text when it wraps. */
  max-height: 96px;
  overflow: hidden;
  transition: max-height .3s var(--ease), opacity .2s var(--ease);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 42px;
}
.topbar__list { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__item svg { width: 15px; height: 15px; color: var(--accent-light); flex: none; }
.topbar a:hover { color: var(--accent-light); }
.topbar__sep { opacity: .4; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(22, 24, 26, .12); }
.site-header.is-stuck .topbar { max-height: 0; opacity: 0; border-bottom-color: transparent; }
.site-header.is-stuck .header__inner { min-height: 64px; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
  transition: min-height .25s var(--ease);
}

/* Logo */
.logo { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.logo__mark { width: 40px; height: 40px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
  text-transform: uppercase;
}
.logo__name span { color: var(--accent); }
.logo__tag {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: 5px;
}

/* Desktop nav */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.6rem); }
.nav__cta { display: none; } /* shown only inside the mobile menu */
.nav__link {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: .55rem .25rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 700; }

.header__actions { display: flex; align-items: center; gap: .9rem; flex: none; }
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: .93rem;
  color: var(--ink);
  white-space: nowrap;
}
.header__phone svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.header__phone:hover { color: var(--accent); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
}
.nav-toggle__bars { position: relative; width: 22px; height: 2px; background: var(--ink); display: block; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform .22s var(--ease), top .22s var(--ease), opacity .15s linear;
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* 6. HERO =================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--text-invert);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(22, 24, 26, .95) 0%, rgba(22, 24, 26, .84) 42%, rgba(22, 24, 26, .42) 78%, rgba(22, 24, 26, .55) 100%);
}
.hero__inner {
  display: flex;
  align-items: center;
  min-height: clamp(560px, 82vh, 800px);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.hero__content { max-width: 780px; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .9rem .5rem .75rem;
  background: rgba(22, 24, 26, .55);
  border-left: 4px solid var(--accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 1.6rem;
}
.hero h1 {
  font-size: clamp(2.35rem, 6.4vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-transform: uppercase;
}
.hero h1 .line-2 { color: var(--white); }
.hero h1 .line-3 { color: var(--accent-light); }
.hero p.hero__sub {
  margin-top: 1.6rem;
  max-width: 58ch;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: #d7dee5;
  line-height: 1.7;
}
.hero .btn-row { margin-top: 2.2rem; }
.hero__trust {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .88rem;
  color: var(--text-invert-muted);
  max-width: 52ch;
}
.hero__trust svg { width: 20px; height: 20px; color: var(--accent-light); flex: none; }

/* Road lane markings at hero base */
.hero__lanes {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  background: linear-gradient(to top, rgba(22, 24, 26, .92), transparent);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__lanes::before {
  content: "";
  display: block;
  /* flex: none is required — as a flex item this would otherwise be shrunk back
     to the container width, leaving a gap at the right edge on every loop. */
  flex: none;
  width: 200%;
  height: 7px;
  background: repeating-linear-gradient(90deg, var(--road-line) 0 60px, transparent 60px 120px);
  animation: lane-scroll 5.5s linear infinite;
}

/* 7. STATS STRIP ============================================================ */
.stats {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-top: 4px solid var(--accent);
  box-shadow: var(--shadow);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: clamp(1.75rem, 3vw, 2.6rem) clamp(1.25rem, 2.4vw, 2.2rem);
  border-right: 1px solid var(--line);
  transition: background-color .2s var(--ease);
}
.stat:last-child { border-right: 0; }
.stat:hover { background: #fbfcfd; }
.stat__num {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1;
}
.stat__num::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  background: var(--accent);
  margin: .85rem 0 .9rem;
}
.stat__label {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.stat__text { font-size: .88rem; color: var(--text-muted); margin-top: .45rem; }

/* 8. CONTENT SECTIONS ======================================================= */
/* Split (about) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--ink);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; }
.media-frame--tall img { aspect-ratio: 4 / 5; }
.media-frame::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 28px, transparent 28px 52px);
}
.media-badge {
  position: absolute;
  left: 0; bottom: 26px;
  background: var(--accent);
  color: var(--white);
  padding: .8rem 1.35rem;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  max-width: 84%;
}

.check-list { display: grid; gap: .85rem; margin-top: 1.9rem; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .97rem;
  font-weight: 500;
}
.check-list svg { width: 21px; height: 21px; color: var(--accent); flex: none; margin-top: 2px; }
.dark-panel .check-list svg { color: var(--accent-light); }
.dark-panel .check-list li { color: #d7dee5; }

/* Product grid */
.card-grid {
  display: grid;
  /* min() keeps the track from ever exceeding the container on 320px screens */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.product-card__media { position: relative; overflow: hidden; background: #e8edf1; }
.product-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__tag {
  position: absolute;
  top: 0; left: 0;
  background: var(--ink);
  color: var(--white);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .8rem;
}
.product-card__body {
  padding: 1.5rem 1.5rem 1.65rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}
.product-card__body h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; }
.product-card__body p { font-size: .92rem; color: var(--text-muted); line-height: 1.65; }
.product-card__body .link-arrow { margin-top: auto; align-self: flex-start; padding-top: .6rem; }

/* Applications */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(1rem, 1.8vw, 1.4rem);
}
.app-card {
  position: relative;
  isolation: isolate;
  min-height: 210px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .4rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.app-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(160deg, var(--ink-600) 0%, var(--ink) 62%),
    var(--ink);
}
.app-card::after {
  content: "";
  position: absolute;
  right: -30px; bottom: -30px;
  width: 190px; height: 190px;
  z-index: -1;
  background:
    repeating-linear-gradient(-45deg, rgba(217, 45, 32, .30) 0 10px, transparent 10px 22px);
  transform: rotate(6deg);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
  opacity: .8;
}
.app-card:hover::after { transform: rotate(6deg) scale(1.12); opacity: 1; }
.app-card__icon {
  width: 42px; height: 42px;
  color: var(--accent);
  margin-bottom: auto;
}
.app-card__icon svg { width: 100%; height: 100%; }
.app-card h3 { font-size: 1.08rem; font-weight: 700; }
.app-card p { font-size: .87rem; color: var(--text-invert-muted); line-height: 1.55; }

/* Why choose us */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
}
.feature {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1.75rem 1.6rem;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-left-color .2s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-left-color: var(--ink); }
.feature__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(217, 45, 32, .10);
  border-radius: var(--radius-sm);
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: .5rem; }
.feature p { font-size: .92rem; color: var(--text-muted); line-height: 1.65; }

.dark-panel .feature {
  background: var(--ink-700);
  border-color: rgba(255, 255, 255, .08);
  border-left-color: var(--accent);
}
.dark-panel .feature p { color: var(--text-invert-muted); }
.dark-panel .feature__icon { background: rgba(255, 138, 128, .16); color: var(--accent); }

/* Quality (dark) */
.quality { position: relative; overflow: hidden; }
.quality::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 420px at 12% 0%, rgba(217, 45, 32, .16), transparent 62%);
  pointer-events: none;
}
.quality .container { position: relative; }
.quality__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.quality-points { display: grid; gap: 1.35rem; margin-top: 2rem; }
.quality-point { display: flex; gap: 1rem; align-items: flex-start; }
.quality-point__num {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--accent-light);
  padding-top: 4px;
  flex: none;
  min-width: 28px;
}
.quality-point h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: .3rem; }
.quality-point p { font-size: .92rem; color: var(--text-invert-muted); line-height: 1.6; }

/* 9. PAGE HERO (inner pages) ================================================ */
.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--text-invert);
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 340px at 88% 12%, rgba(217, 45, 32, .20), transparent 65%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 26px);
}
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); text-transform: uppercase; }
.page-hero .lead { margin-top: 1.15rem; color: var(--text-invert-muted); }
.page-hero__lanes {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--road-line) 0 42px, transparent 42px 76px);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--text-invert-muted);
  margin-bottom: 1.35rem;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: .5rem; opacity: .5; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb [aria-current] { color: var(--accent-light); font-weight: 600; }

/* 10. PRODUCT DETAIL ======================================================== */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.detail-block { margin-top: clamp(2.25rem, 3.5vw, 3rem); }
.detail-block:first-child { margin-top: 0; }
.detail-block h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); margin-bottom: 1rem; }
.detail-block p + p { margin-top: 1rem; }
.detail-block p { color: var(--text-muted); line-height: 1.8; }

.pill-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .87rem;
  font-weight: 600;
}
.pill::before { content: ""; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex: none; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 1.4rem; font-size: .93rem; }
.spec-table caption { text-align: left; font-size: .84rem; color: var(--text-muted); padding-bottom: .75rem; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line);
  vertical-align: top;
}
.spec-table th { background: var(--white); width: 42%; font-weight: 700; }
.spec-table td { background: #fbfcfd; color: var(--text-muted); }

.sidebar-card {
  background: var(--ink);
  color: var(--text-invert);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.sidebar-card h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.sidebar-card p { font-size: .92rem; color: var(--text-invert-muted); line-height: 1.7; }
.sidebar-card .btn { margin-top: 1.2rem; }
.sidebar-card__divider { height: 1px; background: rgba(255, 255, 255, .12); margin: 1.5rem 0; }
.sidebar-card dl { display: grid; gap: 1rem; font-size: .9rem; }
.sidebar-card dt {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 700;
  margin-bottom: .2rem;
}
.sidebar-card dd { margin: 0; color: #e2e8ee; }

/* Long-form / legal prose */
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 2.5rem 0 .9rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-muted); line-height: 1.8; }
.prose p + p { margin-top: 1rem; }
.prose ul { display: grid; gap: .6rem; margin-top: 1rem; }
.prose li { position: relative; padding-left: 1.5rem; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 8px; height: 3px;
  background: var(--accent);
}
.prose a:not(.btn) { text-decoration: underline; font-weight: 600; color: var(--ink); }
.prose a:not(.btn):hover { color: var(--accent); }
.prose__meta {
  font-size: .85rem;
  color: var(--text-muted);
  padding: 1rem 1.15rem;
  background: var(--white);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  margin-bottom: 2rem;
}

/* 11. CONTACT & FORMS ======================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-grid > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.field .req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .85rem 1rem;
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input,
.field select,
.field textarea { min-width: 0; }
.field select { appearance: none; background-image: none; cursor: pointer; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel-300); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(217, 45, 32, .22);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--accent); background: #fff7f6; }
.field__error { font-size: .8rem; color: var(--accent); font-weight: 600; min-height: 0; }
.field__error:empty { display: none; }

.form-note { font-size: .82rem; color: var(--text-muted); margin-top: 1rem; }
.form-status {
  margin-top: 1.15rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight: 600;
  border-left: 4px solid var(--accent);
  background: #fdf3f2;
  color: var(--ink);
}
.form-status[hidden] { display: none; }
.form-status--ok { border-left-color: #1a7f4b; background: #eefaf3; }
.form-status--error { border-left-color: var(--accent); background: #fdf1f0; }

.btn.is-loading { pointer-events: none; opacity: .85; }
.btn__spinner {
  width: 17px; height: 17px;
  border: 2px solid rgba(22, 24, 26, .28);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn__spinner[hidden] { display: none; }

/* Contact info panel */
.info-card {
  background: var(--ink);
  color: var(--text-invert);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.3rem);
}
.info-list { display: grid; gap: 1.5rem; margin-top: 1.6rem; }
.info-item { display: flex; gap: 1rem; align-items: flex-start; }
.info-item__icon {
  width: 42px; height: 42px;
  flex: none;
  display: grid; place-items: center;
  background: rgba(255, 138, 128, .16);
  border-radius: var(--radius-sm);
  color: var(--accent);
}
.info-item__icon svg { width: 21px; height: 21px; }
.info-item h3 {
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: .35rem;
}
.info-item p, .info-item a { font-size: .96rem; color: #e2e8ee; line-height: 1.6; font-style: normal; }
.info-item a:hover { color: var(--accent); }

.map-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(0deg, rgba(16,24,32,.03), rgba(16,24,32,.03)),
    repeating-linear-gradient(0deg, #e9eef2 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, #e9eef2 0 1px, transparent 1px 42px),
    #f4f7f9;
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}
.map-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 46%, #dbe2e8 46% 49%, transparent 49%),
    linear-gradient(-70deg, transparent 62%, #dbe2e8 62% 64%, transparent 64%);
}
.map-frame > * { position: relative; }
.map-pin {
  width: 54px; height: 54px;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--white);
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  box-shadow: var(--shadow);
}
.map-pin svg { width: 26px; height: 26px; transform: rotate(45deg); }
.map-frame h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.map-frame p { font-size: .9rem; color: var(--text-muted); max-width: 44ch; margin-inline: auto; }
.map-frame .btn { margin-top: 1.2rem; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 12. CTA BAND ============================================================== */
.cta-band {
  position: relative;
  background: var(--accent);
  color: var(--white);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .07) 0 18px, transparent 18px 40px);
}
.cta-band__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.cta-band h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: 20ch; }
.cta-band p { margin-top: .8rem; font-size: 1.02rem; max-width: 46ch; color: rgba(255, 255, 255, .92); }
/* on the red band the dark-outline ghost button would sit at 3.7:1 — invert it */
.cta-band .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, .55); }
.cta-band .btn--ghost:hover { background: var(--white); color: var(--accent); border-color: var(--white); }
.cta-band :focus-visible { outline-color: var(--white); }
.cta-band .btn-row { flex: none; }

/* 13. FOOTER ================================================================ */
.site-footer { background: var(--ink); color: var(--text-invert-muted); }
.site-footer .hazard-rule { opacity: .95; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  padding-block: clamp(3rem, 5vw, 4.25rem);
}
.footer__brand .logo__name { color: var(--white); }
.footer__brand .logo__tag { color: var(--accent-light); }
.footer__about { font-size: .92rem; line-height: 1.75; margin-top: 1.25rem; max-width: 38ch; }
.site-footer h3 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: .7rem;
}
.site-footer h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 3px;
  background: var(--accent);
}
.footer__links { display: grid; gap: .7rem; font-size: .93rem; }
.footer__links a { display: inline-flex; align-items: center; gap: .5rem; transition: color .18s var(--ease), gap .18s var(--ease); }
.footer__links a::before { content: ""; width: 8px; height: 2px; background: var(--accent-light); flex: none; transition: width .18s var(--ease); }
.footer__links a:hover { color: var(--white); gap: .7rem; }
.footer__links a:hover::before { width: 14px; }

.footer__contact { display: grid; gap: 1.1rem; font-size: .93rem; font-style: normal; }
.footer__contact div { display: flex; gap: .75rem; align-items: flex-start; line-height: 1.6; }
.footer__contact svg { width: 18px; height: 18px; color: var(--accent-light); flex: none; margin-top: 3px; }
.footer__phones { display: grid; gap: .3rem; }
.footer__contact a:hover { color: var(--accent); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__legal a:hover { color: var(--accent); }

/* 14. FLOATING UI =========================================================== */

/* Floating call / WhatsApp buttons (desktop & tablet) --------------------- */
.float-actions {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 94;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.float-btn {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  box-shadow: 0 6px 18px rgba(22, 24, 26, .28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.float-btn svg { width: 24px; height: 24px; }
.float-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 24px rgba(22, 24, 26, .34); }
.float-btn--call { background: var(--blue); }
.float-btn--call:hover { background: var(--blue-dark); }
.float-btn--whatsapp { background: #25d366; color: #07321a; }
.float-btn--whatsapp:hover { filter: brightness(1.05); }

/* Label revealed on hover / keyboard focus */
.float-btn__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  background: var(--ink);
  color: var(--white);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .5rem .8rem;
  border-radius: var(--radius-sm);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.float-btn:hover .float-btn__label,
.float-btn:focus-visible .float-btn__label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;
  background: var(--ink);
  border-top: 3px solid var(--accent);
  box-shadow: 0 -6px 20px rgba(22, 24, 26, .22);
}
.action-bar__list { display: grid; grid-template-columns: repeat(3, 1fr); }
.action-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 62px;
  padding: .5rem .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.action-bar a:last-child { border-right: 0; }
.action-bar svg { width: 21px; height: 21px; color: var(--accent-light); }
.action-bar a:active { background: var(--ink-600); }
.action-bar a.is-accent svg { color: #25d366; }

/* 15. ANIMATIONS ============================================================ */
@keyframes lane-scroll { from { transform: translateX(0); } to { transform: translateX(-120px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reveal styles are scoped to .js (set by an inline snippet in <head>) so that
   content is always visible if JavaScript is unavailable. */
.js [data-animate] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.js [data-animate].is-in { opacity: 1; transform: none; }
[data-animate][data-delay="1"] { transition-delay: .08s; }
[data-animate][data-delay="2"] { transition-delay: .16s; }
[data-animate][data-delay="3"] { transition-delay: .24s; }
[data-animate][data-delay="4"] { transition-delay: .32s; }

.js .reveal-media { clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); }
.js .reveal-media.is-in { clip-path: inset(0 0 0 0); }

@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;
  }
  .js [data-animate] { opacity: 1; transform: none; }
  .js .reveal-media { clip-path: none; }
  .hero__lanes::before { animation: none; }
}

/* 16. RESPONSIVE ============================================================ */
/* 993–1200px: keep all four footer columns (dropping Contact onto its own
   full-width row left a stretched, half-empty band). Ratios and gap tighten
   instead so the address column still has room to breathe. */
@media (max-width: 1200px) {
  .footer__grid {
    grid-template-columns: 1.35fr 1fr 1fr 1.45fr;
    gap: clamp(1.5rem, 2.6vw, 2.25rem);
  }
}

@media (max-width: 1080px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar-card { position: static; }
}

/* The header phone link only appears where the full number fits (>1100px).
   Below that the top bar and the fixed bottom bar carry the number instead. */
@media (max-width: 1100px) {
  .header__phone { display: none; }
}
@media (max-width: 992px) {
  :root { --header-h: 68px; }

  .topbar__item--address { display: none; }

  /* hamburger sits last, hard against the right edge. The actions block holds
     nothing at these widths (phone hidden below 1100, CTA below 992), so it is
     removed rather than left occupying a flex gap. */
  .nav-toggle { display: inline-flex; order: 3; margin-left: auto; }
  .header__actions { display: none; }
  .nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--white);
    border-top: 1px solid var(--line);
    border-bottom: 3px solid var(--accent);
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .32s var(--ease), visibility .32s;
  }
  .site-header { position: sticky; }
  .header__inner { position: relative; }
  .nav.is-open { max-height: 70vh; overflow-y: auto; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.25rem; }
  .nav__link {
    padding: 1rem .25rem;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--accent); }
  .nav__cta { display: block; margin-top: 1.1rem; }
  .nav__cta .btn { width: 100%; }

  .split, .quality__grid, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__contact { grid-template-columns: 1fr; }

  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
  body { padding-bottom: 62px; }
  .action-bar { display: block; }
  /* the fixed bottom bar already provides Call and WhatsApp on small screens */
  .float-actions { display: none; }

  .hero__inner { min-height: 0; padding-block: clamp(3rem, 12vw, 4.5rem) clamp(3.5rem, 10vw, 5rem); }
  .hero::after {
    background: linear-gradient(180deg, rgba(22, 24, 26, .88) 0%, rgba(22, 24, 26, .8) 55%, rgba(22, 24, 26, .92) 100%);
  }
  .form-grid { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: flex-start; }
}

@media (max-width: 576px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn--sm, .action-bar .btn, .pill { width: auto; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__name { font-size: .92rem; }
  .logo__tag { font-size: .56rem; letter-spacing: .18em; }
  .topbar__list { gap: 1rem; }
}

@media (max-width: 480px) {
  .header__inner { gap: .75rem; }
  .logo { gap: .55rem; min-width: 0; }
  .nav-toggle { width: 42px; height: 42px; }
}

/* Mobile S (320) and Mobile M (375): the top bar is dropped — the phone/email it
   carries are already one tap away in the fixed bottom action bar. */
@media (max-width: 400px) {
  .topbar { display: none; }
}

@media (max-width: 380px) {
  .logo__mark { width: 30px; height: 30px; }
  .logo__tag { font-size: .5rem; letter-spacing: .14em; }
  .logo__name { font-size: .78rem; }
  .card-grid { grid-template-columns: 1fr; }
}

/* Print --------------------------------------------------------------------- */
@media print {
  .site-header, .action-bar, .float-actions, .cta-band, .hero__lanes { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
  .dark-panel, .site-footer { background: #fff !important; color: #000 !important; }
}