/* =====================================================================
   ZAR Industrial Corporate Design System
   Standardized card families + reusable animation system
   ===================================================================== */

/* ---------- 1. Animation system ---------- */

/* SECTION REVEAL — opacity 0->1, translateY 18px->0, once on viewport */
.zar-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.zar-reveal.on{opacity:1;transform:none}

/* CARD STAGGER — applied to children of a .zar-stagger-grid */
.zar-stagger-grid .zar-card{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.zar-stagger-grid.on .zar-card{opacity:1;transform:none}
.zar-stagger-grid.on .zar-card:nth-child(1){transition-delay:.05s}
.zar-stagger-grid.on .zar-card:nth-child(2){transition-delay:.12s}
.zar-stagger-grid.on .zar-card:nth-child(3){transition-delay:.19s}
.zar-stagger-grid.on .zar-card:nth-child(4){transition-delay:.26s}
.zar-stagger-grid.on .zar-card:nth-child(5){transition-delay:.33s}
.zar-stagger-grid.on .zar-card:nth-child(6){transition-delay:.40s}

/* IMAGE REVEAL — subtle scale-in for photography */
.zar-image-reveal{opacity:0;transform:scale(1.02);transition:opacity .7s ease,transform .9s ease}
.zar-image-reveal.on{opacity:1;transform:none}
.zar-image-reveal img{display:block;width:100%;height:100%;object-fit:cover}

/* METRIC COUNTER — static state; value animated via JS once */
.zar-count{font-variant-numeric:tabular-nums}

/* SIGNAL MOTION — low-frequency subtle pulse for intelligence indicators only */
.zar-signal{position:relative}
.zar-signal::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:1px solid currentColor;opacity:0;animation:zarSignal 3s ease-out infinite;pointer-events:none}
@keyframes zarSignal{0%{opacity:.35;transform:scale(1)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0;transform:scale(1.12)}}

/* PROCESS FLOW connector line (SVG-driven; see JS) */
.zar-flow{position:relative}
.zar-flow .zar-flow-line{position:absolute;top:50%;left:12%;right:12%;height:2px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1s ease}
.zar-flow.on .zar-flow-line{transform:scaleX(1)}
.zar-flow .zar-flow-arrow{position:absolute;top:50%;width:14px;height:14px;border-top:2px solid var(--brand);border-right:2px solid var(--brand);transform:translateY(-50%) rotate(45deg);opacity:0;transition:opacity .3s ease .5s}

/* ===================================================================== */

/* ---------- 2. Standardized card families ---------- */

/* Shared card base */
.zar-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.zar-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.10);border-color:var(--brand)}
.zar-card img{width:100%;height:auto;display:block;object-fit:cover}
.zar-card .zar-card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.zar-card .zar-card-cat{font-size:.62rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2)}
.zar-card h3{font-size:1.15rem;line-height:1.25;margin:0;color:var(--text)}
.zar-card p{font-size:.88rem;color:var(--muted);margin:0}
.zar-card .zar-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.zar-card .zar-card-tags span{font-size:.66rem;font-weight:700;color:var(--muted);border:1px solid var(--line);padding:3px 8px;border-radius:999px}
.zar-card .zar-card-cta{font-size:.82rem;font-weight:800;color:var(--brand-2);margin-top:auto;padding-top:10px}
.zar-card .zar-card-cta::after{content:' →'}

/* CAPABILITY CARD — same as .zar-card base */
.capability-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.capability-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.10);border-color:var(--brand)}

/* PRODUCT CARD — adds product badge */
.product-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.product-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.10);border-color:var(--brand)}
.product-card .product-badge{font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#0b1a2a;background:var(--brand);padding:4px 10px;border-radius:999px;align-self:flex-start;margin:16px 0 0 16px}

/* PROJECT EVIDENCE CARD */
.project-evidence-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.project-evidence-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.10);border-color:var(--brand)}
.project-evidence-card .project-hero{position:relative}
.project-evidence-card .project-hero img{aspect-ratio:16/9;object-fit:cover}
.project-evidence-card .project-type{position:absolute;left:12px;top:12px;font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;background:rgba(6,16,8,.78);color:#fff;padding:4px 9px;border-radius:999px}

/* PROFILE CARD */
.profile-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.profile-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.10);border-color:var(--brand)}
.profile-card .profile-photo img{aspect-ratio:4/3;object-fit:cover;object-position:center top}
.profile-card .profile-body{padding:18px;display:flex;flex-direction:column;gap:6px}

