/* Shared "refined" components — linked on every page. Uses each page's :root tokens. */
.rf-sec{padding:84px 0;}
.rf-head{text-align:center;max-width:640px;margin:0 auto 44px;}
.rf-head h2{font-family:var(--serif);font-size:clamp(28px,3.2vw,40px);font-weight:700;line-height:1.16;margin:16px 0 12px;color:var(--text);}
.rf-head h2 em{font-style:normal;color:var(--teal);}
.rf-head p{font-size:16.5px;color:var(--text-muted);line-height:1.7;}
.rf-icon{width:56px;height:56px;border-radius:14px;background:var(--teal-light);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.rf-icon svg{width:28px;height:28px;stroke:var(--teal);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

.rf-apps{background:var(--teal-faint);border-top:1px solid var(--border);}
.rf-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.rf-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px 26px;transition:transform .15s,box-shadow .15s;}
.rf-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(13,30,44,.10);}
.rf-card h3{font-family:var(--serif);font-size:19px;font-weight:700;margin-bottom:8px;color:var(--text);}
.rf-card p{font-size:14.5px;color:var(--text-muted);line-height:1.6;}

.rf-why{background:var(--white);}
.rf-wcard{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 24px;display:flex;gap:16px;align-items:flex-start;}
.rf-wcard .rf-icon{flex-shrink:0;margin-bottom:0;width:48px;height:48px;border-radius:12px;}
.rf-wcard .rf-icon svg{width:24px;height:24px;}
.rf-wcard h3{font-size:16px;font-weight:600;margin-bottom:5px;color:var(--text);}
.rf-wcard p{font-size:13.5px;color:var(--text-muted);line-height:1.55;}

.rf-certs{background:var(--white);border-top:1px solid var(--border);}
.rf-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.rf-cert{text-align:center;border:1px solid var(--border);border-radius:var(--r-lg);padding:30px 20px;background:var(--white);position:relative;overflow:hidden;}
.rf-cert::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--teal);}
.rf-seal{width:50px;height:50px;margin:0 auto 14px;border-radius:50%;background:var(--teal-light);display:flex;align-items:center;justify-content:center;}
.rf-seal svg{width:26px;height:26px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.rf-cert h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;}
.rf-cert p{font-size:12.5px;color:var(--text-muted);}

