/*!
Theme Name: MA Industrial
Theme URI: https://ma-industrial.example
Author: MA
Description: قالب اختصاصی و سبک وردپرس برای نمایش محصولات صنعتی MA (جعبه‌های تقسیم آلومینیومی و سوکت‌های فرمان). بدون فروشگاه آنلاین — نمایشگاه محصولات.
Version: 1.0.0
Text Domain: ma-industrial
*/

/* ==========================================================================
   0. Fonts — Vazirmatn (self-hosted variable font, SIL OFL 1.1)
   ========================================================================== */
@font-face{
  font-family:"Vazirmatn Variable";
  src:url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
      url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */
:root{
  /* Brand colors — sampled directly from the MA logo file (navy blue + orange mountain mark) */
  --c-navy-900:#092039;
  --c-navy-800:#0d2e54;
  --c-navy-700:#114179;
  --c-navy-600:#1559a8;
  --c-navy-500:#3176c4;
  --c-navy-400:#699bd3;

  --c-orange-600:#d8730e;
  --c-orange-500:#f68c23;
  --c-orange-400:#f6a655;
  --c-orange-300:#f8c28c;
  --c-orange-100:#fbf0e4;

  --c-ink:#141b24;
  --c-slate-700:#38424d;
  --c-slate-600:#4c5866;
  --c-slate-400:#8996a3;
  --c-slate-300:#b7c0c9;
  --c-slate-200:#dde3e8;
  --c-slate-100:#eef1f4;
  --c-slate-50:#f7f9fa;
  --c-white:#ffffff;

  /* Semantic */
  --c-primary:var(--c-navy-700);
  --c-primary-dark:var(--c-navy-900);
  --c-primary-light:var(--c-navy-500);
  --c-accent:var(--c-orange-500);
  --c-accent-dark:var(--c-orange-600);
  --c-bg:var(--c-white);
  --c-bg-alt:var(--c-slate-50);
  --c-bg-dark:var(--c-navy-900);
  --c-text:var(--c-ink);
  --c-text-muted:var(--c-slate-600);
  --c-text-on-dark:rgba(255,255,255,.92);
  --c-text-on-dark-muted:rgba(255,255,255,.66);
  --c-border:var(--c-slate-200);

  /* Typography */
  --font-base:"Vazirmatn Variable","Vazirmatn","Segoe UI",Tahoma,sans-serif;
  --fs-xs:clamp(.75rem,.72rem + .12vw,.8125rem);
  --fs-sm:clamp(.8125rem,.78rem + .15vw,.875rem);
  --fs-base:clamp(.9375rem,.9rem + .18vw,1rem);
  --fs-md:clamp(1.0625rem,1rem + .28vw,1.1875rem);
  --fs-lg:clamp(1.1875rem,1.1rem + .38vw,1.375rem);
  --fs-xl:clamp(1.375rem,1.24rem + .6vw,1.75rem);
  --fs-2xl:clamp(1.75rem,1.5rem + 1vw,2.25rem);
  --fs-3xl:clamp(2.1rem,1.75rem + 1.5vw,2.9rem);
  --fs-4xl:clamp(2.5rem,2rem + 2.4vw,3.75rem);
  --lh-tight:1.2;
  --lh-snug:1.4;
  --lh-normal:1.7;

  /* Spacing scale (4px base) */
  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:.75rem;
  --sp-4:1rem;
  --sp-5:1.5rem;
  --sp-6:2rem;
  --sp-7:2.5rem;
  --sp-8:3rem;
  --sp-9:4rem;
  --sp-10:5rem;
  --sp-11:6.5rem;
  --sp-12:8rem;

  /* Layout */
  --container-w:1280px;
  --container-pad:1.25rem;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-full:999px;

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --dur-fast:180ms;
  --dur-base:320ms;
  --dur-slow:600ms;

  /* Elevation */
  --shadow-sm:0 1px 2px rgba(14,39,64,.06),0 1px 1px rgba(14,39,64,.04);
  --shadow-md:0 8px 24px -6px rgba(14,39,64,.14),0 2px 6px rgba(14,39,64,.06);
  --shadow-lg:0 24px 48px -12px rgba(14,39,64,.22),0 4px 12px rgba(14,39,64,.08);
}

@media (min-width:640px){
  :root{ --container-pad:2rem; }
}
@media (min-width:1024px){
  :root{ --container-pad:2.5rem; }
}

/* ==========================================================================
   2. Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  font-family:var(--font-base);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--c-text);
  background:var(--c-bg);
  min-height:100vh;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,picture,video,canvas,svg{ display:block; max-width:100%; height:auto; }
input,button,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
table{ border-collapse:collapse; width:100%; }
h1,h2,h3,h4,h5,h6{ line-height:var(--lh-tight); font-weight:700; }
p{ color:var(--c-text-muted); }
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; border-radius:4px; }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
.container--narrow{ max-width:840px; }
.container--wide{ max-width:1440px; }

.section{ padding-block:var(--sp-10); }
.section--tight{ padding-block:var(--sp-8); }
.section--alt{ background:var(--c-bg-alt); }
.section--dark{ background:var(--c-bg-dark); color:var(--c-text-on-dark); }

.section-head{
  max-width:680px;
  margin-bottom:var(--sp-8);
}
.section-head--center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--c-accent-dark);
  background:var(--c-orange-100);
  padding:.4em .9em;
  border-radius:var(--radius-full);
  margin-bottom:var(--sp-4);
}
.section--dark .eyebrow{
  background:rgba(242,148,31,.14);
  color:var(--c-orange-300);
}
.section-title{
  font-size:var(--fs-3xl);
  letter-spacing:-.01em;
  margin-bottom:var(--sp-3);
}
.section-desc{
  font-size:var(--fs-md);
  color:var(--c-text-muted);
}
.section--dark .section-desc{ color:var(--c-text-on-dark-muted); }

.grid{ display:grid; gap:var(--sp-6); }
.grid-2{ grid-template-columns:repeat(1,1fr); }
.grid-3{ grid-template-columns:repeat(1,1fr); }
.grid-4{ grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:768px){
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link{
  position:absolute;
  right:var(--sp-4);
  top:-100px;
  background:var(--c-primary);
  color:#fff;
  padding:.8em 1.4em;
  border-radius:var(--radius-sm);
  z-index:999;
  transition:top var(--dur-base) var(--ease);
}
.skip-link:focus{ top:var(--sp-4); }

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  font-size:var(--fs-base);
  font-weight:600;
  padding:.95em 1.9em;
  border-radius:var(--radius-full);
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
  white-space:nowrap;
  border:1.5px solid transparent;
}
.btn svg{ width:1.1em; height:1.1em; flex-shrink:0; }
.btn:active{ transform:translateY(1px); }

.btn--accent{
  background:var(--c-accent);
  color:#241300;
  box-shadow:0 10px 24px -8px rgba(242,148,31,.55);
}
.btn--accent:hover{ background:var(--c-accent-dark); box-shadow:0 14px 30px -8px rgba(242,148,31,.6); }

.btn--primary{
  background:var(--c-primary);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(14,39,64,.5);
}
.btn--primary:hover{ background:var(--c-primary-dark); }

.btn--outline{
  background:transparent;
  border-color:var(--c-border);
  color:var(--c-text);
}
.btn--outline:hover{ border-color:var(--c-primary); color:var(--c-primary); }

.btn--ghost-light{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.35);
  color:#fff;
  backdrop-filter:blur(6px);
}
.btn--ghost-light:hover{ background:rgba(255,255,255,.18); border-color:#fff; }

.btn--sm{ padding:.6em 1.3em; font-size:var(--fs-sm); }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-weight:600;
  color:var(--c-primary);
  transition:gap var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.link-arrow svg{ width:1.05em; height:1.05em; transition:transform var(--dur-fast) var(--ease); }
.link-arrow:hover{ gap:.65em; color:var(--c-accent-dark); }

/* ==========================================================================
   5. Header / Navigation
   ========================================================================== */
.top-bar{
  background:var(--c-navy-900);
  color:var(--c-text-on-dark-muted);
  font-size:var(--fs-xs);
}
.top-bar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding-block:.55em;
}
.top-bar a{ color:inherit; transition:color var(--dur-fast) var(--ease); }
.top-bar a:hover{ color:var(--c-orange-300); }
.top-bar__contacts{ display:flex; align-items:center; gap:var(--sp-5); }
.top-bar__contacts span, .top-bar__contacts a{ display:inline-flex; align-items:center; gap:.4em; }
.top-bar__contacts svg{ width:14px; height:14px; opacity:.85; }
.top-bar__right{ display:flex; align-items:center; gap:var(--sp-4); }
.top-bar__social{ display:flex; align-items:center; gap:var(--sp-3); }
.top-bar__social a{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.08);
}
.top-bar__social svg{ width:13px; height:13px; }
.lang-switch{ display:flex; align-items:center; gap:2px; border-inline-start:1px solid rgba(255,255,255,.15); padding-inline-start:var(--sp-4); }
.lang-switch button{
  font:inherit; font-size:11px; font-weight:700; letter-spacing:.03em;
  color:var(--c-text-on-dark-muted); background:transparent; border:0;
  padding:.3em .55em; border-radius:var(--radius-sm); cursor:pointer;
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lang-switch button:hover{ color:#fff; }
.lang-switch button.is-active{ color:#fff; background:rgba(255,255,255,.12); }
@media (max-width:767px){
  .top-bar__inner{ font-size:11px; }
  .top-bar__social{ display:none; }
}

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--c-border);
  transition:box-shadow var(--dur-base) var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-header::before{
    content:"";
    position:absolute; inset:0; z-index:-1;
    background:rgba(255,255,255,.82);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
  }
}
.site-header.is-scrolled{ box-shadow:var(--shadow-md); }
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-6);
  height:76px;
}
.site-logo{
  display:flex; align-items:center; gap:.85em; flex-shrink:0;
  padding-block:.25em;
  transition:opacity var(--dur-fast) var(--ease);
}
.site-logo:hover{ opacity:.85; }
.site-logo__mark{
  height:42px; width:auto;
  max-width:110px;
  flex-shrink:0;
  object-fit:contain;
}
.site-logo__text{
  display:flex; flex-direction:column;
  gap:.2em;
  line-height:1.15;
  padding-inline-start:.85em;
  border-inline-start:1.5px solid var(--c-border);
}
.site-logo__text strong{ font-size:var(--fs-lg); font-weight:800; color:var(--c-primary); letter-spacing:.02em; }
.site-logo__text small{ font-size:10.5px; color:var(--c-text-muted); font-weight:600; letter-spacing:.06em; }

