/* ===================================================================
   SHERY REFINERY — Design Tokens
   Palette: charcoal depths + brushed-gold accent + warm ink
   Type: Fraunces (display) / Inter (body) / IBM Plex Mono (specs)
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg-deep:      #0b0b0c;
  --surface:      #17171a;
  --surface-2:    #202023;
  --line:         #2c2c2f;
  --line-soft:    #232326;
  --gold:         #b08d57;
  --gold-bright:  #cfa86a;
  --ink:          #ece9e4;
  --ink-dim:      #918f8a;
  --ink-faint:    #5c5b58;

  --f-display: 'Fraunces', serif;
  --f-body: 'Inter', -apple-system, sans-serif;
  --f-mono: 'IBM Plex Mono', monospace;

  --container: 1280px;
  --pad: clamp(20px, 5vw, 64px);
  --header-h: 110px; /* JS measures the real header height on load/resize and overrides this */

  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
::selection{ background: var(--gold); color:#0b0b0c; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.eyebrow{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:''; width:22px; height:1px; background: var(--gold);
}

h1,h2,h3,h4{ font-family: var(--f-display); font-weight:500; margin:0; letter-spacing:-0.01em; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 28px;
  border-radius: 2px;
  font-size: 14px; letter-spacing:.04em;
  font-weight:500;
  font-family: inherit;
  cursor: pointer;
  border:1px solid transparent;
  transition: all .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:#0b0b0c;
}
.btn-primary:hover{ filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 8px 30px -8px rgba(176,141,87,.5); }
.btn-ghost{
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-bright); }

/* ---------- Reveal on scroll (3D) ---------- */
.reveal{
  opacity:0;
  transform: perspective(800px) translateY(30px) rotateX(-8deg);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform: perspective(800px) translateY(0) rotateX(0); }

/* Tilt-in reveal — для фото продукции и графики (about-figure, page-hero-art, map-frame и т.п.):
   элемент "разворачивается" из наклона в пространстве + расфокус */
.reveal-blur{
  opacity:0;
  filter: blur(16px);
  transform-origin: center;
  transform: perspective(1100px) rotateY(24deg) translateX(46px) scale(1.05);
  transition: opacity 1.05s var(--ease), filter 1.05s var(--ease), transform 1.05s var(--ease);
  will-change: filter, opacity, transform;
}
.reveal-blur.is-visible{
  opacity:1;
  filter: blur(0);
  transform: perspective(1100px) rotateY(0) translateX(0) scale(1);
}

/* Flip-open reveal — для заголовков секций (h1, h2, .section-head):
   строка "откидывается" сверху вниз, как крышка */
.reveal-clip{
  opacity:0;
  transform-origin: top center;
  transform: perspective(700px) rotateX(-60deg) translateY(-16px);
  transition: opacity .6s ease-out, transform .85s var(--ease);
}
.reveal-clip.is-visible{
  opacity:1;
  transform: perspective(700px) rotateX(0) translateY(0);
}

/* Tip-up reveal — для карточек слитков (sku-card):
   карточка "поднимается" из наклона снизу, как будто её ставят на стол */
.reveal-pop{
  opacity:0;
  transform-origin: bottom center;
  transform: perspective(650px) rotateX(52deg) translateY(30px) scale(.9);
  transition: opacity .55s var(--ease), transform .7s var(--ease);
}
.reveal-pop.is-visible{
  opacity:1;
  transform: perspective(650px) rotateX(0) translateY(0) scale(1);
}

/* ===================================================================
   HEADER / NAV
=================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 20px var(--pad);
  display:grid; grid-template-columns: auto minmax(0,1fr) auto; align-items:center;
  background: rgba(11,11,12,.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), padding .4s var(--ease), background .4s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color: var(--line-soft);
  padding-block: 13px;
  background: rgba(11,11,12,.92);
}
.burger-wrap{ justify-self:start; min-width:0; }
.brand{ display:flex; align-items:center; gap:14px; justify-self:center; min-width:0; }
.brand-mark{ height:65px; width:auto; object-fit:contain; flex-shrink:0; }
.footer-brand .brand .brand-mark{ height:90px; }
.brand-text{ font-family: var(--f-display); font-size: 17px; letter-spacing:.03em; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.brand-text b{ color: var(--gold-bright); font-weight:500; }
.brand-sub{ display:block; font-family: var(--f-mono); font-size:9px; letter-spacing:.14em; color: var(--ink-faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.header-actions{ display:flex; align-items:center; gap:22px; justify-self:end; min-width:0; }

.lang-switch{ display:flex; align-items:center; gap:2px; font-family: var(--f-mono); font-size:11.5px; }
.lang-switch button{
  background:none; border:none; color: var(--ink-faint); padding:6px 8px;
  letter-spacing:.05em;
}
.lang-switch button.active{ color: var(--gold-bright); }
.lang-switch button:disabled{ opacity:.35; cursor:not-allowed; }
.lang-switch span{ color: var(--line); font-size:10px; }

.nav-toggle{
  display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:10px 6px;
}
.nav-toggle span{ width:22px; height:1px; background: var(--ink); transition: all .3s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ---------- Backdrop (behind the side drawer) ---------- */
.nav-backdrop{
  position:fixed; inset:0; z-index:150; background: rgba(6,6,7,.7);
  opacity:0; visibility:hidden; transition: opacity .4s var(--ease);
  backdrop-filter: blur(2px);
}
.nav-backdrop.open{ opacity:1; visibility:visible; }

