/* ============================================================
   ESHWA ENGINEERING — "From the Drawing Board" theme
   Pure visual layer. Loads AFTER eshwa-style.css.
   No content, schema or URL changes. Do not edit nicepage.css.
   ============================================================ */

:root{
  --ink:#0c1d4d;          /* deep drawing-board navy */
  --ink2:#1a3a8f;         /* brand blue (kept) */
  --paper:#f7f9fd;        /* off-white sheet */
  --line:#d8dfef;         /* hairline */
  --steel:#5f6c8a;        /* muted steel text */
  --orange:#e8590c;       /* safety orange (text-safe) */
  --orange-bright:#ff7a26;/* safety orange (buttons) */
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --cond:'Barlow Condensed',sans-serif;
  --body-f:'Plus Jakarta Sans',sans-serif;
}

body{background:var(--paper)}

/* ---------- drafting grid utilities ---------- */
.stats-bar, .cta-banner{
  background-color:var(--ink)!important;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px)!important;
  background-size:28px 28px!important;
}

/* ---------- header ---------- */
.u-header{border-top:3px solid var(--orange-bright);border-bottom:1px solid var(--line)}

/* ---------- stats bar = drawing title block ---------- */
.stats-bar{border-bottom:2px solid var(--orange-bright)}
.stats-bar .stat-item{border-right:1px solid rgba(255,255,255,.18);padding:16px 10px 14px;max-width:220px}
.stats-bar .stat-num{font-size:2rem;letter-spacing:.5px}
.stats-bar .stat-num span{color:var(--orange-bright)}
.stats-bar .stat-label{font-family:var(--mono);font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:5px}

/* ---------- hero carousel ---------- */
.u-carousel{border-bottom:1px solid var(--line);position:relative}
.u-carousel .carousel-img{will-change:transform}
@keyframes ea-kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
.u-carousel-item.u-active .carousel-img{animation:ea-kenburns 9s ease-out forwards}
.u-carousel-indicators li{border-radius:0!important;width:22px!important;height:3px!important}
.u-carousel-indicators li.u-active{background:var(--orange-bright)!important}