.main-nav__list{ display:flex; align-items:center; gap:var(--sp-7); }
.main-nav__list a{
  position:relative;
  font-weight:600;
  font-size:var(--fs-base);
  color:var(--c-slate-700);
  padding-block:.4em;
  transition:color var(--dur-fast) var(--ease);
}
.main-nav__list a::after{
  content:"";
  position:absolute; right:0; bottom:-2px;
  width:0; height:2px;
  background:var(--c-accent);
  transition:width var(--dur-base) var(--ease);
  border-radius:2px;
}
.main-nav__list a:hover{ color:var(--c-primary); }
.main-nav__list a:hover::after,
.main-nav__list a.is-active::after{ width:100%; }
.main-nav__list a.is-active{ color:var(--c-primary); }

.site-header__actions{ display:flex; align-items:center; gap:var(--sp-5); }
.header-phone{ display:flex; align-items:center; gap:.5em; font-weight:700; color:var(--c-primary); }
.header-phone svg{ width:18px; height:18px; color:var(--c-accent); }

.mobile-tabbar{ display:none; }

@media (max-width:1023px){
  .site-header__inner{ height:68px; }
  .header-phone span{ display:none; }
  .main-nav{ display:none; }
  .header-cta{ display:none; }

  .mobile-tabbar{
    display:flex; position:fixed; z-index:150; inset:auto 0 0 0;
    background:rgba(255,255,255,.98);
    border-top:1px solid var(--c-border);
    box-shadow:0 -6px 20px rgba(15,23,42,.08);
    padding:.4em .25em calc(.4em + env(safe-area-inset-bottom));
  }
  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    .mobile-tabbar{ backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); }
  }
  .mobile-tabbar__item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:.2em;
    padding:.3em .2em; color:var(--c-text-muted); font-size:11px; font-weight:600;
    transition:color var(--dur-fast) var(--ease);
  }
  .mobile-tabbar__item svg{ width:22px; height:22px; }
  .mobile-tabbar__item.is-active{ color:var(--c-primary); }
  body{ padding-bottom:60px; }
}
@media (min-width:1024px){
  .main-nav__cta{ display:none; }
}