/* ---------- Side drawer nav (all breakpoints) — opens from the LEFT, same side as the burger button ---------- */
.mobile-nav{
  position:fixed; top:0; left:0; bottom:0; z-index:151;
  width:min(360px, 84vw);
  background: var(--surface);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:20px;
  padding: 100px 40px 40px;
  transform: translateX(-100%);
  transition: transform .5s var(--ease);
  box-shadow: 30px 0 60px -20px rgba(0,0,0,.5);
  text-align:left;
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav a{ font-family: var(--f-display); font-size:clamp(19px,2.4vw,24px); color: var(--ink); transition: color .3s; }
.mobile-nav a:hover{ color: var(--gold-bright); }
.mobile-nav .nav-group{ display:flex; flex-direction:column; align-items:flex-start; gap:19px; width:100%; }
.mobile-nav a.active{
  color: var(--gold-bright);
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px;
}
.nav-item-expandable{ position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.nav-item-row{ display:flex; align-items:center; gap:10px; }
.nav-expand{
  background:none; border:1px solid var(--line); border-radius:50%; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; color: var(--ink-dim); flex-shrink:0;
  transition: transform .35s var(--ease), border-color .3s, color .3s;
}
.nav-expand svg{ width:13px; height:13px; }
.nav-expand[aria-expanded="true"]{ transform: rotate(180deg); border-color: var(--gold); color: var(--gold-bright); }
.mobile-nav .nav-sub{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), margin-top .4s var(--ease);
}
.mobile-nav .nav-sub.open{ max-height:120px; opacity:1; margin-top:12px; }
.mobile-nav .nav-sub a{ font-family: var(--f-mono); font-size:13px; color: var(--ink-dim); letter-spacing:.03em; padding:7px 0; }
.mobile-nav .lang-switch{
  position:absolute; left:40px; right:40px; bottom:32px;
  font-size:14px; justify-content:flex-start;
}
.mobile-nav .lang-switch button{ padding-block:6px; }
.mobile-nav .lang-switch button:first-of-type{ padding-inline-start:0; }
.mobile-nav .lang-switch button:disabled{ opacity:.6; }
.mobile-nav .close-x{
  position:absolute; top:24px; left:40px; background:none; border:none; width:34px; height:34px;
}
.mobile-nav .close-x span{ position:absolute; top:50%; left:50%; width:20px; height:1px; background:var(--ink); }
.mobile-nav .close-x span:first-child{ transform: translate(-50%,-50%) rotate(45deg); }
.mobile-nav .close-x span:last-child{ transform: translate(-50%,-50%) rotate(-45deg); }

@media (max-width:480px){
  .mobile-nav{ width:100%; padding:90px 26px 36px; }
  .mobile-nav .lang-switch{ left:26px; right:26px; }
  .mobile-nav .close-x{ left:26px; }
}

/* ---------- Back link (sub-pages) ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-mono); font-size:12.5px; letter-spacing:.04em; color: var(--ink-dim);
  padding:10px 0; transition: color .3s, gap .3s;
}
.back-link:hover{ color: var(--gold-bright); gap:14px; }
.back-link svg{ width:14px; height:14px; }

/* ===================================================================
   HERO
=================================================================== */
.hero{
  min-height: 100vh;
  display:flex; align-items:center;
  position:relative;
  padding-top: calc(var(--header-h, 110px) + 24px);
  background:
    radial-gradient(ellipse 60% 50% at 82% 18%, rgba(176,141,87,.12), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(176,141,87,.05), transparent 60%);
  overflow:hidden;
}
.hero-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, black, transparent 75%);
  opacity:.5;
}
.hero .container{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1fr 1.05fr; gap:40px; align-items:center;
  max-width: 1600px;
}
.hero-kicker{ margin-bottom:26px; }
.hero h1{
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 1.04;
  color: var(--ink);
}
.hero h1 em{ font-style:italic; color: var(--gold-bright); }
.hero-sub{
  margin-top:26px; max-width: 480px;
  color: var(--ink-dim); font-size:16.5px; line-height:1.7;
}
.hero-cta{ display:flex; gap:16px; margin-top:42px; flex-wrap:wrap; }

.hero-stats{ display:flex; gap:36px; margin-top:64px; }
.hero-stat b{ display:block; font-family: var(--f-mono); font-size:22px; color: var(--gold-bright); }
.hero-stat span{ font-size:11.5px; color: var(--ink-faint); letter-spacing:.05em; text-transform:uppercase; }

/* --- bar visual --- */
.hero-visual{ position:relative; display:flex; justify-content:center; align-items:center; height: 640px; }
.bar-photo-group{
  position:relative; width:100%; max-width:1188px; margin:0 auto;
  perspective:1400px; display:flex; align-items:flex-end; justify-content:center; gap:2.5%;
}
.bar-float{ animation: floatBar 7s ease-in-out infinite; }
.bar-photo{
  height:auto; display:block;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.55));
  transition: transform .45s var(--ease), filter .45s var(--ease);
  transform-style: preserve-3d;
}
.bar-photo-group:hover .bar-photo{ filter: drop-shadow(0 28px 38px rgba(0,0,0,.6)); }
/* Gold & silver — same size, large, up front */
.bar-photo-au{ width:29%; align-self:flex-end; transform: rotateY(7deg); z-index:3; }
.bar-photo-ag{ width:29%; align-self:flex-end; transform: rotateY(-7deg); z-index:3; }
/* Platinum & palladium — smaller, set back for depth */
.bar-photo-pt{ width:19%; align-self:flex-end; transform: rotateY(20deg) translateY(-18px); z-index:1; filter: drop-shadow(0 18px 22px rgba(0,0,0,.5)) brightness(.94); }
.bar-photo-pd{ width:19%; align-self:flex-end; transform: rotateY(-20deg) translateY(-18px); z-index:1; filter: drop-shadow(0 18px 22px rgba(0,0,0,.5)) brightness(.94); }
.bar-photo-group:hover .bar-photo-au{ transform: rotateY(7deg) translateY(-12px); }
.bar-photo-group:hover .bar-photo-ag{ transform: rotateY(-7deg) translateY(-12px); }
.bar-photo-group:hover .bar-photo-pt{ transform: rotateY(24deg) translateY(-26px); }
.bar-photo-group:hover .bar-photo-pd{ transform: rotateY(-24deg) translateY(-26px); }
@keyframes floatBar{ 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-16px) rotate(1deg);} }

