/* ==========================================================================
   INDIAN RUBBER INDUSTRY — Road Safety Solutions
   Global stylesheet
   --------------------------------------------------------------------------
   0.  Fonts (self-hosted Inter)
   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
   ========================================================================== */

/* 0. FONTS =================================================================
   Inter is self-hosted so the browser never has to chain
   HTML -> Google Fonts CSS -> Google Fonts woff2 before text can paint.
   These are the same variable woff2 files Google Fonts served; one file covers
   the whole 100-900 weight axis, so weights 400/500/600/700/800 all render
   exactly as before from a single request.
   The latin-ext face is unicode-range scoped: browsers only fetch it if a
   character in that range actually appears on the page (today none do).
   Files live in Website/assets/fonts/ - do not move them without updating
   the <link rel="preload"> in every HTML head as well. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 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; }

/* Visually hidden but available to screen readers and crawlers — used to give
   short link text ("Enquire") the full context ("Enquire about Stop Sign Board"). */
.sr-only {
  position: absolute;
  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;
}

/* 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-sm { margin-top: .75rem; }
.mt-md { margin-top: 1.25rem; }
.mt-lg { margin-top: 1.75rem; }
.mt-xl { margin-top: 2.25rem; }

/* 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--black {
  --btn-bg: #000000;
  --btn-fg: var(--white);
  background: #000000;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, .28);
}
.btn--black:hover {
  background: #18191b;
  border-color: var(--white);
  color: var(--white);
}

.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; }
/* Keeps a pair of buttons on one row at every width, including the phone
   breakpoint where .btn-row otherwise stacks and buttons go full width. */
.btn-row--inline { flex-wrap: nowrap; }
.btn-row--inline .btn { flex: 1 1 0; min-width: 0; padding-inline: 1rem; }

.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: relative;
  width: 100%;
}
.hero__media picture { display: block; width: 100%; }
.hero__media img { width: 100%; height: auto; display: block; object-fit: cover; object-position: center 55%; }

.hero__inner {
  display: flex;
  align-items: center;
  min-height: clamp(500px, 72vh, 680px);
  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, .74);
  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;
}

/* 6b. HERO CONTENT (H1 + intro below banner) =============================== */
.hero-content {
  position: relative;
}
.hero-content h1 {
  line-height: 1.12;
}
.hero-content .lead {
  max-width: 100%;
}

/* 6c. OVERVIEW SECTION (Section 2) ========================================== */
#overview .lead {
  max-width: 100%;
}
.overview__types {
  background: var(--white);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.overview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: .85rem;
}
.overview__tag {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.overview__tag svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex: none;
}
.overview__tag:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* 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;
  /* carried over from the h1-h4 base rule so these render identically as <p> */
  letter-spacing: -.02em;
  text-wrap: balance;
}
.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;
}

.about__header .lead,
#overview .lead,
#why-useful .lead,
#products .lead,
#reflective-and-applications .lead,
#road-safety .lead,
#applications .lead,
#reflective-material .lead,
#effective-design .lead,
#maintenance .lead,
#safety-importance .lead,
#why-choose-us .lead,
#talk-to-us .lead,
#faq .lead,
#final-cta .lead {
  max-width: 100%;
}

.hero-content .lead + .lead,
#overview .lead + .lead,
.about__header .lead + .lead,
#why-useful .lead + .lead,
#reflective-and-applications .lead + .lead,
#road-safety .lead + .lead,
#applications .lead + .lead,
#reflective-material .lead + .lead,
#effective-design .lead + .lead,
#maintenance .lead + .lead,
#safety-importance .lead + .lead,
#why-choose-us .lead + .lead,
#talk-to-us .lead + .lead,
#faq .lead + .lead,
#final-cta .lead + .lead {
  margin-top: .75rem;
}

#why-useful .section-head,
#applications .section-head,
#reflective-material .section-head,
#effective-design .section-head,
#maintenance .section-head,
#safety-importance .section-head,
#why-choose-us .section-head,
#talk-to-us .section-head,
#faq .section-head,
#final-cta .section-head {
  max-width: 100%;
  width: 100%;
  margin-bottom: 2rem;
}

#safety-importance h2,
#why-choose-us h2,
#talk-to-us h2,
#faq h2,
#final-cta h2 {
  width: 100%;
  max-width: 100%;
  text-wrap: normal;
}

#products .section-head {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