/* ==========================================================================
   6. Footer
   ========================================================================== */
.site-footer{ background:var(--c-navy-900); color:var(--c-text-on-dark-muted); }
.footer-top{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-8);
  padding-block:var(--sp-10) var(--sp-8);
}
@media (min-width:768px){
  .footer-top{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--sp-6); }
}
.footer-brand .site-logo{ margin-bottom:.1em; }
.footer-brand .site-logo__mark{ height:46px; width:auto; max-width:120px; }
.footer-brand .site-logo__text{ border-inline-start-color:rgba(255,255,255,.18); }
.footer-brand .site-logo__text strong{ color:#fff; }
.footer-brand .site-logo__text small{ color:var(--c-text-on-dark-muted); }
.footer-brand p{ margin-top:var(--sp-4); color:var(--c-text-on-dark-muted); max-width:34ch; }
.footer-social{ display:flex; gap:var(--sp-3); margin-top:var(--sp-5); }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08);
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.footer-social a:hover{ background:var(--c-accent); transform:translateY(-3px); }
.footer-social svg{ width:16px; height:16px; }

.footer-heading{ color:#fff; font-size:var(--fs-base); margin-bottom:var(--sp-5); }
.footer-links{ display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-links a{ transition:color var(--dur-fast) var(--ease); }
.footer-links a:hover{ color:var(--c-orange-300); }
.footer-contact-item{ display:flex; align-items:flex-start; gap:.7em; margin-bottom:var(--sp-4); }
.footer-contact-item svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--c-accent); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:var(--sp-5);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3);
  font-size:var(--fs-xs);
}
.footer-bottom a:hover{ color:#fff; }

/* ==========================================================================
   7. Hero Slider
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg,var(--c-navy-900) 0%,var(--c-navy-700) 55%,var(--c-navy-600) 100%);
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 15% 20%,rgba(242,148,31,.18),transparent 45%),
    radial-gradient(circle at 85% 80%,rgba(61,120,186,.35),transparent 50%);
  pointer-events:none;
}
.hero-slider{ position:relative; }
.hero-slide{
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:var(--sp-8);
  padding-block:var(--sp-11) var(--sp-9);
  opacity:0;
  position:absolute; inset:0;
  visibility:hidden;
  transition:opacity var(--dur-slow) var(--ease);
}
.hero-slide.is-active{ position:relative; opacity:1; visibility:visible; }
@media (min-width:900px){
  .hero-slide{ grid-template-columns:1.05fr .95fr; padding-block:var(--sp-12) var(--sp-10); min-height:560px; }
}
.hero-slide__content{ position:relative; z-index:2; }
.hero-slide__tag{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em;
  color:var(--c-orange-300);
  background:rgba(242,148,31,.12);
  border:1px solid rgba(242,148,31,.3);
  padding:.5em 1.1em; border-radius:var(--radius-full);
  margin-bottom:var(--sp-5);
}
.hero-slide__title{
  font-size:var(--fs-4xl);
  letter-spacing:-.02em;
  margin-bottom:var(--sp-5);
  max-width:14ch;
}
.hero-slide__title em{ font-style:normal; color:var(--c-orange-400); }
.hero-slide__desc{
  font-size:var(--fs-md);
  color:var(--c-text-on-dark-muted);
  max-width:46ch;
  margin-bottom:var(--sp-7);
}
.hero-slide__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.hero-slide__stats{
  display:flex; gap:var(--sp-8);
  margin-top:var(--sp-9);
  padding-top:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.14);
}
.hero-slide__stat strong{ display:block; font-size:var(--fs-xl); color:#fff; }
.hero-slide__stat span{ font-size:var(--fs-xs); color:var(--c-text-on-dark-muted); }

.hero-slide__media{ position:relative; z-index:1; }
.hero-slide__media-frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:5/4;
  box-shadow:var(--shadow-lg);
  background:#fff;
}
.hero-slide__media-frame img{ width:100%; height:100%; object-fit:contain; padding:var(--sp-7); }
.hero-slide__badge{
  position:absolute; bottom:var(--sp-5); inset-inline-start:var(--sp-5);
  background:rgba(14,39,64,.72);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-md);
  padding:var(--sp-4) var(--sp-5);
  display:flex; align-items:center; gap:var(--sp-3);
}
.hero-slide__badge svg{ width:26px; height:26px; color:var(--c-orange-400); flex-shrink:0; }
.hero-slide__badge strong{ display:block; font-size:var(--fs-sm); color:#fff; }
.hero-slide__badge span{ font-size:11px; color:var(--c-text-on-dark-muted); }

.hero-nav{
  display:flex; align-items:center; gap:var(--sp-5);
  padding-bottom:var(--sp-7);
  position:relative; z-index:2;
}
.hero-dots{ display:flex; gap:.5em; }
.hero-dots button{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.3);
  transition:background var(--dur-fast) var(--ease),width var(--dur-base) var(--ease);
}
.hero-dots button.is-active{ background:var(--c-accent); width:26px; border-radius:var(--radius-full); }
.hero-arrows{ display:flex; gap:var(--sp-3); margin-inline-start:auto; }
.hero-arrow{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.hero-arrow:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.hero-arrow svg{ width:16px; height:16px; }

/* ==========================================================================
   8. Cards — categories / products / features
   ========================================================================== */
.cat-card{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-start;
  min-height:320px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding:var(--sp-7);
  background:linear-gradient(150deg,var(--c-navy-700),var(--c-navy-900));
  color:#fff;
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);
}
.cat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.cat-card::before{
  content:"";
  position:absolute; inset:0;
  background-position:center; background-size:cover;
  opacity:.28; mix-blend-mode:luminosity;
  transition:transform var(--dur-slow) var(--ease),opacity var(--dur-base) var(--ease);
}
.cat-card:hover::before{ transform:scale(1.08); opacity:.36; }
.cat-card--alt::before{ background-image:linear-gradient(150deg,var(--c-orange-600),var(--c-navy-800)); }
.cat-card__icon{
  position:relative; z-index:1;
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-md);
  margin-bottom:var(--sp-6);
}
.cat-card__icon svg{ width:28px; height:28px; color:var(--c-orange-400); }
.cat-card__body{ position:relative; z-index:1; }
.cat-card__count{
  display:inline-block; font-size:var(--fs-xs); font-weight:600;
  color:var(--c-orange-300); margin-bottom:var(--sp-2);
}
.cat-card__title{ font-size:var(--fs-xl); margin-bottom:var(--sp-2); }
.cat-card__desc{ color:var(--c-text-on-dark-muted); font-size:var(--fs-sm); max-width:36ch; margin-bottom:var(--sp-5); }
.cat-card__link{ color:#fff; }

.product-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.product-card:not(.service-card){ cursor:pointer; }
.product-card__media{
  position:relative;
  aspect-ratio:4/3;
  background:#fff;
  border-bottom:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
}
.product-card__media img{ width:100%; height:100%; object-fit:contain; padding:var(--sp-5); }
.product-card__media svg{ width:35%; height:35%; color:var(--c-slate-300); }
.product-card__badge{
  position:absolute; top:var(--sp-3); inset-inline-start:var(--sp-3);
  background:var(--c-primary); color:#fff;
  font-size:10.5px; font-weight:700;
  padding:.4em .8em; border-radius:var(--radius-full);
}
.product-card__badge--outline{ background:#fff; color:var(--c-primary); border:1px solid var(--c-border); }
.product-card__body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); flex:1; }
.product-card__cat{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--c-accent-dark); }
.product-card__title{ font-size:var(--fs-md); line-height:var(--lh-snug); }
.product-card__desc{ font-size:var(--fs-sm); color:var(--c-text-muted); flex:1; }
.product-card__specs{ display:flex; flex-wrap:wrap; gap:.5em; margin-block:.2em; }
.product-card__specs li{
  font-size:11px; font-weight:600; color:var(--c-slate-700);
  background:var(--c-slate-100); border-radius:var(--radius-sm);
  padding:.35em .65em;
}
.product-card__footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:var(--sp-3); margin-top:auto;
  border-top:1px solid var(--c-border);
}