.assay-seal-wrap{
  position:absolute; width:135px; height:135px; right:-10px; bottom:0;
  transform: translateY(170px);
  z-index:4;
}
.assay-seal{ width:100%; height:100%; animation: spin 26s linear infinite; display:block; }
@keyframes spin{ to{ transform: rotate(360deg);} }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: var(--f-mono); font-size:10px; letter-spacing:.2em; color: var(--ink-faint);
}
.scroll-cue .line{ width:1px; height:34px; background: linear-gradient(var(--gold), transparent); animation: pulseLine 2s ease-in-out infinite; }
@keyframes pulseLine{ 0%,100%{ opacity:.3;} 50%{ opacity:1;} }

/* ===================================================================
   MARQUEE / SPEC TICKER (signature element)
=================================================================== */
.ticker{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  background: var(--surface);
  overflow:hidden; white-space:nowrap;
  padding: 16px 0;
}
.ticker-track{ display:inline-flex; gap:0; animation: tickerScroll 42s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state: paused; }
@keyframes tickerScroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.ticker-item{
  display:inline-flex; align-items:center; gap:14px;
  font-family: var(--f-mono); font-size:13px; color: var(--ink-dim);
  padding-inline: 28px; border-inline-end: 1px solid var(--line-soft);
}
.ticker-item b{ color: var(--gold-bright); font-weight:500; }
.ticker-item .dot{ width:5px; height:5px; border-radius:50%; background: var(--ink-faint); }

/* ===================================================================
   SECTION shells
=================================================================== */
section{ position:relative; padding: 128px 0; }
.section-head{ max-width: 640px; margin-bottom: 64px; }
.section-head h2{ font-size: clamp(30px, 3.4vw, 46px); margin-top:18px; line-height:1.15; }
.section-head p{ color: var(--ink-dim); margin-top:20px; font-size:16px; line-height:1.7; }
.section-split{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }

/* ===================================================================
   ABOUT
=================================================================== */
.about{ background: linear-gradient(180deg, transparent, rgba(255,255,255,.012) 30%, transparent); }
.about-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap:80px; align-items:start; }
.about-figure{ position:relative; }
.about-figure .frame{
  aspect-ratio: 4/5; border:1px solid var(--line); position:relative; overflow:hidden;
  background: linear-gradient(155deg, var(--surface), var(--bg-deep));
}
.about-figure .frame::before{
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(115deg, rgba(176,141,87,.05) 0 2px, transparent 2px 26px);
}
.about-figure .frame-caption{
  position:absolute; left:20px; bottom:20px; font-family: var(--f-mono); font-size:11px; color: var(--ink-faint); letter-spacing:.06em;
}
.about-list{ display:grid; gap:30px; }
.about-item{ display:flex; gap:22px; padding-block:24px; border-top:1px solid var(--line-soft); }
.about-item:first-child{ border-top:none; padding-top:0; }
.about-item .num{ font-family: var(--f-mono); color: var(--gold); font-size:13px; padding-top:4px; min-width:28px; }
.about-item h3{ font-size:19px; font-weight:500; margin-bottom:8px; }
.about-item p{ color: var(--ink-dim); font-size:14.5px; line-height:1.7; }

