/* ============================================================
   Unique Udyog — Premium homepage hero + overlay header
   Original design; references the look/feel of a high-end
   industrial manufacturer. Pairs with js/hero.js.
   Palette: deep navy / steel blue / charcoal / white + subtle copper.
   ============================================================ */

/* Metrics-matched fallback for the headings: Arial scaled to Roboto's
   advance widths (measured ratio 0.905). Before the Roboto web font loads,
   the heading lays out at its FINAL width — so the font swap (FOUT) causes
   no horizontal reflow and the nowrap title can't overflow under the hero
   showcase. The visible typeface (Roboto) is unchanged once loaded. */
@font-face{
  font-family:"Roboto-fallback";
  src:local("Arial"),local("Liberation Sans");   /* Liberation Sans = Arial-metric clone on Linux */
  size-adjust:90.5%;
}

.uhero-scope{
  --u-navy:#091825;
  --u-navy-2:#0d2233;
  --u-steel:#2d4a63;
  --u-char:#11171e;
  --u-copper:#c08a44;          /* subtle warm gold / copper accent */
  --u-copper-soft:#d6a86a;
  --u-ink:#eaf0f6;
  --u-mute:#9fb1c2;
  --u-ff-head:'Roboto',"Roboto-fallback","Segoe UI",Arial,sans-serif;
  --u-ff-body:'Open Sans',"Segoe UI",Arial,sans-serif;
  --u-ff-cond:'Roboto Condensed',"Arial Narrow",Arial,sans-serif;
}

/* ============================================================
   OVERLAY HEADER (transparent over hero → solid navy on scroll)
   ============================================================ */
.uhead{
  position:fixed;
  top:0;left:0;right:0;
  z-index:200;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease, backdrop-filter .35s ease;
  padding:22px 0;
}
.uhead__inner{
  max-width:1340px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
  gap:22px;
}
.uhead.is-solid,
.uhead--inner{                          /* inner pages: solid from the start */
  background:rgba(9,24,37,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.35);
  padding:12px 0;
}

.uhead__brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.uhead__brand img{height:48px;width:auto;aspect-ratio:1224/240;display:block;transition:height .35s ease;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}   /* reserve logo width before the PNG decodes → nav doesn't jump */
.uhead.is-solid .uhead__brand img,
.uhead--inner .uhead__brand img{height:40px}

/* Any page with the fixed solid header: offset content below it.
   (Kept separate from the dark .inner theme so light pages can use it too.) */
.uhead-fixed{padding-top:64px}