.feature-card{
  padding:var(--sp-6);
  border-radius:var(--radius-md);
  background:#fff;
  border:1px solid var(--c-border);
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.feature-card__icon{
  width:52px; height:52px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--c-orange-100); margin-bottom:var(--sp-5);
}
.feature-card__icon svg{ width:26px; height:26px; color:var(--c-accent-dark); }
.feature-card__title{ font-size:var(--fs-md); margin-bottom:var(--sp-2); }
.feature-card__desc{ font-size:var(--fs-sm); }

.cert-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-3); padding:var(--sp-6) var(--sp-4);
  border-radius:var(--radius-md);
  border:1px solid var(--c-border);
  transition:border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.cert-card:hover{ border-color:var(--c-accent); transform:translateY(-3px); }
.cert-card__icon{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-navy-900);
}
.cert-card__icon svg{ width:30px; height:30px; color:var(--c-orange-400); }
.cert-card__title{ font-size:var(--fs-sm); font-weight:700; }
.cert-card__desc{ font-size:11.5px; color:var(--c-text-muted); }

/* ==========================================================================
   9. Factory / Media showcase
   ========================================================================== */
.factory{
  position:relative;
  min-height:460px;
  display:flex; align-items:flex-end;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(150deg,var(--c-navy-800),var(--c-navy-900));
}
.factory__media{ position:absolute; inset:0; }
.factory__media img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.factory__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(14,39,64,.92) 0%,rgba(14,39,64,.35) 55%,rgba(14,39,64,.15) 100%);
}
.factory__play{
  position:absolute; top:50%; right:50%; transform:translate(50%,-50%);
  width:84px; height:84px; border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-base) var(--ease),background var(--dur-base) var(--ease);
  z-index:2;
}
.factory__play:hover{ transform:translate(50%,-50%) scale(1.08); background:var(--c-accent); border-color:var(--c-accent); }
.factory__play svg{ width:28px; height:28px; color:#fff; margin-inline-start:-3px; }
.factory__content{ position:relative; z-index:2; padding:var(--sp-8); color:#fff; }
.factory__content h2{ font-size:var(--fs-2xl); max-width:22ch; margin-bottom:var(--sp-3); }
.factory__content p{ color:var(--c-text-on-dark-muted); max-width:52ch; }
.factory__stats{ display:flex; flex-wrap:wrap; gap:var(--sp-8); margin-top:var(--sp-6); }
.factory__stats strong{ display:block; font-size:var(--fs-2xl); color:var(--c-orange-400); }
.factory__stats span{ font-size:var(--fs-xs); color:var(--c-text-on-dark-muted); }

/* ==========================================================================
   10. Company intro / split sections
   ========================================================================== */
.split{
  display:grid; grid-template-columns:1fr; gap:var(--sp-8); align-items:center;
}
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; gap:var(--sp-10); }
  .split--reverse{ direction:ltr; }
  .split--reverse > *{ direction:rtl; }
}
.split__media{ position:relative; }
.split__media-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:6/5; box-shadow:var(--shadow-md);
  background:var(--c-slate-100);
}
.split__media-frame img{ width:100%; height:100%; object-fit:cover; }
.split__media-accent{ display:none; }
@media (min-width:900px){
  .split__media-accent{
    display:block;
    position:absolute; z-index:-1; inset-inline-start:-var(--sp-6); bottom:-var(--sp-6);
    width:60%; aspect-ratio:1; border-radius:var(--radius-lg);
    background:linear-gradient(150deg,var(--c-orange-400),var(--c-accent-dark));
    opacity:.9;
  }
}
.split__list{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-6); }
.split__list li{ display:flex; align-items:flex-start; gap:.7em; font-size:var(--fs-sm); color:var(--c-text-muted); }
.split__list svg{ width:20px; height:20px; color:var(--c-accent-dark); flex-shrink:0; margin-top:2px; }