/* METRIC CARD — only verified numbers */
.metric-card{text-align:center;padding:24px;gap:6px}
.metric-card .metric-value{font-size:2.4rem;font-weight:950;color:var(--brand-2);line-height:1}
.metric-card .metric-unit{font-size:.72rem;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.metric-card .metric-label{font-size:.9rem;color:var(--text);font-weight:700}
.metric-card .metric-note{font-size:.74rem;color:var(--muted)}

/* PROCESS CARD */
.process-card{align-items:center;text-align:center;gap:8px;padding:22px 16px}
.process-card .process-step{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#0b1a2a;font-weight:900;display:grid;place-items:center;font-size:.9rem}
.process-card h3{font-size:1rem;margin:0}
.process-card p{font-size:.8rem}

/* UTILITY CARD — calculators / tools */
.utility-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.utility-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.10);border-color:var(--brand)}
.utility-card .utility-icon{font-size:2rem;padding:18px 18px 0}

/* EVENT / GALLERY CARD — one project = one card */
.event-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.event-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.10);border-color:var(--brand)}
.event-card .event-body{padding:16px;display:flex;flex-direction:column;gap:8px}
.event-card .event-thumb{position:relative}
.event-card .event-thumb img{aspect-ratio:16/9}
.event-card .event-count{position:absolute;right:10px;bottom:10px;background:rgba(6,16,8,.75);color:#fff;font-size:.7rem;font-weight:800;padding:4px 9px;border-radius:999px}

/* RSS / ARTICLE CARD */
.article-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.article-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.10);border-color:var(--brand)}
.article-card>a{display:block;text-decoration:none;color:inherit;height:100%}
.article-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.article-thumb{width:100%;overflow:hidden;background:var(--surface)}
.article-content{padding:18px;display:flex;flex-direction:column;gap:8px}
.article-category{font-size:.62rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2)}
.article-card h3{font-size:1.02rem;line-height:1.3;margin:0;color:var(--text)}
.article-meta{font-size:.72rem;color:var(--muted);font-weight:700}
.article-content p{font-size:.82rem;color:var(--muted);margin:0;flex:1}
.article-read{font-size:.8rem;font-weight:800;color:var(--brand-2);margin-top:4px}
.article-read::after{content:' →'}

