/* ==========================================================================
   A.S. TRADERS — CRGO & CRNGO Laminations, Nashik
   Custom stylesheet. No framework. Mobile-first.

   THEME: "Core & Coil"
   Every transformer is two materials — silicon steel and copper winding.
   So the palette is graphite and steel grey for the core, warm amber for
   the coil. Amber is also the colour of the coating on grain-oriented
   electrical steel and the standard signal colour of the electrical
   trade, which keeps it honest rather than decorative.

   SIGNATURE: the lamination stack. A transformer core is a stack of thin
   plates, so that stack recurs as the logo mark, the eyebrow rules, the
   list bullets and the image placeholders.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Core — graphite through steel */
  --graphite:    #14191F;
  --graphite-90: #1A2128;
  --slate:       #1E262E;
  --slate-70:    #2B353F;
  --steel-blue:  #3A4A5A;
  --silicon:     #C7D0D8;
  --silicon-200: #DDE3E8;
  --silicon-100: #EDF0F3;

  /* Coil — amber */
  --amber:       #E2A32D;   /* fills, and text on dark backgrounds */
  --amber-deep:  #C4861A;   /* hover */
  --amber-text:  #8A5D0A;   /* small text on light backgrounds (passes AA) */
  --amber-soft:  #FDF4E3;

  /* Surface & ink */
  --paper:       #F4F6F7;
  --white:       #FFFFFF;
  --ink:         #12171C;
  --ink-muted:   #55636F;

  /* Status */
  --ok:          #1B6E4A;
  --ok-soft:     #E9F4EE;
  --err:         #B3261E;
  --err-soft:    #FBEDEC;

  /* Type */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Space */
  --wrap: 1200px;
  --gut: 20px;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 88px;

  /* Depth */
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(20,25,31,.06), 0 2px 6px rgba(20,25,31,.05);
  --shadow-md: 0 2px 6px rgba(20,25,31,.07), 0 14px 30px rgba(20,25,31,.09);
  --shadow-lg: 0 4px 12px rgba(20,25,31,.1), 0 28px 56px rgba(20,25,31,.14);
  --ease: cubic-bezier(.2,.6,.3,1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  line-height: 1.13;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--graphite);
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 5.4vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
h3 { font-size: clamp(1.08rem, 2.1vw, 1.3rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--graphite); text-decoration-color: rgba(20,25,31,.3); text-underline-offset: 3px; }
a:hover { color: var(--amber-text); text-decoration-color: currentColor; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15em; }
li { margin-bottom: var(--s-2); }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--silicon); margin: var(--s-7) 0; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--amber); color: var(--graphite); padding: 12px 20px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. SIGNATURE ELEMENTS
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber-text);
  margin: 0 0 var(--s-3);
}
.eyebrow::before {
  content: ""; width: 26px; height: 7px; flex: none;
  background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 3px);
}
.eyebrow--light { color: var(--amber); }

.lam-rule {
  height: 9px; border: 0; margin: 0;
  background: repeating-linear-gradient(to bottom, var(--silicon) 0 1px, transparent 1px 3px);
}