/* ==========================================================================
   11. CTA banner
   ========================================================================== */
.cta-banner{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--c-navy-800) 0%,var(--c-navy-600) 100%);
  padding:var(--sp-9) var(--sp-7);
  color:#fff;
  display:flex; flex-direction:column; gap:var(--sp-6);
  align-items:flex-start;
}
.cta-banner::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 88% 30%,rgba(242,148,31,.28),transparent 55%);
}
@media (min-width:860px){
  .cta-banner{ flex-direction:row; align-items:center; justify-content:space-between; padding:var(--sp-9) var(--sp-8); }
}
.cta-banner__text{ position:relative; z-index:1; max-width:46ch; }
.cta-banner__text h2{ font-size:var(--fs-2xl); margin-bottom:var(--sp-3); }
.cta-banner__text p{ color:var(--c-text-on-dark-muted); }
.cta-banner__actions{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:var(--sp-4); flex-shrink:0; }

/* ==========================================================================
   12. Forms
   ========================================================================== */
.field{ display:flex; flex-direction:column; gap:.5em; margin-bottom:var(--sp-5); }
.field label{ font-size:var(--fs-sm); font-weight:600; color:var(--c-slate-700); }
.field label .req{ color:var(--c-accent-dark); }
.field input,
.field textarea,
.field select{
  width:100%;
  border:1.5px solid var(--c-border);
  border-radius:var(--radius-sm);
  padding:.9em 1.1em;
  background:#fff;
  font-size:var(--fs-base);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color:var(--c-primary-light);
  box-shadow:0 0 0 4px rgba(38,95,156,.12);
}
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; grid-template-columns:1fr; gap:0 var(--sp-4); }
@media (min-width:640px){ .field-row{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:var(--fs-xs); color:var(--c-text-muted); margin-top:var(--sp-2); }
.form-success{
  display:none;
  align-items:center; gap:.6em;
  background:#eefaf1; color:#1c7a3e;
  border:1px solid #bfe9cb;
  border-radius:var(--radius-sm);
  padding:1em 1.2em; font-size:var(--fs-sm); font-weight:600;
  margin-bottom:var(--sp-5);
}
.form-success.is-visible{ display:flex; }
.form-success svg{ width:20px; height:20px; flex-shrink:0; }

/* ==========================================================================
   13. Page header / Breadcrumb
   ========================================================================== */
.page-header{
  background:linear-gradient(150deg,var(--c-navy-900),var(--c-navy-700));
  color:#fff;
  padding-block:var(--sp-9) var(--sp-8);
  position:relative; overflow:hidden;
}
.page-header::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 90% 10%,rgba(242,148,31,.2),transparent 50%);
}
.page-header__inner{ position:relative; z-index:1; }
.breadcrumb{ display:flex; align-items:center; gap:.5em; font-size:var(--fs-xs); color:var(--c-text-on-dark-muted); margin-bottom:var(--sp-4); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb svg{ width:12px; height:12px; opacity:.7; transform:scaleX(-1); }
.page-header h1{ font-size:var(--fs-3xl); margin-bottom:var(--sp-2); }
.page-header p{ color:var(--c-text-on-dark-muted); max-width:56ch; }

/* ==========================================================================
   14. Products catalog
   ========================================================================== */
.catalog__layout{
  display:grid; grid-template-columns:1fr; gap:var(--sp-8);
  align-items:start;
}
@media (min-width:960px){
  .catalog__layout{ grid-template-columns:270px 1fr; gap:var(--sp-9); }
}
.catalog__sidebar{
  display:flex; flex-direction:column; gap:var(--sp-6);
  min-width:0;
}
@media (min-width:960px){
  .catalog__sidebar{ position:sticky; top:96px; }
}
.catalog__search{ position:relative; }
.catalog__search input{
  width:100%; padding:.9em 2.8em .9em 1.1em;
  border:1.5px solid var(--c-border); border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
}
.catalog__search input:focus{ outline:none; border-color:var(--c-primary-light); box-shadow:0 0 0 4px rgba(38,95,156,.12); }
.catalog__search svg{ position:absolute; inset-inline-end:1em; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--c-slate-400); }