#reflective-and-applications .section-head {
  max-width: 100%;
  margin-bottom: .85rem;
}

.feature-side-card .section-head {
  margin-bottom: 0;
}

/* Split Feature (Sections 6 & 7: Reflective Signage & Applications) */
.split--feature {
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.feature-side-card,
.app-list-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

.feature-side-card:hover,
.app-list-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(217, 45, 32, .25);
}

.feature-side-highlight {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .85rem 1.05rem;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: .85rem;
}

.feature-side-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.feature-side-icon svg {
  width: 18px;
  height: 18px;
}

.feature-side-highlight__content {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.feature-side-highlight__content strong {
  font-size: .92rem;
  color: var(--ink);
}

.feature-side-highlight__content span {
  font-size: .84rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* App pill grid (Section 7) */
.app-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
  margin-top: 0;
}

.app-pill {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

.app-pill:hover {
  background: var(--white);
  border-color: var(--accent);
  transform: translateX(3px);
}

.app-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

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

/* Section 8: Road Safety Through Effective Signage */
.safety-banner {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-top: 4px solid var(--accent);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

.safety-banner:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.safety-banner__content .eyebrow {
  margin-bottom: 1rem;
}

.safety-banner__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.safety-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}

.safety-tag svg {
  color: var(--accent);
  flex: none;
}

/* Section 10: Reflective Material for Traffic & Road Sign Boards (Dark Panel) */
.reflective-material {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

.reflective-material::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 480px at 85% 15%, rgba(217, 45, 32, .18), transparent 65%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .02) 0 14px, transparent 14px 28px);
  pointer-events: none;
}

.reflective-material__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

#reflective-material .section-head {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

#reflective-material .lead {
  max-width: 100%;
  color: var(--text-invert-muted);
}

.reflective-callout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  margin-top: 1.75rem;
}

.reflective-callout__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(217, 45, 32, .2);
  color: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.reflective-callout__icon svg {
  width: 22px;
  height: 22px;
}

.reflective-callout__text h3 {
  font-size: .98rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .25rem;
}

.reflective-callout__text p {
  font-size: .86rem;
  color: var(--text-invert-muted);
  line-height: 1.5;
}

.reflective-material__list-card {
  background: var(--ink-700);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.reflective-material__list-head {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.reflective-material__list-head .badge-accent {
  display: inline-block;
  background: rgba(217, 45, 32, .25);
  color: var(--accent-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: var(--radius-sm);
  margin-bottom: .6rem;
}

.reflective-material__list-head h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
}

.reflective-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}

.reflective-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .95rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-sm);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

.reflective-item:hover {
  background: rgba(255, 255, 255, .09);
  border-color: var(--accent);
  transform: translateX(3px);
}

.reflective-item__num {
  font-size: .76rem;
  font-weight: 800;
  color: var(--accent-light);
  font-family: monospace;
}

.reflective-item__label {
  font-size: .88rem;
  font-weight: 600;
  color: #e5e9ec;
}

@media (max-width: 900px) {
  .reflective-material__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

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

/* Section 11: Signage Board Design */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.design-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

.design-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(217, 45, 32, .25);
}

.design-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.design-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(217, 45, 32, .08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.design-card__icon svg {
  width: 22px;
  height: 22px;
}

.design-card__num {
  font-size: .85rem;
  font-weight: 800;
  color: var(--text-muted);
  font-family: monospace;
}

.design-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .6rem;
  color: var(--ink);
}

.design-card p {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Section 12: Maintenance of Signage Boards */
.maintenance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.maintenance-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

.maintenance-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(217, 45, 32, .25);
}

.maintenance-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.maintenance-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(217, 45, 32, .08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.maintenance-card__icon svg {
  width: 22px;
  height: 22px;
}

.maintenance-card__step {
  font-size: .8rem;
  font-weight: 800;
  color: var(--accent);
  background: rgba(217, 45, 32, .08);
  padding: .25rem .6rem;
  border-radius: var(--radius-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.maintenance-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .6rem;
  color: var(--ink);
}

.maintenance-card p {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.maintenance-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .85rem 0 .95rem;
}

.maintenance-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: .3rem .65rem;
  border-radius: var(--radius-sm);
}

.maintenance-tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.maintenance-card__note {
  font-size: .86rem !important;
  color: var(--ink) !important;
  font-weight: 600;
  padding-top: .75rem;
  margin-top: auto;
  border-top: 1px dashed var(--line);
}

.maintenance-card__caption {
  display: inline-block;
  background: rgba(217, 45, 32, .08);
  border-left: 3px solid var(--accent);
  padding: .5rem .85rem;
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: .9rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Section 13: Why Road Signage Is Important */
.safety-eco-split {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
}

#safety-importance .section-head {
  max-width: 100%;
  margin-bottom: 1.25rem;
}

.safety-insight-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: rgba(22, 24, 26, .03);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 1.5rem;
}