.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--alt   { background: var(--white); }
.section--steel { background: var(--silicon-100); }
.section--dark  { background: var(--graphite); color: #C3CDD6; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: #fff; }

.section__head { max-width: 62ch; margin-bottom: var(--s-6); }
.section__head p { color: var(--ink-muted); font-size: 1.03rem; }
.section--dark .section__head p { color: #A5B2BD; }

.lede { font-size: 1.08rem; color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Amber carries dark text — 8:1 contrast, and it reads like a machine control */
.btn--accent { background: var(--amber); color: var(--graphite); border-color: var(--amber); }
.btn--accent:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: var(--graphite); box-shadow: var(--shadow-md); }

.btn--navy { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.btn--navy:hover { background: var(--slate); border-color: var(--slate); color: #fff; box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; color: var(--graphite); border-color: var(--silicon); }
.btn--outline:hover { background: var(--white); border-color: var(--graphite); color: var(--graphite); box-shadow: var(--shadow-sm); }

.btn--ghost { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

.btn--sm { padding: 10px 18px; font-size: .87rem; }
.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   5. TOPBAR + HEADER + NAV
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--graphite);
  color: #9AA7B2;
  font-size: .82rem;
  border-bottom: 1px solid rgba(226,163,45,.22);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 40px; }
.topbar__note {
  margin: 0; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: #8593A0;
}
.topbar__links { display: none; list-style: none; margin: 0; padding: 0; gap: var(--s-5); }
.topbar__links li { margin: 0; }
.topbar__links a { color: #C3CDD6; text-decoration: none; }
.topbar__links a:hover { color: var(--amber); }
.ico { color: var(--amber); }

.site-header {
  /* Must sit above .nav-scrim (65) and .nav (70), otherwise the scrim covers
     the hamburger and the close button stops responding while the drawer
     is open. */
  position: sticky; top: 0; z-index: 80;
  /* NOTE: do not add backdrop-filter here. Any filter, transform or
     backdrop-filter on this element makes it the containing block for
     position:fixed descendants — which would trap the mobile nav drawer
     inside the header box instead of letting it fill the viewport. */
  background: var(--white);
  border-bottom: 1px solid var(--silicon-200);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 80px; }

/* --- Logo --- */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo__img {
  height: 52px; width: auto; max-width: 100%;
  /* the artwork carries its own margin, so no extra padding here */
}
.logo--footer { display: inline-flex; margin-bottom: var(--s-4); }
.logo--footer .logo__img { height: 68px; }

/* --- Hamburger --- */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 44px; padding: 0 10px;
  /* The drawer is a sibling inside this same header, so the button needs a
     higher z-index than .nav (70) or the open drawer swallows the tap and
     the close button appears dead. */
  position: relative; z-index: 75;
  background: var(--white); border: 1.5px solid var(--silicon);
  border-radius: var(--radius); cursor: pointer;
}
.nav-toggle__bar { display: block; height: 2px; background: var(--graphite); border-radius: 2px; transition: transform .22s var(--ease), opacity .16s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile drawer --- */
.nav {
  position: fixed; inset: 0 0 0 auto;
  width: min(340px, 86vw);
  background: var(--graphite);
  padding: 132px var(--gut) var(--s-6);
  /* The closed drawer is wiped away with clip-path rather than pushed
     off-screen with a transform. A fixed element parked outside the
     viewport still counts toward scrollWidth in Chrome, which is what
     produces the classic "page scrolls sideways on mobile" bug. Clipping
     gives the same wipe-in motion with zero overflow. */
  clip-path: inset(0 0 0 100%);
  visibility: hidden;
  transition: clip-path .3s var(--ease), visibility .3s var(--ease);
  z-index: 70; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-5);
}
.nav.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.nav__list a { display: block; padding: 15px 2px; color: #D2DAE1; text-decoration: none; font-size: 1.02rem; font-weight: 500; }
.nav__list a:hover { color: var(--amber); }
.nav__list a[aria-current="page"] { color: #fff; font-weight: 600; }
.nav__list a[aria-current="page"]::before {
  content: ""; display: inline-block; width: 12px; height: 2px;
  background: var(--amber); vertical-align: middle; margin-right: 9px;
}
.nav__cta { display: flex; flex-direction: column; gap: var(--s-3); }

.nav-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(20,25,31,.6); opacity: 0; transition: opacity .25s var(--ease); }
.nav-scrim.is-visible { opacity: 1; }
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb { background: var(--white); border-bottom: 1px solid var(--silicon-200); }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 12px 0; font-size: .84rem; color: var(--ink-muted);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--silicon); }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--amber-text); }
.breadcrumb [aria-current="page"] { color: var(--graphite); font-weight: 600; }

/* ==========================================================================
   7. HERO SLIDER
   ========================================================================== */
.hero-slider {
  position: relative;
  background: var(--graphite);
  overflow: hidden;
  isolation: isolate;
}

.slider__viewport { position: relative; }

.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
  display: flex; align-items: center;
}
/* The first slide holds the layout open; the rest stack on top of it */
.slide:first-child { position: relative; }
.slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* Photograph sits behind, dimmed and scrimmed so the type always reads */
.slide__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.slide__bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 9s linear;
}
.slide.is-active .slide__bg img { transform: scale(1.13); }
.slide__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(20,25,31,.96) 0%, rgba(20,25,31,.9) 42%, rgba(20,25,31,.6) 74%, rgba(20,25,31,.45) 100%),
    repeating-linear-gradient(to bottom, rgba(199,208,216,.05) 0 1px, transparent 1px 7px);
}

.slide__inner { position: relative; z-index: 1; padding-block: var(--s-8); width: 100%; }
.slide__copy { max-width: 40ch; }