.rf-process{position:relative;overflow:hidden;background:var(--teal-dark);color:#fff;}
.rf-process::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(2,26,40,.50),rgba(2,26,40,.50)),url("photos/production-hall.jpg") center/cover no-repeat;opacity:.22;pointer-events:none;}
.rf-process > .container{position:relative;z-index:1;}
.rf-process .rf-head h2,.rf-process .rf-head p{text-shadow:0 2px 14px rgba(2,22,36,.55);}
.rf-process .rf-step{background:rgba(11,52,73,.48);border-color:rgba(255,255,255,.24);}
.rf-process .rf-step h3,.rf-process .rf-step p,.rf-process .rf-stepn{text-shadow:0 1px 6px rgba(2,22,36,.40);}
.rf-process .rf-head h2{color:#fff;}.rf-process .rf-head p{color:rgba(255,255,255,.8);}
.rf-process .tag{background:rgba(255,255,255,.15);color:#fff;}
.rf-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.rf-step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:26px 22px;}
.rf-stepn{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--teal-mid);letter-spacing:.1em;margin-bottom:14px;}
.rf-step .rf-icon{background:rgba(255,255,255,.12);}.rf-step .rf-icon svg{stroke:#fff;}
.rf-step h3{font-size:16.5px;font-weight:600;margin-bottom:7px;color:#fff;}
.rf-step p{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.55;}

/* Floating WhatsApp button (all pages) */
.rf-wa{position:fixed;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.4);z-index:90;}
.rf-wa svg{width:30px;height:30px;fill:#fff;}
.rf-wa:hover{background:#1faa52;}

@media(max-width:920px){.rf-grid3,.rf-grid4,.rf-steps{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.rf-grid3,.rf-grid4,.rf-steps{grid-template-columns:1fr;}.rf-sec{padding:60px 0;}.rf-wa{right:16px;bottom:16px;width:52px;height:52px;}.rf-wa svg{width:27px;height:27px;}}


/* ── Header logo + scroll shrink ── */
.nav-logo img { height: 46px; transition: height .28s ease; }
nav { transition: height .28s ease, box-shadow .28s ease; }
nav.scrolled { height: 60px; box-shadow: 0 3px 18px rgba(13,30,44,.10); }
nav.scrolled .nav-logo img { height: 38px; }

/* ── Splash (homepage, once per session) ── */
#splash { position: fixed; inset: 0; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity .5s ease; }
#splash img { width: min(300px, 62vw); height: auto; animation: ap-splash .85s cubic-bezier(.2,.7,.2,1) both; }
#splash.hide { opacity: 0; pointer-events: none; }
@keyframes ap-splash { 0% { opacity: 0; transform: scale(.9); } 55% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #splash img { animation: none; } }

/* Fail-safe: never let the splash block the page if JS fails to load */
#splash { animation: ap-splash-failsafe .5s ease 3500ms forwards; }
@keyframes ap-splash-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }


/* ── Centered section headers (eyebrow badge + heading) ──────────────
   Loaded after each page's inline styles, so these win the cascade.    */

/* Standalone header blocks: center the whole eyebrow + heading + intro. */
.section-head, .form-head, .info-head, .map-head { text-align: center; }

/* Anchor-jump offset so a linked section heading isn't hidden under the sticky nav. */
section[id], [id].timeline, [id].team, [id].certs { scroll-margin-top: 88px; }

/* Products page has a sticky product sub-nav below the main nav — use a larger offset. */
#hdpe-pipes, #hdpe-coils, #upcoming { scroll-margin-top: 150px; }

/* Two-column editorial intros: center ONLY the eyebrow badge + heading.
   Body paragraphs, lists, pull-quotes and buttons stay left-aligned.    */
.promise-text       > .tag, .promise-text       > h2,
.story-text         > .tag, .story-text         > h2,
.story-values       > .tag,
.mfg-text           > .tag, .mfg-text           > h2,
.product-intro-text > .tag, .product-intro-text > h2,
.coils-text         > .tag, .coils-text         > h2,
.cert-intro-text    > .tag, .cert-intro-text    > h2 { text-align: center; }

/* The badge is an inline-block, so center it explicitly within the
   left-aligned column (text-align alone won't move it).                 */
.promise-text       > .tag,
.story-text         > .tag,
.story-values       > .tag,
.mfg-text           > .tag,
.product-intro-text > .tag,
.coils-text         > .tag,
.cert-intro-text    > .tag {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}


/* ── Hero entrance animation: staggered fade-and-rise on page load ──────
   Gated to no-preference so reduced-motion users see content immediately. */
@keyframes ap-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Home hero */
  .hero-content > *, .hero-stats .hero-stat { animation: ap-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero-content > *:nth-child(1) { animation-delay: .05s; }
  .hero-content > *:nth-child(2) { animation-delay: .13s; }
  .hero-content > *:nth-child(3) { animation-delay: .21s; }
  .hero-content > *:nth-child(4) { animation-delay: .29s; }
  .hero-stats .hero-stat:nth-child(1) { animation-delay: .40s; }
  .hero-stats .hero-stat:nth-child(2) { animation-delay: .48s; }
  .hero-stats .hero-stat:nth-child(3) { animation-delay: .56s; }
  .hero-stats .hero-stat:nth-child(4) { animation-delay: .64s; }

  /* Inner-page hero */
  .page-hero .tag, .page-hero [class*="crumb"],
  .page-hero h1, .page-hero p { animation: ap-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .page-hero .tag, .page-hero [class*="crumb"] { animation-delay: .05s; }
  .page-hero h1 { animation-delay: .15s; }
  .page-hero p  { animation-delay: .25s; }
}

/* ── Card hover micro-interactions: gentle lift + teal accent ───────────
   hover:hover only, so touch devices never get a stuck hover state.       */
@media (hover: hover) {
  .value-row, .cert-card, .dept-card, .client-card, .app-card,
  .quality-card, .response-card, .info-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .value-row:hover, .cert-card:hover, .dept-card:hover, .client-card:hover,
  .app-card:hover, .quality-card:hover, .response-card:hover, .info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(13, 30, 44, .10);
    border-color: var(--teal);
  }
  /* unify the teal accent on cards that already lift */
  .rf-card:hover, .project-card:hover { border-color: var(--teal); }
}


/* ── Full-bleed facility photo band ─────────────────────────────────── */
.facility-band { position: relative; display: block; line-height: 0; }
.facility-band > img { width: 100%; height: auto; display: block; }

/* ── Hero heading: gentle flowing gradient on the highlighted phrase ── */
.hero h1 em {
  font-style: normal;
  color: var(--teal); /* fallback */
  background-image: linear-gradient(100deg, var(--teal-dark) 0%, var(--teal) 30%, var(--teal-mid) 50%, var(--teal) 70%, var(--teal-dark) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroFlow 5.5s linear infinite;
}
@keyframes heroFlow { to { background-position: -220% center; } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 em { animation: none; background-image: none; -webkit-text-fill-color: var(--teal); }
}
.facility-band-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 0 24px;
  background: linear-gradient(to bottom, rgba(13,30,44,.58), rgba(13,30,44,.40));
}
.facility-band-overlay .tag { background: rgba(255,255,255,.18); color: #fff; }
.facility-band-overlay h2 {
  font-family: var(--serif); color: #fff; font-weight: 700;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.2; max-width: 760px; margin: 0;
}


/* ── Social icons — official brand colours ──────────────────────────── */
.social-row { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.social-row .social-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter .2s, transform .15s, box-shadow .2s;
}
.social-icon svg { width: 18px; height: 18px; display: block; fill: #fff; }
.social-icon:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* Instagram — signature gradient */
.social-icon--ig { background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%); }
/* LinkedIn — brand blue */
.social-icon--li { background: #0A66C2; }
.social-icon--fb { background: #1877F2; }

.quick-social { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }
.quick-social .social-label { color: rgba(255,255,255,.9); }


/* ── Find Us: two-location grid (plant + corporate office) ──────────── */
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.map-loc { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; }
.map-loc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.map-loc-head img { height: 28px; width: auto; display: block; }
.map-loc-type { font-size: 13px; font-weight: 700; color: var(--text); }
.map-grid .map-container { position: relative; }
.map-grid .map-container iframe { height: 300px; }
/* Company-logo marker badge floating above the centred red pin */
.map-pin-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -100%); margin-top: -30px;
  background: #fff; border-radius: 8px; padding: 5px 9px;
  box-shadow: 0 4px 14px rgba(13,30,44,.30);
  pointer-events: none; z-index: 2;
}
.map-pin-logo img { height: 17px; width: auto; display: block; }
.map-pin-logo::after {
  content: ''; position: absolute; left: 50%; bottom: -7px;
  transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 7px solid #fff;
}
.map-loc-addr { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-top: 14px; }
.map-loc-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--teal); }
.map-loc-link:hover { color: var(--teal-dark); }
@media (max-width: 800px) { .map-grid { grid-template-columns: 1fr; } }


/* ── Brand watermark: faint "splash Q", centred on every page ─────────── */
body::after {
  content: "";
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 360px; height: 320px;
  background: url("watermark.png") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) { body::after { width: 280px; height: 248px; opacity: .045; } }
@media (max-width: 560px) { body::after { width: 200px; height: 177px; opacity: .04; } }

/* Centre the paragraph block (not just its text) under centred headings */
.section-head p, .form-head p, .info-head p, .map-head p {
  margin-left: auto;
  margin-right: auto;
}

/* ── Tablet/iPad nav: switch to the hamburger menu up to 1024px ──────────
   (the full 8-link nav + CTA needs ~1000px, so it overflowed on tablets). */
@media (max-width: 1024px) {
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none; position: fixed;
    top: var(--nav-h, 68px); left: 0; right: 0;
    background: #fff; border-bottom: 2px solid var(--teal);
    flex-direction: column; gap: 0; padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-links li a { display: block; padding: 14px 24px; font-size: 15px; border-bottom: 1px solid var(--border); }
  .nav-links li:last-child a { border-bottom: none; }
}

/* ── Applications grid: centre the orphan last row (5 cards in 3 columns) ──
   Grid can't centre orphans, so use a centred flex layout. Top 3 stay
   full-width; the bottom 2 centre with equal gaps on both sides.          */
.rf-apps .rf-grid3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.rf-apps .rf-grid3 > * { flex: 0 0 calc(33.333% - 15px); }
@media (max-width: 920px) { .rf-apps .rf-grid3 > * { flex-basis: calc(50% - 11px); } }
@media (max-width: 600px) { .rf-apps .rf-grid3 > * { flex-basis: 100%; } }


/* ── Home hero: real product photo behind the stat cards ────────────────
   Turns the flat panel into a vivid focal point; stats float as glass
   cards over a darkened on-brand photo.                                   */
.hero-stats {
  position: relative;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: 18px;
  overflow: hidden;
  background: #0d1e2c url("photos/coil-machine-front.jpg") center / cover no-repeat;
  box-shadow: 0 26px 60px rgba(13,30,44,.28);
}
.hero-stats::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(13,30,44,.66) 0%, rgba(21,127,176,.52) 100%);
}
.hero-stats > * { position: relative; z-index: 1; }
.hero-stats .hero-stat {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 8px 22px rgba(13,30,44,.20);
}
/* Centre stat-card content on every page (was left-aligned with a left accent bar) */
.hero-stats .hero-stat {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero-stats .hero-stat::before { display: none; }