/* CTA BAND */
.cta-band{padding:48px 0;background:var(--brand);color:#0b1a2a}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band h2{margin:0;font-size:clamp(1.6rem,3vw,2.4rem)}
.cta-band .btn{background:#0b1a2a;color:#fff;border-color:#0b1a2a}

/* ===================================================================== */

/* ---------- 3. Grids ---------- */
.zar-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.zar-card-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.zar-card-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.zar-card-grid.cols-4{grid-template-columns:repeat(4,1fr)}

/* Process flow layout */
.zar-flow-row{display:grid;grid-template-columns:repeat(var(--flow-steps,4),1fr);gap:14px;align-items:stretch}
.zar-flow-row .zar-flow-step{position:relative}

/* ===================================================================== */

/* ---------- 4. Responsive ---------- */
@media(max-width:1080px){
  .zar-card-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .zar-card-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .zar-flow-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .zar-card-grid.cols-4,.zar-card-grid.cols-3,.zar-card-grid.cols-2,.zar-card-grid{grid-template-columns:1fr}
  .zar-flow-row{grid-template-columns:1fr}
}

/* ===================================================================== */

/* ---------- 5. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
  .zar-reveal,.zar-stagger-grid .zar-card,.zar-image-reveal{opacity:1;transform:none}
  .zar-signal::after,.zar-flow .zar-flow-line{animation:none;transition:none;transform:none;opacity:1}
}

/* ---------- 6. Gallery lightbox ---------- */
.gallery-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(4,10,6,.92);display:none;align-items:center;justify-content:center;padding:24px}
.gallery-lightbox.open{display:flex}
.gallery-lightbox-inner{width:min(1100px,100%);max-height:92vh;overflow:auto;background:var(--surface);border-radius:18px;padding:22px}
.gallery-lightbox-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.gallery-lightbox-head h2{margin:0;font-size:1.3rem}
.gallery-lightbox-count{font-size:.72rem;color:var(--muted);font-weight:800}
.gallery-lightbox-close{position:absolute;top:20px;right:20px;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff66;background:transparent;color:#fff;font-size:1.6rem;cursor:pointer;line-height:1}
.gallery-lightbox-close:hover{background:#ffffff22}
.gallery-lightbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.gallery-lightbox-grid .gallery-item{margin:0;overflow:hidden;border-radius:10px}
.gallery-lightbox-grid .gallery-item img{width:100%;height:160px;object-fit:cover;display:block}
body.lightbox-open{overflow:hidden}

/* ---------- 7. Track record search + responsive table ---------- */
.track-search{width:100%;max-width:420px;margin-bottom:16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);padding:11px 16px;outline:none}
.track-search:focus{border-color:var(--brand)}
.track-table{overflow-x:auto}
.track-table table{min-width:760px}
@media(max-width:700px){.track-table table{min-width:640px}}

/* ---------- 8. Form submission status + honeypot ---------- */
.form-status{font-size:.85rem;font-weight:700;margin-top:10px}
.form-status--ok{color:var(--brand-2)}
.form-status--err{color:#c0392b}
.form-hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden;opacity:0}

/* ---------- 9. Smart Enquiry / Intent Router ---------- */
.intent-section{background:var(--bg-soft)}
.intent-widget{max-width:880px;margin:0 auto}
.intent-box{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:26px;box-shadow:var(--shadow)}
.intent-box>label{display:block;font-size:.78rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-2);margin-bottom:10px}
.intent-input-row{display:flex;gap:10px;flex-wrap:wrap}
.intent-input-row input{flex:1;min-width:240px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);color:var(--text);padding:14px 16px;outline:none;font-size:1rem}
.intent-input-row input:focus{border-color:var(--brand)}
.intent-result{margin-top:16px}
.intent-loading,.intent-error,.intent-unrouted{font-size:.9rem;color:var(--muted)}
.intent-error,.intent-unrouted{color:#c0392b}
.intent-card{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--surface)}
.intent-division{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.intent-division span{font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.intent-division b{color:var(--brand-2);font-size:1.05rem}
.intent-service{font-weight:800;margin-bottom:12px}
.intent-row{margin:10px 0;font-size:.88rem}
.intent-row>span{display:block;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.intent-tools{display:flex;flex-wrap:wrap;gap:6px}
.intent-chip{font-size:.74rem;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:var(--surface);color:var(--brand-2)}
.intent-list{margin:4px 0 0;padding-left:18px;color:var(--muted)}
.intent-cta{margin-top:14px}
@media (max-width:700px){.intent-box{padding:18px}.intent-input-row input{min-width:100%}}

/* ---------- 10. Contact Smart Enquiry prefill ---------- */
.contact-form-wrap{display:flex;flex-direction:column;gap:14px}
.contact-intent{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--bg-soft)}
.contact-intent-hint{font-size:.86rem;color:var(--muted);margin:6px 0 12px}
.contact-intent input{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);padding:12px 14px;outline:none;margin-bottom:10px}
.contact-intent input:focus{border-color:var(--brand)}
.contact-intent .btn{width:100%}
@media (max-width:700px){.contact-form{grid-column:1}}

/* ---------- 11. AI Project Finder ---------- */
.project-finder{border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--surface);box-shadow:var(--shadow)}
.project-finder input{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);color:var(--text);padding:14px 16px;outline:none;font-size:1rem}
.project-finder input:focus{border-color:var(--brand)}
.pf-results{margin-top:14px}
.pf-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px;font-size:.74rem;color:var(--muted)}
.pf-cat{font-weight:900;color:var(--brand-2);letter-spacing:.05em;text-transform:uppercase}
.pf-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;background:var(--bg-soft)}
.pf-title{font-weight:800;margin-bottom:4px}
.pf-meta{font-size:.74rem;color:var(--brand-2);font-weight:700;margin-bottom:4px}
.pf-card p{font-size:.86rem;color:var(--muted);margin:0 0 6px}
.pf-result{font-size:.84rem;color:var(--text)}
.pf-none{color:var(--muted);font-size:.9rem}

/* ---------- 12. Tank Cleaning Method Selector ---------- */
.method-selector{border:1px solid var(--line);border-radius:20px;padding:22px;background:var(--surface);box-shadow:var(--shadow)}
.method-field{display:inline-flex;flex-direction:column;gap:6px;margin:0 10px 12px 0;min-width:200px}
.method-field label{font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.method-field select{border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);color:var(--text);padding:10px 12px;outline:none}
.method-result{margin-top:14px}
.method-hint{color:var(--muted);font-size:.9rem}
.method-card{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--bg-soft)}
.method-model{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.method-model span{font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.method-model b{color:var(--brand-2);font-size:1.4rem}
.method-card p{font-size:.88rem;color:var(--muted);margin:4px 0}
.method-rate{color:var(--brand-2);font-weight:700}
.method-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.method-actions .btn{min-height:38px;font-size:.82rem}
.method-note{font-size:.76rem;color:var(--muted);margin-top:10px}
@media (max-width:700px){.method-field{min-width:100%;margin-right:0}}