.slide__title {
  margin: 0 0 var(--s-4);
  color: #fff;
  font-size: clamp(1.9rem, 4.6vw, 2.85rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
  text-wrap: balance;
}
.slide__text { color: #BCC7D1; font-size: 1.05rem; max-width: 52ch; }
.slide__inner .btn-row { margin-top: var(--s-5); }

/* --- Controls --- */
.slider__controls {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: var(--s-4);
  padding-bottom: var(--s-6);
}
.slider__arrows { display: flex; gap: 8px; }
.slider__arrow {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(199,208,216,.32);
  border-radius: var(--radius);
  color: #fff; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.slider__arrow:hover { background: var(--amber); border-color: var(--amber); color: var(--graphite); }
.slider__arrow svg { width: 18px; height: 18px; }

.slider__dots { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.slider__dots li { margin: 0; }
.slider__dot {
  width: 34px; height: 4px; padding: 0;
  background: rgba(199,208,216,.3);
  border: 0; border-radius: 2px; cursor: pointer;
  transition: background-color .2s var(--ease), width .25s var(--ease);
}
.slider__dot:hover { background: rgba(199,208,216,.6); }
.slider__dot[aria-current="true"] { background: var(--amber); width: 52px; }

.slider__count {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .12em; color: #8593A0; margin-left: auto;
}
@media (min-width: 700px) {
  /* clear the floating WhatsApp button, which is fixed bottom-right */
  .slider__count { padding-right: 168px; }
}
.slider__count b { color: var(--amber); font-weight: 500; }

/* Autoplay progress hairline */
.slider__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(199,208,216,.16); z-index: 6; }
.slider__bar { height: 100%; width: 0; background: var(--amber); }

/* --- Facts strip under the slider --- */
.hero-facts { background: var(--slate); border-top: 1px solid rgba(226,163,45,.28); }
.hero-facts dl {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; margin: 0; background: rgba(199,208,216,.14);
}
.hero-fact { background: var(--slate); padding: var(--s-4); }
.hero-fact dt {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: #8593A0; margin-bottom: 5px;
}
.hero-fact dd { margin: 0; font-size: .95rem; font-weight: 600; color: #fff; }

/* --------------------------------------------------------------------------
   8. MEDIA / IMAGE PLACEHOLDER
   -------------------------------------------------------------------------- */
.media { position: relative; overflow: hidden; background: var(--silicon-200); border-radius: var(--radius); }
.media img { width: 100%; height: 100%; object-fit: cover; }

.media--placeholder {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: var(--s-5); min-height: 210px;
  background: linear-gradient(150deg, var(--slate-70) 0%, var(--graphite) 62%);
  border-radius: var(--radius); overflow: hidden; text-align: center;
}
.media__stack {
  display: block; width: 74px; height: 46px;
  background: repeating-linear-gradient(to bottom, rgba(199,208,216,.85) 0 3px, rgba(199,208,216,.12) 3px 6px);
  border-left: 2px solid var(--amber);
  transform: skewX(-11deg);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.media__label {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: #94A3AF; max-width: 26ch; line-height: 1.5;
}

.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-16-9 { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   9. CARDS + GRIDS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

.card {
  background: var(--white);
  border: 1px solid var(--silicon-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
/* Amber edge sweeps in on hover — the card "energises" */
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease); z-index: 3;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--silicon); }
.card:hover::after { transform: scaleX(1); }

.card__media { position: relative; overflow: hidden; }
.card__media .media, .card__media .media--placeholder { aspect-ratio: 4 / 3; min-height: 0; border-radius: 0; }
.card__media img { aspect-ratio: 4 / 3; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }

.card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: 10px; }
.card__body p { color: var(--ink-muted); font-size: .95rem; }
.card__foot { margin-top: auto; padding-top: var(--s-4); }

.card__list { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.card__list li { position: relative; padding-left: 20px; margin-bottom: 7px; font-size: .92rem; color: var(--ink-muted); }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 5px;
  background: repeating-linear-gradient(to bottom, var(--amber) 0 1px, transparent 1px 3px);
}

.card__meta {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--amber-text); margin-bottom: 10px; display: block;
}

.feature {
  background: var(--white);
  border: 1px solid var(--silicon-200);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feature p { margin: 0; font-size: .93rem; color: var(--ink-muted); }

.feature--dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); border-left-color: var(--amber); box-shadow: none; }
.feature--dark p { color: #A5B2BD; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--white); border: 1px solid var(--silicon);
  border-radius: 999px; padding: 9px 18px;
  font-size: .9rem; font-weight: 500; color: var(--graphite);
}
.chip::before {
  content: ""; width: 12px; height: 6px; flex: none;
  background: repeating-linear-gradient(to bottom, var(--amber) 0 1px, transparent 1px 3px);
}
.section--dark .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #DDE3E8; }

.split { display: grid; gap: var(--s-6); align-items: center; }
/* Grid items default to min-width:auto, so a child with an aspect-ratio and a
   min-height can force the track wider than the viewport. min-width:0 lets the
   track shrink normally. */
.split > *, .grid > * { min-width: 0; }
.split__media .media--placeholder:not([class*="ratio-"]) { min-height: 280px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: step; }
.steps li {
  position: relative; background: var(--white);
  border: 1px solid var(--silicon-200); border-radius: var(--radius);
  padding: var(--s-5) var(--s-5) var(--s-5) 64px; margin: 0; box-shadow: var(--shadow-sm);
}
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: var(--s-5); top: var(--s-5);
  font-family: var(--font-mono); font-size: .9rem; font-weight: 500; color: var(--amber-text);
}
.steps h3 { font-size: 1rem; margin-bottom: 6px; }
.steps p { margin: 0; font-size: .93rem; color: var(--ink-muted); }

.spec { border-top: 1px solid var(--silicon); margin: 0; }
.spec > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: var(--s-4) 0; border-bottom: 1px solid var(--silicon-200); }
.spec dt { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.spec dd { margin: 0; font-weight: 500; color: var(--graphite); }
.spec dd a { text-decoration: none; }

/* --------------------------------------------------------------------------
   10. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { background: var(--graphite); color: #C3CDD6; position: relative; overflow: hidden; padding-block: var(--s-8); }
.cta-band::after {
  content: ""; position: absolute; right: -60px; top: -40px;
  width: 320px; height: 320px;
  background: repeating-linear-gradient(to bottom, rgba(226,163,45,.16) 0 2px, transparent 2px 9px);
  transform: rotate(-14deg); pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 74ch; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #A5B2BD; }

/* --------------------------------------------------------------------------
   11. FORM
   -------------------------------------------------------------------------- */
.form-panel { background: var(--white); border: 1px solid var(--silicon-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--s-5); }
.form-grid { display: grid; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .88rem; font-weight: 600; color: var(--graphite); }
.field .req { color: var(--amber-text); }
.field .hint { font-size: .8rem; color: var(--ink-muted); font-weight: 400; }

.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); padding: 12px 14px;
  border: 1.5px solid var(--silicon); border-radius: var(--radius); width: 100%;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel-blue); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(226,163,45,.25);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; }