.filter-group h3{ font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.04em; color:var(--c-slate-600); margin-bottom:var(--sp-4); }
.filter-list{ display:flex; flex-direction:column; gap:.35em; }
.filter-list button{
  display:flex; align-items:center; justify-content:space-between; gap:.6em;
  width:100%; text-align:right;
  padding:.75em .9em; border-radius:var(--radius-sm);
  font-size:var(--fs-sm); font-weight:600; color:var(--c-slate-700);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.filter-list button:hover{ background:var(--c-slate-100); }
.filter-list button.is-active{ background:var(--c-navy-900); color:#fff; }
.filter-list button span{
  font-size:11px; font-weight:700; color:var(--c-slate-400);
  background:var(--c-slate-100); border-radius:var(--radius-full); padding:.15em .6em;
}
.filter-list button.is-active span{ background:rgba(255,255,255,.15); color:#fff; }

.filter-card{
  border-radius:var(--radius-md); overflow:hidden;
  background:linear-gradient(150deg,var(--c-navy-700),var(--c-navy-900));
  color:#fff; padding:var(--sp-6);
}
.filter-card h3{ font-size:var(--fs-md); margin-bottom:var(--sp-2); }
.filter-card p{ color:var(--c-text-on-dark-muted); font-size:var(--fs-sm); margin-bottom:var(--sp-5); }

@media (max-width:959px){
  .filter-list{ flex-direction:row; flex-wrap:nowrap; overflow-x:auto; padding-bottom:.4em; gap:.6em; -webkit-overflow-scrolling:touch; }
  .filter-list::-webkit-scrollbar{ height:4px; }
  .filter-list button{ width:auto; white-space:nowrap; }
  .filter-card{ display:none; }
}

.catalog__toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-4);
  margin-bottom:var(--sp-6); padding-bottom:var(--sp-5); border-bottom:1px solid var(--c-border);
}
.catalog__count strong{ color:var(--c-primary); }
.catalog__sort{
  border:1.5px solid var(--c-border); border-radius:var(--radius-sm);
  padding:.6em 1em; font-size:var(--fs-sm); background:#fff;
}
.catalog__grid{ min-height:200px; }
.catalog__empty{
  display:none; text-align:center; padding:var(--sp-10) 0; color:var(--c-text-muted);
}
.catalog__empty.is-visible{ display:block; }
.product-card[hidden]{ display:none; }

.service-card{
  text-align:center;
  background:linear-gradient(150deg,var(--c-navy-700),var(--c-navy-900));
  border-color:transparent; color:#fff;
}
.service-card .product-card__media{ background:transparent; padding-top:var(--sp-7); }
.service-card .product-card__media svg{ width:30%; height:30%; color:var(--c-orange-400); }
.service-card .product-card__body{ align-items:center; }
.service-card .product-card__cat{ color:var(--c-orange-300); }
.service-card .product-card__title{ color:#fff; }
.service-card .product-card__desc{ color:var(--c-text-on-dark-muted); }
.service-card .product-card__footer{ border-top-color:rgba(255,255,255,.14); width:100%; justify-content:center; }
.service-card .link-arrow{ color:var(--c-orange-300); }
.service-card .link-arrow:hover{ color:#fff; }

/* ==========================================================================
   14b. Product detail modal
   ========================================================================== */
.product-modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
  visibility:hidden; opacity:0;
  transition:opacity var(--dur-base) var(--ease),visibility var(--dur-base);
}
.product-modal.is-open{ visibility:visible; opacity:1; }
.product-modal__overlay{
  position:absolute; inset:0;
  background:rgba(14,39,64,.66);
  backdrop-filter:blur(3px);
}
.product-modal__dialog{
  position:relative;
  width:100%; max-width:780px; max-height:88vh;
  overflow-y:auto; overflow-x:hidden;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:1fr; min-width:0;
  transform:translateY(18px) scale(.98);
  transition:transform var(--dur-base) var(--ease);
}
.product-modal.is-open .product-modal__dialog{ transform:translateY(0) scale(1); }
@media (min-width:700px){
  .product-modal__dialog{ grid-template-columns:300px 1fr; max-height:82vh; }
}
.product-modal__close{
  position:absolute; top:var(--sp-4); inset-inline-end:var(--sp-4); z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9);
  border:1px solid var(--c-border);
  color:var(--c-slate-700);
  box-shadow:var(--shadow-sm);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.product-modal__close:hover{ background:var(--c-navy-900); color:#fff; transform:rotate(90deg); }
.product-modal__media{
  position:relative; min-width:0;
  aspect-ratio:4/3;
  background:#fff;
  border-bottom:1px solid var(--c-border);
}
@media (min-width:700px){ .product-modal__media{ border-bottom:0; border-inline-end:1px solid var(--c-border); } }
@media (min-width:700px){ .product-modal__media{ aspect-ratio:auto; height:100%; } }
.product-modal__media img{ width:100%; height:100%; object-fit:contain; padding:var(--sp-6); }
.product-modal__media svg{ width:32%; height:32%; color:var(--c-slate-300); }
.product-modal__thumbs{
  position:absolute; inset-inline:0; bottom:var(--sp-3);
  display:flex; justify-content:center; gap:.5em;
}
.product-modal__thumb{
  width:42px; height:42px; border-radius:var(--radius-sm);
  border:2px solid #fff; overflow:hidden; padding:1px;
  background:#fff; box-shadow:var(--shadow-sm);
  opacity:.65; transition:opacity var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.product-modal__thumb img{ width:100%; height:100%; object-fit:contain; }
.product-modal__thumb:hover{ opacity:1; }
.product-modal__thumb.is-active{ opacity:1; border-color:var(--c-accent); }
.product-modal__body{ padding:var(--sp-7); display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.product-modal__cat{ font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--c-accent-dark); }
.product-modal__title{ font-size:var(--fs-lg); line-height:var(--lh-snug); }
.product-modal__desc{ font-size:var(--fs-sm); color:var(--c-text-muted); }
.product-modal__specs{ display:flex; flex-wrap:wrap; gap:.5em; margin-block:.3em; }
.product-modal__specs li{
  font-size:var(--fs-xs); font-weight:600; color:var(--c-slate-700);
  background:var(--c-slate-100); border-radius:var(--radius-sm);
  padding:.5em .8em;
}
.product-modal__note{
  font-size:var(--fs-xs); color:var(--c-text-muted);
  background:var(--c-bg-alt); border-radius:var(--radius-sm);
  padding:.8em 1em;
}
.product-modal__footer{ margin-top:auto; padding-top:var(--sp-2); }

/* ==========================================================================
   15. About page
   ========================================================================== */
.value-card{
  padding:var(--sp-7);
  border-radius:var(--radius-md);
  background:#fff;
  border:1px solid var(--c-border);
}
.value-card--filled{ background:linear-gradient(150deg,var(--c-navy-700),var(--c-navy-900)); color:#fff; border-color:transparent; }
.value-card__icon{
  width:52px; height:52px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--c-orange-100); margin-bottom:var(--sp-5);
}
.value-card--filled .value-card__icon{ background:rgba(255,255,255,.12); }
.value-card__icon svg{ width:26px; height:26px; color:var(--c-accent-dark); }
.value-card--filled .value-card__icon svg{ color:var(--c-orange-400); }
.value-card h3{ font-size:var(--fs-lg); margin-bottom:var(--sp-3); }
.value-card p{ font-size:var(--fs-sm); }
.value-card--filled p{ color:var(--c-text-on-dark-muted); }

.timeline{ position:relative; margin-top:var(--sp-8); }
.timeline::before{
  content:""; position:absolute; top:0; bottom:0; right:19px;
  width:2px; background:var(--c-border);
}
@media (min-width:768px){ .timeline::before{ right:50%; margin-inline-end:-1px; } }
.timeline__item{ position:relative; padding-right:var(--sp-9); padding-bottom:var(--sp-8); }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__dot{
  position:absolute; top:2px; right:11px;
  width:18px; height:18px; border-radius:50%;
  background:var(--c-accent); border:4px solid var(--c-orange-100);
}
.timeline__year{ display:inline-block; font-weight:800; color:var(--c-primary); font-size:var(--fs-lg); margin-bottom:.3em; }
.timeline__item p{ font-size:var(--fs-sm); max-width:60ch; }
@media (min-width:768px){
  .timeline__item{ width:50%; padding-inline-end:var(--sp-9); }
  .timeline__item:nth-child(odd){ padding-inline-start:0; }
  .timeline__item:nth-child(even){ margin-inline-start:50%; padding-inline-end:0; padding-inline-start:var(--sp-9); }
  .timeline__item:nth-child(odd) .timeline__dot{ right:auto; left:-9px; }
}

.stat-block{ text-align:center; padding:var(--sp-6) var(--sp-3); }
.stat-block strong{ display:block; font-size:var(--fs-3xl); color:var(--c-accent-dark); letter-spacing:-.02em; }
.stat-block span{ font-size:var(--fs-sm); color:var(--c-text-muted); font-weight:600; }
.section--dark .stat-block strong{ color:var(--c-orange-400); }
.section--dark .stat-block span{ color:var(--c-text-on-dark-muted); }

.gallery-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4);
}
@media (min-width:640px){ .gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; } }
.gallery-grid__item{
  border-radius:var(--radius-md); overflow:hidden; background:var(--c-slate-100);
  position:relative;
}
.gallery-grid__item img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.gallery-grid__item:hover img{ transform:scale(1.06); }
@media (min-width:640px){
  .gallery-grid__item:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .gallery-grid__item:nth-child(4){ grid-column:span 2; }
}

/* ==========================================================================
   16. Contact page
   ========================================================================== */
.contact-info-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-5); margin-bottom:var(--sp-9); }
@media (min-width:768px){ .contact-info-grid{ grid-template-columns:repeat(3,1fr); } }
.contact-info-card{
  display:flex; align-items:flex-start; gap:var(--sp-4);
  padding:var(--sp-6); border-radius:var(--radius-md);
  background:#fff; border:1px solid var(--c-border);
}
.contact-info-card__icon{
  width:48px; height:48px; border-radius:var(--radius-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-navy-900);
}
.contact-info-card__icon svg{ width:22px; height:22px; color:var(--c-orange-400); }
.contact-info-card h3{ font-size:var(--fs-sm); margin-bottom:.3em; }
.contact-info-card p{ font-size:var(--fs-sm); }
.contact-info-card a:hover{ color:var(--c-primary); }