/* ---------- intro ---------- */
.intro-section{padding-top:54px}
.intro-section::before{
  content:"DWG NO. ESH-2026 / CUSTOM MATERIAL HANDLING / CHENNAI, IN";
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:2px;
  color:var(--orange);margin-bottom:14px;
}
.intro-section h1{font-size:2.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink)}
.intro-section p{color:#3d4760}

/* ---------- drawing divider (SVG line art) ---------- */
.drawing-divider{max-width:760px;margin:34px auto 0;padding:0 24px}
.drawing-divider svg{width:100%;height:auto;display:block}
.drawing-divider .dd-line{stroke:#9db4e8;stroke-width:1.5;fill:none}
.drawing-divider .dd-thin{stroke:#9db4e8;stroke-width:1;fill:none}
.drawing-divider .dd-dim{stroke:var(--orange);stroke-width:1;fill:none}
.drawing-divider .dd-dot{fill:#9db4e8}
.drawing-divider .dd-txt{fill:var(--orange);font-family:var(--mono);font-size:9px;letter-spacing:1px}
.drawing-divider .dd-txt2{fill:#7e91bd;font-family:var(--mono);font-size:8px}
.ea-draw .dd-line,.ea-draw .dd-thin,.ea-draw .dd-dim{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 2.2s ease}
.ea-draw.ea-in .dd-line,.ea-draw.ea-in .dd-thin,.ea-draw.ea-in .dd-dim{stroke-dashoffset:0}

/* ---------- section headings ---------- */
.section-heading .tag{
  background:transparent!important;border-radius:0;
  font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:2.5px;
  color:var(--orange);padding:0;
}
.section-heading .tag::before{content:"[ "}
.section-heading .tag::after{content:" ]"}
.section-heading h2,
.why-section h2,.industries-section h2,.faq-section h2{
  text-transform:uppercase;letter-spacing:1px;color:var(--ink);
}

/* ---------- product cards = drawing sheets ---------- */
.u-section-2{background:var(--paper)!important}
.u-section-2 .u-repeater-1{counter-reset:ea-sheet}
.u-section-2 .u-repeater-item{
  counter-increment:ea-sheet;
  border-radius:4px!important;
  border:1px solid var(--line)!important;
  box-shadow:none;
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  position:relative;
  padding-top:30px;
}
.u-section-2 .u-repeater-item::before{
  content:"SHEET " counter(ea-sheet,decimal-leading-zero) " \2022 ESHWA ENGINEERING \2022 100% CUSTOM BUILT";
  position:absolute;top:0;left:0;right:0;height:30px;
  display:flex;align-items:center;padding:0 36px 0 14px;
  background:#eef3fd;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.58rem;letter-spacing:1.2px;color:var(--steel);
  white-space:nowrap;overflow:hidden;
}
.u-section-2 .u-repeater-item::after{
  content:"";position:absolute;top:8px;right:12px;width:14px;height:14px;
  border:1.5px solid var(--orange);border-radius:50%;opacity:.85;
  background:radial-gradient(circle,var(--orange) 0 2px,transparent 2.5px);
}
.u-section-2 .u-repeater-item:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(12,29,77,.16);
  border-color:var(--ink2)!important;
}
.u-section-2 .u-repeater-item .u-image{
  border-radius:3px!important;
  transition:transform .5s ease;
}
.u-section-2 .u-repeater-item:hover .u-image{transform:scale(1.04)}
.u-section-2 .u-repeater-item h2{
  font-family:var(--cond)!important;text-transform:uppercase;
  letter-spacing:.5px;color:var(--ink)!important;
}
.u-section-2 .u-repeater-item .u-btn{
  font-family:var(--mono)!important;
  font-size:.72rem!important;font-weight:500!important;
  letter-spacing:1.5px!important;text-transform:uppercase!important;
  color:var(--ink)!important;background:transparent!important;
  border:none!important;border-bottom:2px solid var(--orange)!important;
  border-radius:0!important;padding:6px 0!important;
  display:table!important;margin-left:auto!important;margin-right:auto!important;
  float:none!important;position:static!important;width:auto!important;
  transition:color .25s ease,border-color .25s ease;
}
.u-section-2 .u-repeater-item .u-btn:hover{color:var(--orange)!important}

/* ---------- why choose = stamped cards ---------- */
.why-section{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-card{
  border:1px solid var(--line);border-top:1px solid var(--line);border-radius:3px;
  position:relative;transition:transform .3s ease,box-shadow .3s ease;
}
.why-card::before,.why-card::after{
  content:"";position:absolute;width:12px;height:12px;border-color:var(--orange);border-style:solid;
}
.why-card::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.why-card::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.why-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(12,29,77,.1)}
.why-card h3{color:var(--ink)}

/* ---------- industries = spec tags ---------- */
.industry-pills span{
  background:#fff!important;border:1px solid #c2cde8!important;border-radius:2px!important;
  font-family:var(--mono)!important;font-weight:500!important;
  font-size:.72rem!important;letter-spacing:1px;text-transform:uppercase;
  color:var(--ink)!important;padding:7px 14px!important;
  transition:border-color .25s ease,color .25s ease;
}
.industry-pills span:hover{border-color:var(--orange)!important;color:var(--orange)!important}

/* ---------- CTA ---------- */
.cta-banner{border-top:2px solid var(--orange-bright)}
.cta-banner h2{text-transform:uppercase;letter-spacing:1px}
.cta-banner a{
  background:var(--orange-bright)!important;color:#1a1205!important;
  font-family:var(--cond)!important;font-weight:700!important;
  font-size:1.05rem!important;letter-spacing:1.5px;text-transform:uppercase;
  border-radius:3px!important;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.cta-banner a:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.35);background:#ff8c45!important}
.cta-banner a.secondary{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.55)!important}
.cta-banner a.secondary:hover{border-color:#fff!important;background:rgba(255,255,255,.08)!important}

/* ---------- FAQ ---------- */
.faq-section{background:var(--paper);counter-reset:ea-q}
.faq-item{border-radius:3px;border:1px solid var(--line)}
.faq-q{counter-increment:ea-q}
.faq-q::before{
  content:"Q" counter(ea-q,decimal-leading-zero);
  font-family:var(--mono);font-size:.7rem;color:var(--orange);
  margin-right:12px;letter-spacing:1px;flex-shrink:0;
}
.faq-item.open{border-color:var(--ink2)}

/* ---------- footer ---------- */
footer.u-footer{border-top:3px solid var(--orange-bright)}

/* ---------- whatsapp pulse ---------- */
.whatsapp-float{position:relative}
@keyframes ea-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.whatsapp-float{animation:ea-pulse 4s ease-out infinite}

/* ---------- scroll reveal (classes added by JS only) ---------- */
.ea-rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.ea-rv.ea-in{opacity:1;transform:translateY(0)}
.ea-d1.ea-in{transition-delay:.08s}
.ea-d2.ea-in{transition-delay:.16s}
.ea-d3.ea-in{transition-delay:.24s}

/* ---------- mobile ---------- */
@media(max-width:767px){
  .intro-section h1{font-size:2rem}
  .intro-section::before{font-size:.58rem;letter-spacing:1px}
  .u-section-2 .u-repeater-item::before{font-size:.5rem;padding:0 10px}
  .stats-bar .stat-num{font-size:1.7rem}
}

/* ---------- accessibility: reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .ea-rv{opacity:1!important;transform:none!important;transition:none!important}
  .u-carousel-item.u-active .carousel-img{animation:none!important}
  .whatsapp-float{animation:none!important}
  .ea-draw .dd-line,.ea-draw .dd-thin,.ea-draw .dd-dim{stroke-dashoffset:0!important;transition:none!important}
  .u-section-2 .u-repeater-item,.why-card,.cta-banner a{transition:none!important}
}

/* ============================================================
   THEME ROLLOUT — inner pages (page-hero, tables, old pages)
   ============================================================ */

/* ---------- page hero = drawing title panel ---------- */
.page-hero{
  background-color:var(--ink)!important;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px)!important;
  background-size:28px 28px!important;
  border-bottom:2px solid var(--orange-bright);
}
.page-hero h1{font-family:var(--cond)!important;text-transform:uppercase;letter-spacing:1px}
.page-hero .breadcrumb{font-family:var(--mono);font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase}
.page-hero .breadcrumb a{color:#ff9d5c!important}
.location-pills span{
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.3)!important;
  border-radius:2px!important;font-family:var(--mono)!important;font-size:.72rem!important;
  letter-spacing:1px;text-transform:uppercase;
}

/* ---------- spec / selection tables = drawing tables ---------- */
.spec-table{border:1px solid var(--line);border-radius:4px;overflow:hidden}
.spec-table th,table.spec-table th{background:var(--ink)!important;color:#fff!important;font-family:var(--mono)!important;font-size:.72rem!important;letter-spacing:1px;text-transform:uppercase}
.spec-table td{font-size:.86rem}
.spec-table tr:nth-child(even) td{background:#f3f6fd}

/* ---------- generic content headings on inner pages ---------- */
main h2{font-family:var(--cond);text-transform:uppercase;letter-spacing:.5px}

/* ---------- legacy pages (roller/overhead/screw/specialty) ---------- */
.product-section h1,.product-section h2,.product-section h3,
.cta-section h2{font-family:var(--cond)!important;color:var(--ink)!important;text-transform:uppercase;letter-spacing:.5px}
.product-section,.cta-section{font-family:var(--body-f)!important}
.cta-section{
  background-color:var(--ink)!important;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px)!important;
  background-size:28px 28px!important;
  border-top:2px solid var(--orange-bright);
}
.cta-section h2{color:#fff!important}
.cta-section a{background:var(--orange-bright)!important;color:#1a1205!important;font-family:var(--cond)!important;font-weight:700!important;letter-spacing:1.5px;text-transform:uppercase;border-radius:3px!important}

/* ---------- export page cards ---------- */
.exp-card{border-top:3px solid var(--orange)!important;border-radius:3px!important}
.exp-step::before{color:var(--orange)!important}