.field--error input, .field--error textarea, .field--error select { border-color: var(--err); }
.field__error { font-size: .82rem; color: var(--err); font-weight: 500; }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); border: 1px solid transparent; font-size: .95rem; }
.alert h3 { margin: 0 0 6px; font-size: 1.02rem; }
.alert p:last-child { margin-bottom: 0; }
.alert--ok  { background: var(--ok-soft); border-color: #BFE0CF; color: #12452F; }
.alert--ok h3 { color: var(--ok); }
.alert--err { background: var(--err-soft); border-color: #EEC5C2; color: #7A1C16; }
.alert--err h3 { color: var(--err); }
.alert ul { margin: 8px 0 0; }

/* --------------------------------------------------------------------------
   12. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--s-6); align-items: start; }
.contact-card { background: var(--white); border: 1px solid var(--silicon-200); border-radius: var(--radius-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); }
.contact-card address { font-style: normal; line-height: 1.7; }

.map-frame { border: 1px solid var(--silicon); border-radius: var(--radius-lg); overflow: hidden; background: var(--silicon-200); box-shadow: var(--shadow-sm); }
.map-frame iframe { display: block; width: 100%; height: 380px; border: 0; }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--slate); color: #AEB9C3;
  padding-top: var(--s-8); font-size: .93rem;
  border-top: 4px solid var(--amber);
}
.footer-grid { display: grid; gap: var(--s-6); }
.footer-col--brand { max-width: 42ch; }
.footer-about { color: #9BA7B2; margin-bottom: var(--s-4); }
.footer-head {
  font-size: .78rem; font-family: var(--font-mono); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
  margin-bottom: var(--s-4); padding-bottom: 10px;
  border-bottom: 1px solid rgba(199,208,216,.18);
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 9px; }
.footer-list a { color: #B4BEC7; text-decoration: none; }
.footer-list a:hover { color: var(--amber); text-decoration: underline; }
.footer-nap { font-style: normal; color: #9BA7B2; line-height: 1.7; margin-bottom: var(--s-4); }
.footer-nap strong { color: #fff; }
.footer-list--contact a { color: #fff; font-weight: 500; }

.footer-bar {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: var(--s-7); padding: var(--s-4) 0;
  border-top: 1px solid rgba(199,208,216,.16);
  font-size: .84rem; color: #8894A0;
}
.footer-bar p { margin: 0; }
.footer-bar a { color: #B4BEC7; text-decoration: none; }
.footer-bar a:hover { color: var(--amber); }
.footer-bar__meta { display: flex; gap: 10px; align-items: center; }

/* --------------------------------------------------------------------------
   14. FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: 14px; bottom: 14px; z-index: 55;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  width: 54px; height: 54px; padding: 0;
  background: #128C7E; color: #fff; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(20,25,31,.36);
  text-decoration: none; overflow: hidden;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.wa-float:hover { background: #0E7166; color: #fff; transform: translateY(-2px); }
.wa-float__text { display: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }

/* Long unbroken strings must never widen the page on a phone */
.footer-list a, .footer-nap, .spec dd,
.contact-card address, .card__body p { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
  .footer-bar { flex-direction: row; justify-content: space-between; align-items: center; }
  .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .spec > div { grid-template-columns: 150px 1fr; gap: var(--s-4); align-items: baseline; }
  .hero-facts dl { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 700px) {
  :root { --gut: 28px; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .topbar__links { display: flex; }
  .logo__img { height: 58px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); }
  .wa-float { width: auto; padding: 0 20px; height: 52px; }
  .wa-float__text { display: inline; }
  .slide__inner { padding-block: var(--s-9); }
}

@media (min-width: 960px) {
  :root { --gut: 32px; }
  .section { padding-block: var(--s-9); }
  .section--tight { padding-block: var(--s-8); }

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

  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split--reverse .split__media { order: 2; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1.15fr .85fr; gap: var(--s-7); }
  .form-panel { padding: var(--s-6); }
  .form-grid--2col { grid-template-columns: repeat(2, 1fr); }
  .form-grid--2col .field--full { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; }
  .site-header__inner { min-height: 88px; }
  .logo__img { height: 56px; }

  .slide { min-height: 580px; }
  .slide__inner { padding-block: 110px; }
  .slide__copy { max-width: 52ch; }
  .slide__bg::after {
    background:
      linear-gradient(100deg, rgba(20,25,31,.94) 0%, rgba(20,25,31,.8) 36%, rgba(20,25,31,.3) 66%, rgba(20,25,31,.08) 100%),
      repeating-linear-gradient(to bottom, rgba(199,208,216,.05) 0 1px, transparent 1px 7px);
  }

  /* Desktop nav — drawer styles unwound */
  .nav-toggle { display: none; }
  .nav {
    position: static; width: auto; background: transparent; padding: 0;
    transform: none; visibility: visible; clip-path: none;
    overflow: visible; z-index: auto;
    flex-direction: row; align-items: center; gap: var(--s-5);
  }
  .nav__list { display: flex; align-items: center; gap: 4px; }
  /* Header items must never break across two lines — they either fit on one
     row or the layout below reduces the logo until they do. */
  .nav__list a, .nav__cta .btn { white-space: nowrap; }
  .nav__list li { border: 0; }
  .nav__list a {
    padding: 10px 13px; color: var(--slate); font-size: .94rem;
    font-weight: 500; border-radius: var(--radius); position: relative;
  }
  .nav__list a:hover { color: var(--graphite); background: var(--silicon-100); }
  .nav__list a[aria-current="page"] { color: var(--graphite); }
  .nav__list a[aria-current="page"]::before {
    content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
    display: block; width: auto; height: 2px; margin: 0; background: var(--amber);
  }
  .nav__cta { flex-direction: row; align-items: center; gap: var(--s-3); }
  /* A larger logo plus 5 links plus 2 buttons does not fit one row at any
     desktop width. The phone number is already in the top bar, the hero and
     every CTA band, so the duplicate Call button is what gives way here.
     It stays in the mobile drawer, where tap-to-call actually matters. */
  .nav__cta .nav__call { display: none; }
  .nav__cta .btn--ghost { background: transparent; color: var(--graphite); border-color: var(--silicon); }
  .nav__cta .btn--ghost:hover { background: var(--silicon-100); color: var(--graphite); border-color: var(--graphite); }
  .nav-scrim { display: none; }
}

@media (min-width: 1100px) {
  .nav { gap: var(--s-6); }
  .logo__img { height: 70px; }
  .site-header__inner { min-height: 100px; }
}

/* --------------------------------------------------------------------------
   16. MOTION / PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .btn:hover, .card:hover, .feature:hover, .wa-float:hover { transform: none; }
  .slide__bg img, .slide.is-active .slide__bg img { transform: scale(1.02); }
  .card:hover .card__media img { transform: none; }
}

@media print {
  .topbar, .site-header, .wa-float, .nav-scrim, .cta-band, .btn,
  .slider__controls, .slider__progress { display: none !important; }
  body { background: #fff; color: #000; }
  .slide { position: relative; opacity: 1; visibility: visible; }
  .site-footer { background: #fff; color: #000; border-top: 1px solid #000; }
}