.contact-layout{ display:grid; grid-template-columns:1fr; gap:var(--sp-9); }
@media (min-width:960px){ .contact-layout{ grid-template-columns:1.1fr .9fr; } }
.contact-panel{ padding:var(--sp-7); border-radius:var(--radius-lg); background:#fff; border:1px solid var(--c-border); }
.contact-panel h2{ font-size:var(--fs-xl); margin-bottom:var(--sp-2); }
.contact-panel > p{ margin-bottom:var(--sp-6); }

.contact-aside{ display:flex; flex-direction:column; gap:var(--sp-6); }
.map-frame{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--c-border);
  aspect-ratio:4/3; position:relative;
  background:
    linear-gradient(var(--c-slate-100),var(--c-slate-100)),
    repeating-linear-gradient(45deg,var(--c-slate-200) 0 2px,transparent 2px 14px);
  background-blend-mode:normal;
  display:flex; align-items:center; justify-content:center;
}
.map-frame__pin{
  display:flex; flex-direction:column; align-items:center; gap:.6em;
  text-align:center; color:var(--c-slate-600); padding:var(--sp-6);
}
.map-frame__pin svg{ width:36px; height:36px; color:var(--c-accent-dark); }
.map-frame__pin strong{ font-size:var(--fs-sm); color:var(--c-slate-700); }
.map-frame__pin span{ font-size:var(--fs-xs); }