/* ===================================================================
   PROCESS (stamped vs cast)
=================================================================== */
.process{ background: var(--surface); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.process-cols{ display:grid; grid-template-columns: 1fr 1fr; gap:1px; background: var(--line-soft); border:1px solid var(--line-soft); }
.process-col{ background: var(--bg-deep); padding: 48px 44px; }
.process-col .eyebrow{ margin-bottom:22px; }
.process-col h3{ font-size:26px; margin-bottom:16px; }
.process-col p{ color: var(--ink-dim); font-size:15px; line-height:1.75; margin-bottom:26px; }
.process-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.process-tags span{
  font-family: var(--f-mono); font-size:11px; letter-spacing:.04em; color: var(--ink-dim);
  border:1px solid var(--line); padding:6px 12px; border-radius:2px;
}

/* ===================================================================
   PRODUCTS PREVIEW (home)
=================================================================== */
.metal-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1px; background: var(--line-soft); border:1px solid var(--line-soft); }
.metal-card{
  background: var(--bg-deep); padding: 40px 30px; position:relative; overflow:hidden;
  transition: background .4s var(--ease);
}
.metal-card:hover{ background: var(--surface); }
.metal-card .symbol{ font-family: var(--f-mono); font-size:13px; color: var(--ink-faint); letter-spacing:.1em; }
.metal-card h3{ font-size:23px; margin: 18px 0 10px; }
.metal-card p{ font-size:13px; color: var(--ink-dim); line-height:1.6; }
.metal-card .swatch{ position:absolute; top:0; left:0; width:100%; height:3px; }
.metal-card.au .swatch{ background: linear-gradient(90deg,#8a6a33,#e3c583); }
.metal-card.ag .swatch{ background: linear-gradient(90deg,#7c7c7e,#d8d8da); }
.metal-card.pt .swatch{ background: linear-gradient(90deg,#6d7075,#c9ccd1); }
.metal-card.pd .swatch{ background: linear-gradient(90deg,#5f6368,#b7bcc4); }
.metal-card .weights{ margin-top:20px; font-family: var(--f-mono); font-size:11px; color: var(--ink-faint); line-height:1.9; }
.metal-card .thumb{ position:absolute; top:22px; right:22px; width:40px; height:auto; opacity:.9; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); }

/* ===================================================================
   TRUST / CERT STRIP
=================================================================== */
.trust{ padding-block:90px; }
.trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:40px; }
.trust-item{ text-align:center; }
.trust-item .icon{ width:44px; height:44px; margin:0 auto 18px; color: var(--gold-bright); }
.trust-item h4{ font-size:15px; font-weight:500; margin-bottom:8px; }
.trust-item p{ font-size:13px; color: var(--ink-dim); line-height:1.6; }

/* ===================================================================
   CONTACT
=================================================================== */
.contact{ background: var(--surface); border-top:1px solid var(--line-soft); }
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap:80px; }
.contact-info-list{ display:grid; gap:26px; margin-top:36px; }
.contact-info-item{ display:flex; gap:16px; }
.contact-info-item .ico{ width:20px; height:20px; color: var(--gold); flex-shrink:0; margin-top:2px; }
.contact-info-item b{ display:block; font-size:14px; font-weight:500; margin-bottom:4px; }
.contact-info-item span, .contact-info-item a{ font-size:13.5px; color: var(--ink-dim); }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:10px; font-family: var(--f-mono); }
.field input, .field select, .field textarea{
  width:100%; background: var(--bg-deep); border:1px solid var(--line); color: var(--ink);
  padding:14px 16px; font-family: var(--f-body); font-size:14.5px; border-radius:2px;
  transition: border-color .3s;
}
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-inline-end:44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfa86a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 14px center;
  background-size:18px;
}
html[dir="rtl"] .field select{ background-position: left 14px center; }
.field select:focus{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0c68a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.field select option{ background: var(--bg-deep); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--gold); }
.field textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:12px; color: var(--ink-faint); margin-top:18px; line-height:1.6; }
.form-status{ margin-top:16px; font-size:13px; font-family: var(--f-mono); }
.form-status.ok{ color:#8fbf8a; }
.form-status.err{ color:#c98a8a; }

/* ===================================================================
   FOOTER
=================================================================== */
.site-footer{ border-top:1px solid var(--line-soft); padding-top:80px; }
.footer-top{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:60px; padding-bottom:64px; }
.footer-brand p{ color: var(--ink-dim); font-size:13.5px; line-height:1.7; margin-top:20px; max-width:280px; }
.footer-col h5{ font-family: var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:20px; }
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{ font-size:13.5px; color: var(--ink-dim); transition: color .3s; }
.footer-col a:hover{ color: var(--gold-bright); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  padding-block:28px; border-top:1px solid var(--line-soft);
  font-size:12px; color: var(--ink-faint);
}
.footer-legal{ font-family: var(--f-mono); font-size:11px; }

/* ===================================================================
   SECTION HEAD + ILLUSTRATION (metals / services preview)
=================================================================== */
.head-with-art{ position:relative; display:block; margin-bottom:64px; }
.head-with-art .section-head{ margin-bottom:0; max-width:640px; }
.section-art{ width:100px; flex-shrink:0; }
.section-art svg{ width:100%; height:auto; }
.section-art img{ width:100%; height:auto; }
.services-art{ position:absolute; left:61%; transform:translateX(-50%); bottom:-100px; width:250px; }
.services-art.services-art-wide{ width:450px; bottom:-70px; }
@media (max-width:1300px){ .services-art{ width:165px; } .services-art.services-art-wide{ width:280px; } }
@media (max-width:1100px){ .services-art{ position:static; width:150px; left:auto; transform:none; margin-top:24px; } .services-art.services-art-wide{ width:100%; } }

/* ===================================================================
   REFINING FEATURE (services.html — dedicated block)
=================================================================== */
.refining-feature{ background: var(--surface); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.refining-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.refining-copy p{ color:var(--ink-dim); font-size:15.5px; line-height:1.75; margin:18px 0 28px; max-width:480px; }
.refining-steps{ display:grid; }
.refining-step{ display:flex; gap:20px; padding-block:24px; border-top:1px solid var(--line-soft); }
.refining-step:first-child{ border-top:none; padding-top:0; }
.refining-step .step-num{ font-family:var(--f-mono); color:var(--gold); font-size:13px; min-width:28px; padding-top:3px; }
.refining-step h4{ font-size:17px; font-weight:500; margin-bottom:6px; }
.refining-step p{ color:var(--ink-dim); font-size:13.5px; line-height:1.7; }

.refining-art{ position:relative; display:flex; align-items:center; justify-content:center; }
.refining-art svg{ width:100%; max-width:340px; height:auto; }

/* ===================================================================
   WHATSAPP BUTTON
=================================================================== */
.whatsapp-btn{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  border:1px solid #2f5d46; color:#8fd6ae; padding:14px 24px; border-radius:2px;
  font-size:14px; letter-spacing:.03em; transition: all .3s var(--ease);
}
.whatsapp-btn svg{ width:18px; height:18px; }
.whatsapp-btn:hover{ border-color:#4bbf85; color:#b3ecc9; background: rgba(75,191,133,.08); }

@media (max-width: 980px){
  .head-with-art{ grid-template-columns:1fr; }
  .section-art{ display:none; }
  .refining-grid{ grid-template-columns:1fr; gap:40px; }
}
.page-hero{ padding-top: calc(var(--header-h, 150px) + 30px); padding-bottom:60px; }
.page-hero .eyebrow{ margin-bottom:20px; }
.page-hero h1{ font-size: clamp(32px, 4.2vw, 52px); max-width:760px; }
.page-hero p{ color:var(--ink-dim); max-width:580px; margin-top:20px; font-size:15.5px; line-height:1.7; }
.page-hero .back-link{ margin-bottom:30px; }
.page-hero-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; }
.page-hero-art{ display:flex; align-items:center; justify-content:center; }
.page-hero-art svg{ width:100%; max-width:260px; height:auto; }
@media (max-width:900px){
  .page-hero-grid{ grid-template-columns:1fr; }
  .page-hero-art{ display:none; }
}

/* ===================================================================
   PRODUCT PAGE (single bar card)
=================================================================== */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12px; color:var(--ink-faint); flex-wrap:wrap; margin-bottom:22px; }
.breadcrumb a{ color:var(--ink-dim); transition:color .3s; }
.breadcrumb a:hover{ color:var(--gold-bright); }
.breadcrumb span.sep{ color:var(--line); }
.breadcrumb span.current{ color:var(--gold-bright); }

.product-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:70px; align-items:start; min-width:0; }
.product-media{ min-width:0; }
.product-visual{
  position:relative; aspect-ratio:4/3.4; border:1px solid var(--line); overflow:hidden;
  background: linear-gradient(155deg, var(--surface), var(--bg-deep));
  display:flex; align-items:center; justify-content:center; padding:40px;
}
.product-visual::before{
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(115deg, rgba(176,141,87,.05) 0 2px, transparent 2px 26px);
}
.product-visual svg{
  position:relative; z-index:1; width:100%; max-width:340px; filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.product-visual img{
  position:relative; z-index:1; width:100%; height:100%; max-width:100%; object-fit:contain;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.product-visual.has-photo{ padding:32px; }
.product-visual.switching svg, .product-visual.switching img{ opacity:0; transform: scale(.96); }
.product-visual .product-badge{
  position:absolute; top:20px; left:20px; z-index:2;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.05em; color:var(--ink-faint);
  border:1px solid var(--line); padding:6px 12px; border-radius:20px;
}
.visual-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,11,12,.55); border:1px solid var(--line); color:var(--ink);
  backdrop-filter:blur(4px);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.visual-arrow:hover{ background:rgba(11,11,12,.85); border-color:var(--gold); color:var(--gold-bright); }
.visual-arrow svg{ width:18px; height:18px; filter:none; }
.visual-arrow--prev{ left:16px; }
.visual-arrow--next{ right:16px; }
@media (max-width:640px){
  .visual-arrow{ width:36px; height:36px; }
  .visual-arrow svg{ width:15px; height:15px; }
}
.product-thumbs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:12px; width:100%; }
.product-thumb{
  min-width:0; min-height:0; box-sizing:border-box;
  aspect-ratio:4/3; border:1px solid var(--line); background: linear-gradient(155deg, var(--surface), var(--bg-deep));
  display:flex; align-items:center; justify-content:center; padding:14px; overflow:hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.product-thumb svg, .product-thumb img{ width:100%; height:100%; max-width:100%; min-width:0; object-fit: contain; }
.product-thumb:hover{ transform: translateY(-2px); }
.product-thumb.active{ border-color: var(--gold); }

.product-info{ min-width:0; }
.product-info h1{ font-size:clamp(28px,3.2vw,40px); margin-bottom:18px; }
.product-info .lead{ color:var(--ink-dim); font-size:15.5px; line-height:1.75; margin-bottom:32px; }
.spec-table{ border-top:1px solid var(--line-soft); margin-bottom:32px; }
.spec-row{ display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.spec-row .k{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); flex-shrink:0; }
.spec-row .v{ font-size:14.5px; color:var(--ink); font-weight:500; text-align:right; }
.product-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.product-actions .btn{ white-space:normal; text-align:center; flex:1 1 200px; }

.request-split{ position:relative; flex:1 1 200px; }
.request-split .btn{ width:100%; }
.request-menu{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20;
  background: var(--surface); border:1px solid var(--line); border-radius:4px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  overflow:hidden;
}
.request-split.open .request-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.request-option{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; font-size:14px; color:var(--ink);
  border-bottom:1px solid var(--line-soft);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.request-option:last-child{ border-bottom:none; }
.request-option:hover{ background: var(--surface-2); color:var(--gold-bright); }
.request-option svg{ width:18px; height:18px; flex-shrink:0; }
#requestWhatsapp svg{ color:#25D366; }
.product-note{ font-size:12px; color:var(--ink-faint); line-height:1.7; margin-top:18px; }

.siblings{ margin-top:90px; padding-top:56px; border-top:1px solid var(--line-soft); }
.siblings h3{ font-size:15px; font-weight:500; color:var(--ink-dim); margin-bottom:22px; font-family:var(--f-mono); letter-spacing:.04em; text-transform:uppercase; }
.sibling-pills{ display:flex; flex-wrap:wrap; gap:12px; }
.sibling-pill{
  font-family:var(--f-mono); font-size:13px; border:1px solid var(--line); color:var(--ink-dim);
  padding:11px 20px; border-radius:24px; transition: all .3s var(--ease);
}
.sibling-pill:hover{ border-color:var(--gold); color:var(--gold-bright); }
.sibling-pill.current{ border-color:var(--gold); color:var(--gold-bright); background:rgba(176,141,87,.08); }

@media (max-width:900px){
  .product-grid{ grid-template-columns:1fr; gap:36px; }
  .product-visual{ padding:28px; }
  .product-actions .btn{ flex:1 1 100%; }
}
@media (max-width:640px){
  .product-visual{ aspect-ratio:4/3.6; padding:20px; }
  .product-thumbs{ gap:8px; }
  .product-thumb{ padding:8px; }
  .spec-row{ padding:13px 0; }
  .spec-row .k{ font-size:10.5px; }
  .spec-row .v{ font-size:13.5px; }
  .siblings{ margin-top:60px; padding-top:40px; }
}

/* ===================================================================
   COLLECTIONS (Stamped / Cast)
=================================================================== */
.collections-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.collection-tile-wide{ grid-column: 1 / -1; }
.collections-grid-solo{ margin-top:28px; }
.collection-tile{
  position:relative; background:var(--bg-deep); min-height:420px; padding:48px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; transition: background .4s var(--ease);
}
.collection-tile:hover{ background:var(--surface); }
.collection-tile .tile-bg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transition: transform .7s var(--ease);
}
.collection-tile:hover .tile-bg{ transform: scale(1.06) rotate(-1deg); }
.collection-tile .tile-bg svg{ width:62%; opacity:.9; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); }
.collection-tile .tile-bg img{
  position:absolute; right:6%; top:50%; transform: translateY(-50%);
  height:82%; width:auto; max-width:44%; opacity:.65;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
.collection-tile .tile-bg::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(100deg, var(--bg-deep) 0%, rgba(11,11,12,.88) 38%, rgba(11,11,12,.35) 62%, transparent 88%);
}
.collection-tile:hover .tile-bg img{ opacity:.75; }
.tile-bg img.granule-tile-photo{
  position:relative; width:70%; height:auto; max-width:none; object-fit:contain;
  opacity:.55; filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
  margin-left:auto;
}
.collection-tile:hover .tile-bg img.granule-tile-photo{ opacity:.68; }
.collection-tile .tile-copy{ position:relative; z-index:2; max-width:54%; }
.collection-tile .eyebrow{ margin-bottom:14px; }
.collection-tile h3{ font-size:30px; margin-bottom:12px; }
.collection-tile p{ color:var(--ink-dim); font-size:14px; line-height:1.7; max-width:340px; margin-bottom:22px; }
.collection-tile .tile-link{ font-family: var(--f-mono); font-size:12.5px; color:var(--gold-bright); display:inline-flex; align-items:center; gap:8px; }
.collection-tile:hover .tile-link{ gap:12px; }

/* Flip-toggle button — SKU cards on stamped.html / cast.html show the
   bar's front/back via a 3D flip that normally triggers on :hover.
   Touch devices have no hover, so this button lets visitors trigger the
   same flip by tapping. Hidden on mouse/desktop, shown on touch. */
.flip-toggle{
  display:none; align-items:center; justify-content:center;
  position:absolute; z-index:4; top:4px; inset-inline-end:4px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(11,11,12,.65); border:1px solid rgba(236,233,228,.3); color:var(--ink);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .5s var(--ease);
}
.flip-toggle svg{ width:19px; height:19px; }
.flip-toggle:active{ transform:scale(.9); }
.sku-card.has-flip.is-flipped .flip-toggle{ transform: scaleX(-1); }
@media (hover:none), (max-width:900px){
  .flip-toggle{ display:flex; }
}
.sku-card.has-flip.is-flipped .flip-card{ transform: rotateY(180deg); }
.sku-card.has-flip.is-flipped .flip-face img{
  filter: drop-shadow(0 0 8px rgba(191,155,90,.55)) drop-shadow(0 0 22px rgba(191,155,90,.4)) drop-shadow(0 0 44px rgba(191,155,90,.25));
}
.sku-card.has-flip--silver.is-flipped .flip-face img{
  filter: drop-shadow(0 0 8px rgba(200,203,208,.55)) drop-shadow(0 0 22px rgba(200,203,208,.4)) drop-shadow(0 0 44px rgba(200,203,208,.25));
}

/* Zoom icon on the tile image — hidden on the wide desktop layout
   (the bar photo is already large there); enabled by the responsive
   rules below once tiles switch to the stacked mobile/tablet layout. */
.tile-zoom{
  display:none; align-items:center; justify-content:center;
  position:absolute; z-index:3; bottom:14px; inset-inline-start:14px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(11,11,12,.6); border:1px solid rgba(236,233,228,.25); color:var(--ink);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.tile-zoom svg{ width:16px; height:16px; }
.tile-zoom:hover{ background:rgba(11,11,12,.85); border-color:var(--gold); color:var(--gold-bright); }
.tile-zoom:active{ transform:scale(.9); }

/* Fullscreen lightbox for the zoomed bar photo */
.tile-lightbox{
  position:fixed; inset:0; z-index:300; padding:32px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,7,.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.tile-lightbox.open{ opacity:1; visibility:visible; }
.tile-lightbox img{
  max-width:min(480px,88vw); max-height:80vh; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
.tile-lightbox-close{
  position:absolute; top:20px; right:20px; z-index:2;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.tile-lightbox-close:hover{ border-color:var(--gold); color:var(--gold-bright); }
.tile-lightbox-close svg{ width:18px; height:18px; }
html[dir="rtl"] .tile-lightbox-close{ right:auto; left:20px; }
body.lightbox-open{ overflow:hidden; }

/* ===================================================================
   SERVICES
=================================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.service-card{ background:var(--bg-deep); padding:38px 32px; transition: background .3s var(--ease); }
.service-card:hover{ background:var(--surface); }
.service-card .num{ font-family:var(--f-mono); color:var(--gold); font-size:12.5px; }
.service-card h3{ font-size:19px; margin:18px 0 12px; font-weight:500; }
.service-card p{ color:var(--ink-dim); font-size:13.5px; line-height:1.7; }
.services-cta{ text-align:center; margin-top:56px; }

/* ===================================================================
   ACCREDITATIONS / CERTIFICATES
=================================================================== */
.accred-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.accred-card{
  background:var(--bg-deep); padding:34px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; transition: background .3s var(--ease);
}
.accred-card:hover{ background:var(--surface); }
.accred-card .seal{ width:60px; height:60px; margin-bottom:18px; }
.accred-card .cert-name{ font-size:14px; font-weight:500; margin-bottom:4px; }
.accred-card .cert-scope{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-faint); margin-bottom:20px; line-height:1.5; }
.accred-card .view-btn{
  margin-top:auto; font-family:var(--f-mono); font-size:11px; letter-spacing:.05em;
  border:1px solid var(--line); color:var(--ink-dim); padding:9px 18px; border-radius:20px; transition: all .3s var(--ease);
}
.accred-card .view-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
.accred-note{ margin-top:40px; font-size:12.5px; color:var(--ink-faint); text-align:center; }

/* ===================================================================
   LOCATION
=================================================================== */
.location{ background:var(--surface); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.location-copy .contact-info-list{ margin-top:30px; }
.map-frame{
  position:relative; aspect-ratio:4/3; border:1px solid var(--line); overflow:hidden;
  background:
    radial-gradient(ellipse 55% 55% at 50% 48%, rgba(176,141,87,.14), transparent 65%),
    linear-gradient(155deg, var(--surface-2), var(--bg-deep));
}
.map-frame::before{
  content:''; position:absolute; inset:0; z-index:0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.9;
}
.map-pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center; z-index:2;
}
.map-pin svg{ width:34px; height:34px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.map-pin .pulse{
  width:10px; height:10px; border-radius:50%; background: var(--gold); margin-top:-4px;
  box-shadow:0 0 0 0 rgba(176,141,87,.6); animation: pinPulse 2.2s infinite;
}
@keyframes pinPulse{ 0%{ box-shadow:0 0 0 0 rgba(176,141,87,.55);} 70%{ box-shadow:0 0 0 16px rgba(176,141,87,0);} 100%{ box-shadow:0 0 0 0 rgba(176,141,87,0);} }
.map-caption{ position:absolute; left:20px; bottom:20px; font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.05em; z-index:2; }

/* ===================================================================
   CERTIFICATE MODAL
=================================================================== */
.cert-modal{
  position:fixed; inset:0; z-index:200; background:rgba(8,8,9,.88);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease);
  backdrop-filter: blur(6px);
}
.cert-modal.open{ opacity:1; visibility:visible; }
.cert-modal-inner{
  position:relative; width:100%; max-width:520px;
  background: var(--surface); border:1px solid var(--line); padding:0;
  transform: translateY(16px) scale(.98); transition: transform .4s var(--ease);
  max-height:88vh; overflow-y:auto;
}
.cert-modal.open .cert-modal-inner{ transform: translateY(0) scale(1); }
.cert-modal-close{
  position:absolute; top:16px; right:16px; z-index:3;
  width:34px; height:34px; border-radius:50%; background:rgba(11,11,12,.6); border:1px solid var(--line);
  color:var(--ink); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.cert-modal-close:hover{ border-color: var(--gold); color: var(--gold-bright); }

.cert-preview{ padding: 52px 40px 40px; text-align:center; position:relative; }
.cert-preview::before{
  content:''; position:absolute; inset:14px; border:1px solid var(--line); pointer-events:none;
}
.cert-preview .cert-seal{ width:76px; height:76px; margin:0 auto 22px; }
.cert-preview .cert-eyebrow{ justify-content:center; margin-bottom:14px; }
.cert-preview h3{ font-size:24px; margin-bottom:10px; }
.cert-preview .cert-scope{ font-family: var(--f-mono); font-size:12px; color: var(--ink-dim); letter-spacing:.03em; margin-bottom:26px; }
.cert-preview .cert-meta{
  display:flex; justify-content:center; gap:36px; padding-block:22px; margin-bottom:26px;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.cert-preview .cert-meta div{ text-align:center; }
.cert-preview .cert-meta b{ display:block; font-family:var(--f-mono); font-size:13px; color:var(--gold-bright); margin-bottom:4px; }
.cert-preview .cert-meta span{ font-size:10.5px; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; }
.cert-preview .cert-note{ font-size:12.5px; color: var(--ink-faint); line-height:1.7; max-width:360px; margin:0 auto; }
.cert-preview .cert-actions{ margin-top:26px; }

/* ===================================================================
   RTL FIXES (Arabic / dir="rtl")
   Некоторые декоративные изображения были расположены через жёстко
   заданные left/right и margin-left:auto — в RTL текстовый блок
   (.tile-copy, .section-head) автоматически перетекает на
   противоположную сторону, а картинка оставалась на месте и
   накладывалась поверх текста. Здесь зеркалим позицию картинки/градиента,
   чтобы текст и изображение всегда были по разные стороны.
=================================================================== */

/* Плитки "Штампованные / Литые слитки" на главной */
html[dir="rtl"] .collection-tile .tile-bg img{
  right:auto; left:6%;
}
html[dir="rtl"] .collection-tile .tile-bg::after{
  background: linear-gradient(260deg, var(--bg-deep) 0%, rgba(11,11,12,.88) 38%, rgba(11,11,12,.35) 62%, transparent 88%);
}

/* Плитка "Гранулы" (широкая, с фото на весь блок) на главной */
html[dir="rtl"] .tile-bg img.granule-tile-photo{
  margin-left:0; margin-right:auto;
}

/* Иллюстрация рядом с заголовком блока "Услуги" (index + services.html) */
html[dir="rtl"] .services-art{
  left:auto; right:73%; transform:translateX(50%);
}

/* Мелкие декоративные бейджи/иконки в углах — зеркалим для аккуратности */
html[dir="rtl"] .metal-card .thumb{ right:auto; left:22px; }
html[dir="rtl"] .product-visual .product-badge{ left:auto; right:20px; }
html[dir="rtl"] .map-caption{ left:auto; right:20px; }
html[dir="rtl"] .about-figure .frame-caption{ left:auto; right:20px; }

/* ===================================================================
   RESPONSIVE (moved to end of file on purpose — CSS source order matters:
   these overrides must come AFTER the base component rules such as
   .collections-grid, .services-grid, .accred-grid, .location-grid, etc.,
   otherwise those later, higher-in-source base rules win over the
   mobile overrides even though the media query matches. Keep this
   block last when adding new component styles above.)
=================================================================== */
html{ overflow-x:hidden; }

@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-visual{ height:460px; order:-1; margin-bottom:10px;}
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:50px; }
  .process-cols{ grid-template-columns:1fr; }
  .metal-grid{ grid-template-columns:1fr 1fr; }
  .trust-grid{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .collections-grid, .services-grid{ grid-template-columns:1fr; }
  .accred-grid{ grid-template-columns: repeat(3,1fr); }
  .location-grid{ grid-template-columns:1fr; gap:44px; }
}
@media (max-width: 900px){
  /* Collection tiles (Stamped / Cast / Granules): the desktop design
     overlays the copy on top of a background bar image, which only works
     when the tile is wide enough. Below this width there isn't enough
     room for both the text and the image side by side — especially with
     longer Russian/Arabic translations — so switch to a simple stacked
     layout — image box on top, full-width text below — instead of
     shrinking the overlay copy column until it collides with the bar. */
  .collection-tile{
    min-height:0; padding:0;
    flex-direction:column; justify-content:flex-start;
  }
  .collection-tile .tile-bg{
    position:relative; inset:auto; height:200px;
    padding-top:22px; padding-inline-end:22px; justify-content:flex-end;
  }
  .collection-tile .tile-bg::after{ display:none; }
  .collection-tile .tile-bg svg{ width:44%; }
  .collection-tile .tile-bg img{
    position:static; transform:none; right:auto; top:auto;
    height:100%; max-width:58%;
  }
  .tile-bg img.granule-tile-photo{ width:56%; margin:0 !important; }
  .collection-tile .tile-copy{ max-width:100%; padding:24px 26px 28px; }
  .collection-tile p{ max-width:100%; }

  /* Small expand icon over the tile image — the bar photo is quite
     small in this stacked layout, so let visitors tap to view it full
     size instead of only being able to see it on the product page. */
  .tile-zoom{ display:flex; }
}
@media (max-width: 640px){
  section{ padding:88px 0; }
  .hero{ padding-top: calc(var(--header-h, 100px) + 20px); }
  .hero-stats{ gap:26px; flex-wrap:wrap; }
  .metal-grid{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:40px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .accred-grid{ grid-template-columns: repeat(2,1fr); }
  .collection-tile .tile-bg{ height:180px; }

  /* Header content (burger + logo + lang-switch + CTA button) is too wide
     to fit a single row on phone screens — the lang-switch and the CTA
     button are both dropped here (they're not needed in the header: the
     drawer covers navigation, and contact CTAs already appear throughout
     the page content), leaving the full row for the logo. */
  .site-header{ padding-inline: 16px; }
  .header-actions{ gap:10px; }
  .header-actions .lang-switch{ display:none; }
  .header-actions .btn-primary{ display:none; }
  .brand{ gap:8px; }
  .brand-mark{ height:80px; }
  .brand-text{ font-size:19px; }
  .brand-sub{ font-size:12px; }

  /* Fixed header must never exceed the viewport width on phones */
  .site-header{ width:100%; overflow:hidden; }
}
@media (max-width: 480px){
  .collection-tile .tile-bg{ height:150px; }
  .collection-tile h3{ font-size:24px; }
  .service-card{ padding:30px 22px; }
  .accred-grid{ grid-template-columns: repeat(2,1fr); }

  /* Header: keep the subtitle visible but tighten logo/text sizes
     further so everything still fits comfortably on one row. */
  .site-header{ padding-inline: 12px; }
  .brand{ gap:6px; }
  .brand-mark{ height:80px; }
  .brand-sub{ font-size:11px; letter-spacing:.08em; }
  .brand-text{ font-size:18px; }
}
@media (max-width: 340px){
  /* Very old/narrow phones (iPhone SE 1st gen and similar, ~320px):
     a 100px-tall logo is simply too wide to fit at this width no matter
     how much text shrinks, so scale it down only here as a last-resort
     safety net against overlap. */
  .brand-mark{ height:50px; }
  .brand{ gap:4px; }
}