.safety-insight-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.safety-insight-icon svg {
  width: 20px;
  height: 20px;
}

.safety-insight-text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.safety-insight-text strong {
  font-size: .94rem;
  color: var(--ink);
}

.safety-insight-text span {
  font-size: .86rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.safety-eco-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

.safety-eco-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(217, 45, 32, .25);
}

.safety-eco-head {
  margin-bottom: 1.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.safety-eco-head .badge-accent {
  display: inline-block;
  background: rgba(217, 45, 32, .1);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: var(--radius-sm);
  margin-bottom: .6rem;
}

.safety-eco-head h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}

.safety-infra-list {
  display: grid;
  gap: .65rem;
}

.safety-infra-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

.safety-infra-item:hover {
  background: var(--white);
  border-color: var(--accent);
  transform: translateX(4px);
}

.safety-infra-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(217, 45, 32, .08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

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

.safety-infra-name {
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 900px) {
  .safety-eco-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.about__header {
  margin-bottom: 2rem;
}

.about-team-prompt {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.about-team-prompt__text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.about-team-prompt__text::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  background: var(--accent);
  flex: none;
}
.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--product { background: var(--white); }
.media-frame--product img { aspect-ratio: 16 / 10; object-fit: contain; padding: clamp(1rem, 2.5vw, 2rem); }
.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); }

/* Supplied product photography is cut out on white, so it must be contained
   rather than cropped — a cover crop slices the top and bottom off the sign
   faces. Declared after the base rules so it wins on equal specificity. */
.product-card__media picture { display: block; }
.product-card__media--product { background: var(--white); border-bottom: 1px solid var(--line); }
.product-card__media--product img { object-fit: contain; padding: 1.1rem; }
.product-card:hover .product-card__media--product img { transform: scale(1.04); }
.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,
.product-card__body h4 { 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; }

/* Grouped product listing (mandatory / cautionary / informatory) */
.product-group + .product-group { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.product-group__head {
  max-width: 720px;
  margin-bottom: clamp(1rem, 1.8vw, 1.35rem);
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--line);
}
.product-group__head .eyebrow { margin-bottom: .4rem; }
.product-group__head .lead { margin-top: .6rem; font-size: 1rem; }

/* 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(3, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
}

.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;
  display: flex;
  flex-direction: column;
  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;
  flex: none;
}

.feature__icon svg {
  width: 24px;
  height: 24px;
}

.feature h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--ink);
}

.feature p {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.feature--wide {
  grid-column: span 2;
}

.feature .maintenance-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}

.feature .maintenance-tag {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: .35rem .7rem;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}

.feature .maintenance-tag:hover {
  background: var(--white);
  border-color: var(--accent);
}

@media (max-width: 960px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
  }
}

@media (max-width: 680px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .feature--wide {
    grid-column: auto;
  }
}

.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; }

/* Section 15: CTA: Talk to Indian Rubber Industry */
.cta-banner {
  position: relative;
  background: radial-gradient(circle at 18% 25%, rgba(217, 45, 32, .18), transparent 55%),
              linear-gradient(135deg, var(--ink) 0%, var(--ink-700) 100%);
  color: var(--text-invert);
  padding: clamp(3.25rem, 6vw, 4.75rem) 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cta-banner__inner {
  width: 100%;
  max-width: 100%;
}

.cta-banner .eyebrow {
  color: var(--accent-light);
}

.cta-banner h2 {
  color: var(--white);
  width: 100%;
  max-width: 100%;
  text-wrap: normal;
}

.cta-banner .lead {
  color: #d1d5db;
  font-size: 1.05rem;
  line-height: 1.65;
  width: 100%;
  max-width: 100%;
}

.cta-banner .btn-row {
  margin-top: 1.75rem;
}

/* Section 16: Frequently Asked Questions (24 FAQs) */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  width: 100%;
  max-width: 100%;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}

.faq-item:hover {
  border-color: rgba(217, 45, 32, .3);
}