.hours-card{ padding:var(--sp-6); border-radius:var(--radius-lg); background:var(--c-bg-alt); border:1px solid var(--c-border); }
.hours-card h3{ font-size:var(--fs-md); margin-bottom:var(--sp-4); display:flex; align-items:center; gap:.5em; }
.hours-card h3 svg{ width:20px; height:20px; color:var(--c-accent-dark); }
.hours-list{ display:flex; flex-direction:column; gap:.15em; }
.hours-list li{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7em 0; font-size:var(--fs-sm);
  border-bottom:1px dashed var(--c-border);
}
.hours-list li:last-child{ border-bottom:0; }
.hours-list li span:first-child{ color:var(--c-slate-700); font-weight:600; }
.hours-list li.is-off span:last-child{ color:var(--c-slate-400); }
.hours-list li:not(.is-off) span:last-child{ color:var(--c-primary); font-weight:700; }

.social-row{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.social-row a{
  display:flex; align-items:center; gap:.5em;
  padding:.7em 1.1em; border-radius:var(--radius-full);
  border:1.5px solid var(--c-border); font-size:var(--fs-sm); font-weight:600;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.social-row a:hover{ border-color:var(--c-primary); color:var(--c-primary); }
.social-row svg{ width:16px; height:16px; }

/* ==========================================================================
   17. Scroll-reveal animation
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 70ms); }

/* ==========================================================================
   18. Misc utilities
   ========================================================================== */
::selection{ background:var(--c-accent); color:#241300; }
.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.hide-mobile{ display:none; }
@media (min-width:768px){
  .hide-mobile{ display:revert; }
  .hide-desktop{ display:none; }
}
.badge-strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6) var(--sp-9);
  justify-content:center;
}
.badge-strip img,
.badge-strip svg{ height:34px; width:auto; opacity:.7; filter:grayscale(1); transition:opacity var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease); }
.badge-strip a:hover img,
.badge-strip a:hover svg{ opacity:1; filter:grayscale(0); }

.img-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 16px),
    linear-gradient(150deg,var(--c-navy-600),var(--c-navy-900));
}
.img-placeholder svg{ width:22%; height:22%; color:rgba(255,255,255,.35); }
.img-placeholder--light{
  background:
    repeating-linear-gradient(135deg,rgba(14,39,64,.04) 0 2px,transparent 2px 16px),
    var(--c-slate-100);
}
.img-placeholder--light svg{ color:var(--c-slate-300); }

@media print{
  .site-header,.hero-nav,.footer-social,.mobile-tabbar,.cta-banner,.factory__play{ display:none !important; }
}