.uhead__nav{flex:1 1 auto;display:flex;justify-content:center}
.uhead__links{display:flex;align-items:center;gap:1px;list-style:none;margin:0;padding:0}
.uhead__links>li{position:relative}
.uhead__links>li>a{
  display:block;
  white-space:nowrap;
  font-family:var(--u-ff-cond);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:700;
  font-size:.82rem;
  color:rgba(255,255,255,.86);
  padding:12px 12px;
  transition:color .2s ease;
}
.uhead__links>li>a:hover,
.uhead__links>li.is-active>a{color:#fff}
.uhead__links>li>a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;
  background:var(--u-copper);transform:scaleX(0);transform-origin:left;
  transition:transform .28s ease;border-radius:2px;
}
.uhead__links>li>a:hover::after,
.uhead__links>li.is-active>a::after{transform:scaleX(1)}
.uhead__links>li.has-dropdown>a::after{display:none}        /* keep underline off dropdown parent */
.uhead__links>li.has-dropdown>a{padding-right:26px}
.uhead__links>li.has-dropdown>a::before{
  content:"\25BE";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:.55rem;color:rgba(255,255,255,.6);
}
/* dropdown */
.uhead__links .dropdown{
  position:absolute;top:100%;left:0;min-width:256px;
  background:rgba(9,24,37,.97);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:2px solid var(--u-copper);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  padding:8px 0;border-radius:0 0 6px 6px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.uhead__links .dropdown a{
  display:block;padding:11px 20px;color:rgba(255,255,255,.8);
  font-family:var(--u-ff-body);font-size:.9rem;letter-spacing:.2px;
  transition:background .18s ease,color .18s ease;
}
.uhead__links .dropdown a:hover{background:rgba(192,138,68,.16);color:#fff}
.uhead__links>li.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.uhead__cta{flex:0 0 auto;display:flex;align-items:center;gap:18px}
.uhead__phone{
  display:none;                          /* shown only on very wide screens (room for 7 nav items) */
  font-family:var(--u-ff-cond);font-weight:700;letter-spacing:.6px;
  color:#fff;font-size:.95rem;white-space:nowrap;
}
.uhead__phone:hover{color:var(--u-copper-soft)}
@media (min-width:1480px){.uhead__phone{display:inline-block}}

/* hamburger (reuse menu.js hooks) */
.uhead .nav-toggle{
  display:none;width:44px;height:40px;background:transparent;border:0;cursor:pointer;
  padding:9px 8px;
}
.uhead .nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;margin:4px 0;
  transition:transform .3s ease,opacity .3s ease}
.uhead .nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.uhead .nav-toggle.is-open span:nth-child(2){opacity:0}
.uhead .nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   BUTTONS
   ============================================================ */
.ubtn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:1.5px;
  font-weight:700;font-size:.92rem;line-height:1;
  padding:16px 30px;border-radius:4px;cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s ease,
             border-color .25s ease,color .25s ease,box-shadow .25s ease;
  text-decoration:none;
}
.ubtn svg{width:1.05em;height:1.05em;transition:transform .25s ease}
.ubtn--primary{
  background:linear-gradient(180deg,var(--u-copper-soft),var(--u-copper));
  color:#10212e;box-shadow:0 10px 26px rgba(192,138,68,.28);
}
.ubtn--primary:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(192,138,68,.4);color:#0c1a25}
.ubtn--primary:hover svg{transform:translateX(4px)}
.ubtn--ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.5)}
.ubtn--ghost:hover{transform:translateY(-3px);border-color:#fff;background:rgba(255,255,255,.12)}
/* header quote button */
.ubtn--quote{
  padding:11px 22px;font-size:.82rem;letter-spacing:1.2px;
  background:transparent;color:var(--u-copper-soft);border-color:var(--u-copper);
}
.ubtn--quote:hover{background:var(--u-copper);color:#10212e;transform:translateY(-1px)}

/* ============================================================
   HERO
   ============================================================ */
.uhero{
  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--u-navy);
  isolation:isolate;
}
/* full-bleed blurred chain-link photograph */
.uhero__bg{
  position:absolute;inset:-8% -4%;            /* overscan for parallax + blur edges */
  z-index:0;
  background:url("../images/chain-link-110.jpg") center/cover no-repeat;
  filter:blur(7px) saturate(80%) brightness(.5);   /* heavier blur hides the source watermark */
  transform:scale(1.12);
  will-change:transform;
}
/* navy scrim: directional darken for text + vignette + steel tint */
.uhero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(7,20,32,.95) 0%, rgba(8,22,35,.86) 40%, rgba(9,26,40,.64) 72%, rgba(11,30,46,.56) 100%),
    radial-gradient(120% 120% at 18% 30%, rgba(192,138,68,.10) 0%, rgba(192,138,68,0) 42%),
    radial-gradient(140% 130% at 50% 120%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
}
.uhero__inner{
  position:relative;z-index:2;
  width:100%;max-width:1280px;margin:0 auto;padding:120px 40px 90px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}

/* ---- content ---- */
.uhero__content,.uhero__showcase{min-width:0}   /* allow grid tracks to shrink below content */
.uhero__title,.uhero__sub,.uhero__desc{overflow-wrap:break-word}
.uhero__content{max-width:640px}
.uhero__eyebrow{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:14px;max-width:100%;
  font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:3.2px;
  font-weight:700;font-size:.84rem;color:var(--u-copper-soft);margin-bottom:26px;
}
.uhero__eyebrow::before{content:"";width:42px;height:2px;background:var(--u-copper);display:inline-block}
.uhero__title{
  font-family:var(--u-ff-head);font-weight:900;color:#fff;
  font-size:clamp(3.1rem,6.2vw,5.6rem);line-height:.98;letter-spacing:-1.5px;
  margin:0 0 18px;text-shadow:0 2px 30px rgba(0,0,0,.35);
  white-space:nowrap;   /* keep "UNIQUE UDYOG" on a single line */
}
.uhero__sub{
  font-family:var(--u-ff-head);font-weight:400;color:#dfe8f1;
  font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.3;margin:0 0 22px;
  max-width:30ch;
}
.uhero__sub b{font-weight:700;color:#fff}
.uhero__desc{
  font-family:var(--u-ff-body);color:var(--u-mute);
  font-size:1.05rem;line-height:1.75;max-width:50ch;margin:0 0 38px;
}
.uhero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:40px}
.uhero__meta{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.12);
}
.uhero__meta span{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--u-ff-cond);text-transform:uppercase;letter-spacing:1.4px;
  font-size:.78rem;color:#c2d0dd;font-weight:700;
}
.uhero__meta span::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--u-copper);box-shadow:0 0 0 3px rgba(192,138,68,.18);
}

/* ---- product showcase (lit composition) ---- */
.uhero__showcase{
  position:relative;
  height:560px;
  align-self:center;
}
/* soft unifying light pool so the cluster feels lit, not pasted on */
.ushow__glow{
  position:absolute;z-index:0;
  left:0;right:-4%;top:2%;bottom:2%;
  background:
    radial-gradient(64% 60% at 52% 46%, rgba(120,150,180,.30) 0%, rgba(120,150,180,.12) 48%, rgba(120,150,180,0) 74%);
  filter:blur(10px);
}
/* products as soft-edged, lit tiles (white product bg sits on the near-white tile) */
.ushow__item{
  position:absolute;margin:0;
  border-radius:16px;overflow:hidden;
  background:radial-gradient(125% 120% at 50% 30%, #ffffff 0%, #eef2f7 68%, #e1e8f0 100%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 34px 60px -22px rgba(0,0,0,.62),
    0 14px 30px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(192,138,68,.12);   /* faint copper hairline */
  will-change:transform;
}
.ushow__item img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;  /* square sources: reserve height before load → no image-pop shift */
  filter:brightness(1.03) contrast(1.02) saturate(1.04);
}
.ushow__shadow{display:none}                 /* depth comes from tile box-shadow */