.faq-item[open] {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary:hover {
  color: var(--accent);
  background: rgba(217, 45, 32, .02);
}

.faq-num {
  font-size: .82rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .08em;
  min-width: 26px;
  flex: none;
}

.faq-title {
  flex: 1;
  line-height: 1.4;
}

.faq-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: rgba(217, 45, 32, .08);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}

.faq-icon svg {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--ease);
}

.faq-item[open] .faq-icon {
  background: var(--accent);
  color: var(--white);
}

.faq-item[open] .faq-icon svg {
  transform: rotate(180deg);
}

.faq-content {
  padding: 0 1.4rem 1.35rem 3.4rem;
  font-size: .94rem;
  color: var(--text-muted);
  line-height: 1.7;
  border-top: 1px dashed rgba(22, 24, 26, .08);
  margin-top: .15rem;
  padding-top: 1rem;
}

.faq-content p {
  margin: 0;
}

.faq-content p + p {
  margin-top: .6rem;
}

.faq-mid-cta {
  position: relative;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-700) 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: .75rem 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow);
}

.faq-mid-cta__glow {
  position: absolute;
  right: -50px;
  top: -50px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(217, 45, 32, .35) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.faq-mid-cta__content {
  position: relative;
  z-index: 1;
}

.faq-mid-cta h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  margin: .4rem 0 .6rem;
}

.faq-mid-cta p {
  font-size: .92rem;
  color: #cfd8dc;
  line-height: 1.65;
  max-width: 800px;
}

.faq-mid-cta__sub {
  font-weight: 600;
  color: var(--white) !important;
  margin-top: .75rem !important;
}

.faq-mid-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.btn--white {
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--white);
  font-weight: 700;
}

.btn--white:hover {
  background: #f0f4f8;
  border-color: #f0f4f8;
  color: var(--accent-dark);
}

.faq-contact-highlight {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  background: rgba(217, 45, 32, .06);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
}

.faq-contact-highlight a {
  color: var(--accent);
  text-decoration: none;
}

.faq-contact-highlight a:hover {
  text-decoration: underline;
}

.faq-sep {
  color: var(--line);
}

@media (max-width: 640px) {
  .faq-content {
    padding-left: 1.4rem;
  }
}

/* Section 17: Final CTA Band */
.cta-band {
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(3.25rem, 6vw, 4.75rem);
  border-top: 1px solid rgba(255, 255, 255, .08);
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 320px at 85% 10%, rgba(217, 45, 32, .20), transparent 60%);
  pointer-events: none;
}

.cta-band__content {
  width: 100%;
  max-width: 100%;
  position: relative;
}

.cta-band h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.25;
  width: 100%;
  max-width: 100%;
  text-wrap: normal;
}

.cta-band .lead {
  font-size: 1.02rem;
  color: #cfd8dc;
  line-height: 1.65;
  width: 100%;
  max-width: 100%;
}

.cta-band .btn-row {
  margin-top: 1.75rem;
}

/* 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: 1.6rem 0 .7rem; }
.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); }
/* Phone and email in the contact block read as details, not body links —
   no underline, but kept bold so they are still obviously tappable. */
.prose a[href^="tel:"],
.prose a[href^="mailto:"] { text-decoration: none; font-weight: 700; }
.prose a[href^="tel:"]:hover,
.prose a[href^="mailto:"]:hover { text-decoration: none; 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);
  }
}

/* Mid widths: the headline spans further across the brighter part of the banner,
   so the scrim carries further right to keep it comfortably readable. */
@media (min-width: 769px) and (max-width: 1200px) {
  .hero::after {
    background:
      linear-gradient(96deg, rgba(22, 24, 26, .95) 0%, rgba(22, 24, 26, .92) 46%, rgba(22, 24, 26, .74) 72%, rgba(22, 24, 26, .50) 100%);
  }
}

@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) {
  .topbar { display: none; }
  .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; }
  .btn-row--inline { flex-direction: row; align-items: stretch; }
  .btn-row--inline .btn { width: auto; font-size: .82rem; padding-inline: .7rem; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__name { font-size: .92rem; }
  .logo__tag { font-size: .56rem; letter-spacing: .18em; }
}

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

/* Mobile S (320), Mobile M (375), and Mobile L (425): topbar is hidden, bottom action bar provides direct call/whatsapp */
@media (max-width: 425px) {
  .topbar { display: none !important; }
}

@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; }
}