/* arrangement: spool dominant (centre), electrodes upper-left, fencing lower-right */
.ushow__item--spool{z-index:4;width:57%;left:22%;top:22%}
.ushow__item--elec {z-index:3;width:39%;left:2%; top:7%}
.ushow__item--fence{z-index:5;width:33%;left:60%;top:53%}

/* scroll cue */
.uhero__scroll{
  position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid rgba(255,255,255,.4);border-radius:14px;
  display:block;
}
.uhero__scroll span{
  position:absolute;left:50%;top:8px;width:3px;height:8px;border-radius:2px;
  background:rgba(255,255,255,.8);transform:translateX(-50%);
  animation:uheroScroll 1.7s ease-in-out infinite;
}
@keyframes uheroScroll{0%,100%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,11px)}}

/* ============================================================
   ENTRANCE ANIMATION (JS adds .is-in; reduced-motion shows instantly)
   ============================================================ */
/* Hidden state is gated behind .js (set synchronously in <head>), so with JS
   disabled all content is visible by default — never a blank hero. */
.js [data-reveal]{opacity:0;transform:translateY(26px)}
.js .uhero.is-ready [data-reveal]{opacity:1;transform:none;
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1)}
.js .uhero.is-ready [data-reveal]:nth-child(1){transition-delay:.05s}
.js .uhero.is-ready [data-reveal]:nth-child(2){transition-delay:.15s}
.js .uhero.is-ready [data-reveal]:nth-child(3){transition-delay:.25s}
.js .uhero.is-ready [data-reveal]:nth-child(4){transition-delay:.35s}
.js .uhero.is-ready [data-reveal]:nth-child(5){transition-delay:.45s}
.js .uhead [data-reveal-nav]{opacity:0;transform:translateY(-14px)}
.js .uhead.is-ready [data-reveal-nav]{opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s ease}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .uhero__inner{gap:30px}
  .uhead__links>li>a{padding:12px 11px;font-size:.8rem}
  .uhead__inner{gap:20px;padding:0 26px}
}
@media (max-width:880px){
  /* collapse nav into a slide-down panel (menu.js toggles .is-open) */
  .uhead__nav{position:static;flex:0 0 auto;margin-left:auto}
  .uhead .nav-toggle{display:block}
  .uhead__cta{display:none}                 /* hero CTA covers this on mobile */
  .uhead__brand img{height:38px}
  .uhead.is-solid .uhead__brand img{height:34px}
  .uhead__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(9,24,37,.98);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:8px 0;box-shadow:0 18px 40px rgba(0,0,0,.5);
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .35s ease,opacity .3s ease,visibility .3s;
  }
  .uhead__links.is-open{max-height:80vh;opacity:1;visibility:visible}
  .uhead__links>li>a{padding:14px 26px;font-size:.95rem}
  .uhead__links>li>a::after{display:none}
  .uhead__links .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border-top:0;background:rgba(255,255,255,.04);
    max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0;
  }
  .uhead__links>li.has-dropdown.open .dropdown{max-height:300px;padding:6px 0}
  .uhead__links>li.has-dropdown>a::before{content:"\25BE"}
}
@media (max-width:860px){
  .uhero__inner{grid-template-columns:1fr;padding:130px 26px 80px;gap:8px}
  .uhero__showcase{height:360px;order:2;margin-top:10px}
  .uhero__content{order:1;max-width:none}
  .ushow__glow{left:0;right:0}
  .ushow__item--spool{width:50%;left:25%}
  .ushow__item--elec{width:38%;left:4%}
  .ushow__item--fence{width:34%;left:58%}
}
@media (max-width:560px){
  .uhead__inner{padding:0 18px}
  .uhero__inner{padding:116px 20px 70px}
  .uhero__eyebrow{letter-spacing:2px;font-size:.72rem;margin-bottom:20px}
  .uhero__title{font-size:clamp(2.6rem,12vw,3.4rem)}
  .uhero__sub{font-size:1.2rem}
  .uhero__desc{font-size:1rem}
  .uhero__actions{flex-direction:column;align-items:stretch}
  .uhero__actions .ubtn{width:100%}
  .uhero__showcase{height:300px}
  .uhero__meta{gap:9px 16px}
  .uhero__meta span{font-size:.72rem;letter-spacing:1px}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal-nav]{opacity:1!important;transform:none!important;transition:none!important}
  .uhero__scroll span{animation:none}
  .uhero__bg{transform:none}
  .ushow__item{will-change:auto}
}