/* ============================================
   FABNEXIS — DESIGN SYSTEM
   Palette:
     --navy-950: #081B33  (deepest ground)
     --navy-900: #0E2A4A  (primary brand)
     --navy-700: #1B3F66  (raised panels)
     --steel-300: #C7D0D9 (cool steel)
     --steel-100: #F5F7F9 (off-white bg)
     --gold-500:  #D4A017 (brand gold)
     --gold-300:  #F0C040 (gold highlight)
     --ink-900:   #0A0E14 (near black text)
   Type:
     Display: "Oswald" (condensed, steel-stamp)
     Body:    "Inter"
     Mono/Data: "JetBrains Mono"
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --navy-950:#081B33;
  --navy-900:#0E2A4A;
  --navy-800:#143659;
  --navy-700:#1B3F66;
  --navy-600:#274C77;
  --steel-300:#C7D0D9;
  --steel-200:#DCE3E9;
  --steel-100:#F5F7F9;
  --gold-600:#B8860B;
  --gold-500:#D4A017;
  --gold-400:#E3B530;
  --gold-300:#F0C859;
  --ink-900:#0A0E14;
  --ink-700:#2A3440;
  --white:#FFFFFF;

  --display: 'Oswald', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --container: 1240px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIHgxPSIxMCUiIHkxPSI1JSIgeDI9Ijg1JSIgeTI9Ijk1JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGOERFOTYiLz4KPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNENEEwMTciLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOEM2QTBFIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPHBhdGggZD0iTTUgMy42IEwyNSAxMy40IEwxNS4yIDE2LjEgTDEyLjQgMjUuNiBaIiBmaWxsPSIjMDgxQjMzIiBvcGFjaXR5PSIwLjE4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjgsMS4zKSIvPgo8cGF0aCBkPSJNNCAyLjUgTDI0LjUgMTMgTDE0LjUgMTUuNyBMMTEuOCAyNSBaIiBmaWxsPSJ1cmwoI2cxKSIvPgo8cGF0aCBkPSJNNCAyLjUgTDI0LjUgMTMgTDE0LjUgMTUuNyBaIiBmaWxsPSIjRkZGRkZGIiBvcGFjaXR5PSIwLjI4Ii8+CjxwYXRoIGQ9Ik00IDIuNSBMMTQuNSAxNS43IEwxMS44IDI1IFoiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjAuMSIvPgo8L3N2Zz4K') 2 2, auto;
}
a, button, .btn, .filter-btn, .nav-toggle, input[type="submit"], select, .gallery-item, .card, .prod-card, .svc, .office-card, .back-to-top, .fp-card .fp-expand-cta, .legal-details summary{
  cursor:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0iZzIiIHgxPSIxMCUiIHkxPSI1JSIgeDI9Ijg1JSIgeTI9Ijk1JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGQ0VBQjgiLz4KPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNGMEM4NTkiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjQTk3OTBGIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPHBhdGggZD0iTTUuNiA0LjEgTDI4LjYgMTUuNiBMMTcuMSAxOC44IEwxMy45IDMwIFoiIGZpbGw9IiMwODFCMzMiIG9wYWNpdHk9IjAuMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC45LDEuNSkiLz4KPHBhdGggZD0iTTQuNSAzIEwyOCAxNC41IEwxNi41IDE3LjcgTDEzLjMgMjguNSBaIiBmaWxsPSJ1cmwoI2cyKSIvPgo8cGF0aCBkPSJNNC41IDMgTDI4IDE0LjUgTDE2LjUgMTcuNyBaIiBmaWxsPSIjRkZGRkZGIiBvcGFjaXR5PSIwLjMyIi8+CjxwYXRoIGQ9Ik00LjUgMyBMMTYuNSAxNy43IEwxMy4zIDI4LjUgWiIgZmlsbD0iIzAwMDAwMCIgb3BhY2l0eT0iMC4xIi8+Cjwvc3ZnPgo=') 2 2, pointer;
}
body{
  font-family:var(--body);
  color:var(--ink-700);
  background:var(--steel-100);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

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

/* ---------- Layout helpers ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 28px; }
.section{ padding:96px 0; position:relative; }
.section--tight{ padding:64px 0; }
.section--dark{ background:var(--navy-950); color:var(--steel-200); }
.section--navy{ background:var(--navy-900); color:var(--steel-200); }
.section--alt{ background:var(--white); }

.grid{ display:grid; gap:28px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
/* Global Sourcing Network: fill left column top-to-bottom first, then right column,
   so the visual left/right grouping matches the intended country order exactly. */
.sourcing-grid{ grid-auto-flow:column; grid-template-rows:repeat(3,auto); }
@media (max-width:980px){
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .sourcing-grid{ grid-auto-flow:row; grid-template-rows:none; }
}
@media (min-width:981px) and (max-width:1180px){
  .g4{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Eyebrow / Headings ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-500);
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
  font-weight:500;
}
.eyebrow::before{
  content:''; display:block; width:28px; height:2px; background:var(--gold-500);
}
.section--dark .eyebrow, .section--navy .eyebrow{ color:var(--gold-300); }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.15;
  color:var(--navy-900);
}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{ color:var(--white); }

h1{ font-size:clamp(2.6rem,5.6vw,4.6rem); font-weight:700; }
h2{ font-size:clamp(2rem,3.6vw,3rem); }
h3{ font-size:1.45rem; }
h4{ font-size:1.05rem; letter-spacing:.06em; }

.lede{ font-size:1.15rem; color:var(--ink-700); max-width:640px; }
.section--dark .lede, .section--navy .lede{ color:var(--steel-300); }

/* Consistent spacing rhythm: heading -> paragraph, paragraph -> paragraph */
h1 + p, h1 + .lede,
h2 + p, h2 + .lede,
h3 + p, h3 + .lede,
h4 + p, h4 + .lede{ margin-top:18px; }
p + p{ margin-top:14px; }

.section-head{ max-width:760px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .eyebrow::before{ display:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; font-size:.85rem;
  padding:16px 32px;
  border-radius:2px;
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.btn--gold{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:var(--navy-950);
  box-shadow:0 8px 24px -8px rgba(212,160,23,.55);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(212,160,23,.7); }
.btn--ghost{
  border:1px solid rgba(255,255,255,.35); color:var(--white);
  background:rgba(255,255,255,.04);
}
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:var(--gold-400); }
.btn--navy{
  border:1px solid var(--navy-900); color:var(--navy-900);
}
.btn--navy:hover{ background:var(--navy-900); color:var(--white); }
.btn--sm{ padding:12px 22px; font-size:.75rem; }
.btn svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

/* ============================================
   HEADER / NAV
   ============================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0;
  transition:padding .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  background:transparent;
}
.site-header.scrolled{
  padding:12px 0;
  box-shadow:0 4px 30px -10px rgba(0,0,0,.5);
  border-bottom:1px solid rgba(212,160,23,.18);
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(8,27,51,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .35s var(--ease);
}
.site-header.scrolled::before{ opacity:1; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:42px; width:auto; }
.brand-text{ font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--white); letter-spacing:.08em; }
.brand-text span{ color:var(--gold-400); }

.nav-links{ display:flex; align-items:center; gap:8px; }
.nav-links a{
  font-family:var(--display); font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  font-size:.82rem; color:var(--steel-200); padding:10px 16px; position:relative;
  transition:color .2s, transform .2s var(--ease);
}
.nav-links a:not(.nav-cta):hover, .nav-links a:not(.nav-cta).active{ color:var(--gold-400); transform:translateY(-2px); }
.nav-links a.active:not(.nav-cta)::after{
  content:''; position:absolute; bottom:2px; left:16px; right:16px; height:2px; background:var(--gold-400);
}
.nav-cta{ margin-left:8px; transition:transform .2s var(--ease), box-shadow .25s var(--ease); }
.nav-cta:hover, .nav-cta.active{ transform:translateY(-2px); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:28px; }
.nav-toggle span{ display:block; height:2px; background:var(--white); border-radius:2px; transition:.3s; }

@media (max-width:980px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:0; top:64px; background:var(--navy-950);
    flex-direction:column; justify-content:center; gap:18px;
    transform:translateX(100%); transition:transform .35s var(--ease);
    padding:40px;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1.2rem; }
}

/* ============================================
   TICKER — signature element
   ============================================ */
.ticker{
  background:var(--navy-950);
  border-top:1px solid rgba(212,160,23,.25);
  border-bottom:1px solid rgba(212,160,23,.25);
  overflow:hidden;
  position:relative;
  white-space:nowrap;
}
.ticker::before, .ticker::after{
  content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.ticker::before{ left:0; background:linear-gradient(90deg,var(--navy-950),transparent); }
.ticker::after{ right:0; background:linear-gradient(-90deg,var(--navy-950),transparent); }
.ticker-track{
  display:inline-flex; gap:0;
}
.ticker-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  display: inline-block;
  flex-shrink: 0;
}
.ticker-item{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:.82rem; color:var(--steel-300);
  padding:13px 36px;
  letter-spacing:.04em;
}
.ticker-item b{ color:var(--gold-400); font-weight:600; }

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  color:var(--white); overflow:hidden; background:var(--navy-950);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-media video{ opacity:0; transition:opacity 1.4s ease; }
.hero-media video.active{ opacity:1; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,27,51,.55) 0%, rgba(8,27,51,.65) 45%, rgba(8,27,51,.95) 100%),
    linear-gradient(100deg, rgba(8,27,51,.85) 0%, rgba(8,27,51,.35) 55%, rgba(8,27,51,.65) 100%);
}
.hero-content{ position:relative; z-index:2; padding-top:120px; padding-bottom:60px; width:100%; }
.hero-tag{
  font-family:var(--mono); font-size:.85rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:22px; display:flex; align-items:center; gap:14px;
}
.hero-tag::before{ content:''; width:42px; height:1px; background:var(--gold-400); }
.hero h1{
  color:var(--white); max-width:920px; margin-bottom:24px;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.hero h1 em{ font-style:normal; color:var(--gold-400); }
.hero .lede{ color:var(--steel-200); font-size:1.2rem; max-width:580px; margin-bottom:40px; }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:64px; }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:32px; max-width:1000px;
}
.hero-stat{ padding-right:14px; }
.hero-stat:last-child{ border-right:none; }
.hero-stat .num{ font-family:var(--display); font-size:2.2rem; font-weight:700; color:var(--white); }
.hero-stat .num span{ color:var(--gold-400); }
.hero-stat .lbl{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-300); margin-top:4px; }

@media (max-width:980px){
  .hero-stats{ grid-template-columns:repeat(2,1fr); gap:24px; }
  .hero-stat{ border-right:none; padding-right:0; }
}

/* ============================================
   CARDS — products / services
   ============================================ */
.card{
  background:var(--white);
  border:1px solid var(--steel-200);
  transition:all .3s var(--ease);
  position:relative;
  overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -24px rgba(8,27,51,.35); border-color:var(--gold-400); }
.card-media{ aspect-ratio:4/3; overflow:hidden; position:relative; background:var(--navy-900); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .card-media img{ transform:scale(1.07); }
.card-media .badge{
  position:absolute; top:14px; left:14px; background:var(--navy-950); color:var(--gold-400);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; padding:6px 12px; text-transform:uppercase;
}
.card-body{ padding:24px; }
.card-body h3{ font-size:1.15rem; margin-bottom:8px; color:var(--navy-900); }
.card-body .spec{ font-family:var(--mono); font-size:.82rem; color:var(--ink-700); opacity:.75; margin-bottom:12px; }
.card-body p{ font-size:.92rem; color:var(--ink-700); opacity:.85; }
.card-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; border-top:1px solid var(--steel-200);
  font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
}
.card-foot .stock{ color:#1a7a3a; display:flex; align-items:center; gap:6px; }
.card-foot .stock::before{ content:''; width:7px; height:7px; border-radius:50%; background:#1a7a3a; }
.card-foot a{ color:var(--navy-700); font-weight:600; }
.card-foot a:hover{ color:var(--gold-600); }

/* ============================================
   PROCESS / NUMBERED STEPS
   ============================================ */
.process{ display:flex; flex-direction:column; }
.process-step{
  display:grid; grid-template-columns:120px 1fr; gap:32px;
  padding:36px 0; border-bottom:1px solid rgba(255,255,255,.08);
  align-items:start;
}
.process-step:last-child{ border-bottom:none; }
.process-step .step-num{
  font-family:var(--display); font-size:3.4rem; font-weight:700; color:transparent;
  -webkit-text-stroke:1.5px var(--gold-400); line-height:1;
}
.process-step h3{ margin-bottom:8px; }
.process-step p{ color:var(--steel-300); max-width:560px; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial{
  background:var(--white); border-left:3px solid var(--gold-500);
  padding:32px; height:100%;
}
.testimonial p{ font-size:1.02rem; color:var(--ink-700); margin-bottom:20px; font-style:italic; }
.testimonial .who b{ display:block; font-family:var(--display); font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; color:var(--navy-900); }
.testimonial .who span{ font-family:var(--mono); font-size:.78rem; color:var(--gold-600); }
.cert-card {
  border: 1px solid rgba(212,160,23,.2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--navy-900);
  display: flex;
  flex-direction: column;
}
.cert-card img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: transform .4s ease;
}
.cert-card img:hover { transform: scale(1.03); }
.cert-card figcaption {
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--steel-300);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-top: 1px solid rgba(212,160,23,.15);
}

/* ============================================
   LOGO STRIP / TRUST BAR
   ============================================ */
.trustbar{
  display:flex; flex-wrap:wrap; gap:36px; align-items:center; justify-content:space-between;
  padding:28px 0; border-top:1px solid var(--steel-200); border-bottom:1px solid var(--steel-200);
}
.trustbar .item{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-700); opacity:.6;
  display:flex; align-items:center; gap:10px;
}
.trustbar .item svg{ width:18px; height:18px; opacity:.7; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer{ background:var(--navy-950); color:var(--steel-300); padding-top:80px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-grid h4{ color:var(--white); font-size:.85rem; letter-spacing:.14em; margin-bottom:20px; }
.footer-grid ul li{ margin-bottom:10px; font-size:.92rem; }
.footer-grid ul a:hover{ color:var(--gold-400); }
.footer-bottom a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:1px; }
.footer-bottom a:hover{ color:var(--gold-400); border-color:var(--gold-400); }
.footer-brand .brand{ margin-bottom:18px; }
.footer-brand p{ font-size:.92rem; max-width:320px; color:var(--steel-300); margin-bottom:20px; }
.footer-locations{ display:flex; flex-direction:column; gap:14px; }
.footer-locations .loc{ font-size:.88rem; }
.footer-locations .loc b{ color:var(--white); display:block; font-family:var(--display); letter-spacing:.06em; font-size:.85rem; margin-bottom:2px; }
.social-row{ display:flex; gap:12px; margin-top:8px; }
.social-row a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.18); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:.25s;
}
.social-row a:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-950); }
.social-row svg{ width:16px; height:16px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding:24px 0;
  font-size:.8rem; color:var(--steel-300); opacity:.7; flex-wrap:wrap; gap:12px;
}
@media (max-width:980px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ============================================
   PAGE HEADER (sub-pages)
   ============================================ */
.page-hero{
  position:relative; padding:200px 0 80px; color:var(--white);
  background:linear-gradient(135deg,var(--navy-950),var(--navy-800));
  overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0; opacity:.12;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 38px, var(--gold-400) 38px 39px);
}
.page-hero .breadcrumb{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel-300); margin-bottom:18px; position:relative; z-index:1;
}
.page-hero .breadcrumb b{ color:var(--gold-400); }
.page-hero h1{ color:var(--white); position:relative; z-index:1; }
.page-hero p{ position:relative; z-index:1; max-width:680px; color:var(--steel-300); margin-top:18px; font-size:1.08rem; }

/* ============================================
   UTILITIES
   ============================================ */
.tag{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-700);
  background:var(--steel-200); padding:6px 14px; border-radius:2px;
}
.divider{ height:1px; background:var(--steel-200); margin:64px 0; }
.section--dark .divider, .section--navy .divider{ background:rgba(255,255,255,.1); }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:980px){ .split{ grid-template-columns:1fr; gap:40px; } }

.img-frame{ position:relative; border:1px solid var(--steel-200); }
.img-frame::before{
  content:''; position:absolute; top:-12px; left:-12px; width:64px; height:64px;
  border-top:2px solid var(--gold-500); border-left:2px solid var(--gold-500); z-index:1;
}
.img-frame::after{
  content:''; position:absolute; bottom:-12px; right:-12px; width:64px; height:64px;
  border-bottom:2px solid var(--gold-500); border-right:2px solid var(--gold-500); z-index:1;
}

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============================================
   CEO / CHAIRMAN CARD (About page)
   ============================================ */
.ceo-frame{
  aspect-ratio:4/5; overflow:hidden; display:flex; flex-direction:column;
  background:linear-gradient(160deg,var(--navy-900),var(--navy-700));
  color:#fff; padding:40px; text-align:center; align-items:center; justify-content:center;
}
.ceo-visual{ display:flex; align-items:center; justify-content:center; margin-bottom:24px; }
/* Renders as a refined circular portrait — works for the placeholder graphic now,
   and for the real photo the moment assets/img/ceo_photo.png is replaced. */
.ceo-photo{
  width:160px; height:160px; border-radius:50%; object-fit:cover;
  border:3px solid var(--gold-500); box-shadow:0 12px 32px -8px rgba(0,0,0,.5);
}
.ceo-caption{ display:flex; flex-direction:column; align-items:center; }

/* CTA band */
.cta-band{
  background:linear-gradient(120deg,var(--navy-950) 0%, var(--navy-800) 100%);
  color:var(--white); padding:80px 0; position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; right:-120px; top:-120px; width:400px; height:400px;
  border-radius:50%; background:radial-gradient(circle,rgba(212,160,23,.18),transparent 70%);
}
.cta-band-inner{ display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; position:relative; z-index:1; }
.cta-band h2{ color:var(--white); margin-bottom:8px; }
.cta-band p{ color:var(--steel-300); }
.cta-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* Filter bar (products page) */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px; }
.filter-btn{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 20px; border:1px solid var(--steel-200); background:var(--white); color:var(--ink-700);
  transition:.2s var(--ease);
}
.filter-btn:hover{ border-color:var(--gold-500); transform:translateY(-2px); }
.filter-btn.active{ background:var(--navy-900); color:var(--white); border-color:var(--navy-900); transform:translateY(-2px); }

/* Category section anchors */
.cat-section{ padding:72px 0; border-bottom:1px solid var(--steel-200); scroll-margin-top:88px; }
.cat-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.cat-head .tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery-item{ position:relative; overflow:hidden; aspect-ratio:1; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item .overlay{
  position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(8,27,51,.9));
  display:flex; align-items:flex-end; padding:18px; opacity:0; transition:.3s;
}
.gallery-item:hover .overlay{ opacity:1; }
.gallery-item .overlay span{ font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-400); }
@media (max-width:980px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .gallery-grid{ grid-template-columns:1fr; } }

/* Forms */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-300); }
.field input, .field select, .field textarea{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18); color:var(--white);
  padding:14px 16px; font-family:var(--body); font-size:.95rem; border-radius:2px;
  transition:.2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold-400); background:rgba(255,255,255,.08);
}
.field select option{ background:var(--navy-900); }
@media (max-width:780px){ .form-grid{ grid-template-columns:1fr; } }

/* Contact cards */
.contact-card{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); padding:28px;
}
.contact-card h4{ color:var(--gold-400); margin-bottom:14px; }
.contact-card p{ color:var(--steel-300); font-size:.92rem; margin-bottom:6px; }
.contact-card a{ color:var(--white); }
.contact-card a:hover{ color:var(--gold-400); }

/* Map placeholder */
.map-wrap{ position:relative; aspect-ratio:16/8; overflow:hidden; border:1px solid rgba(255,255,255,.1); }
.map-wrap iframe{ width:100%; height:100%; border:0; filter:grayscale(.3) contrast(1.1); }

/* Badges row */
.badge-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }
.badge-row .b{
  display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.06em; padding:10px 16px; border:1px solid var(--steel-200); color:var(--navy-900);
}
.badge-row .b svg{ width:18px; height:18px; color:var(--gold-500); }

/* Animated counter underline accent */
.accent-line{ width:48px; height:3px; background:var(--gold-500); margin:18px 0; }

/* ============================================
   BACK TO TOP
   ============================================ */
.back-to-top{
  position:fixed; bottom:28px; right:28px; z-index:998;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:var(--navy-950);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -8px rgba(212,160,23,.55);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), box-shadow .25s var(--ease), visibility .3s;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ box-shadow:0 12px 28px -8px rgba(212,160,23,.75); transform:translateY(-3px); }
.back-to-top svg{ width:22px; height:22px; }
/* Sit above the WhatsApp float button on the contact page so the two never overlap */
body:has(.wa-float) .back-to-top{ bottom:98px; }
@media (max-width:620px){
  .back-to-top{ width:44px; height:44px; bottom:20px; right:20px; }
  .back-to-top svg{ width:18px; height:18px; }
  body:has(.wa-float) .back-to-top{ bottom:84px; }
}

/* ============================================
   LEGAL PAGES — Terms of Service / Privacy Policy
   ============================================ */
.legal-section{ padding-top:64px; }
.legal-toc{
  background:var(--white); border:1px solid var(--steel-200);
  padding:28px 32px; margin-bottom:48px;
}
.legal-toc h4{ color:var(--navy-900); font-size:.85rem; letter-spacing:.1em; margin-bottom:16px; }
.legal-toc ol{ list-style:none; columns:2; column-gap:32px; counter-reset:toc; }
.legal-toc li{ counter-increment:toc; margin-bottom:10px; font-size:.88rem; break-inside:avoid; }
.legal-toc li a{ color:var(--ink-700); }
.legal-toc li a::before{ content:counter(toc) ". "; color:var(--gold-600); font-weight:700; font-family:var(--mono); }
.legal-toc li a:hover{ color:var(--gold-600); }
@media (max-width:680px){ .legal-toc ol{ columns:1; } }

.legal-block{ max-width:780px; margin:0 auto 56px; scroll-margin-top:88px; }
.legal-block:last-child{ margin-bottom:0; }
.legal-block h2{ font-size:1.5rem; color:var(--navy-900); margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--steel-200); }
.legal-block h3{ font-size:1.05rem; color:var(--navy-900); margin-top:24px; margin-bottom:10px; }
.legal-block p{ font-size:.96rem; color:var(--ink-700); margin-bottom:14px; }
.legal-block ul{ margin:0 0 14px 0; }
.legal-block ul li{
  font-size:.95rem; color:var(--ink-700); padding-left:22px; position:relative; margin-bottom:8px;
}
.legal-block ul li::before{ content:'—'; position:absolute; left:0; color:var(--gold-600); }
.legal-meta{
  display:flex; gap:24px; flex-wrap:wrap; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold-600);
  max-width:780px; margin:0 auto 40px; padding-bottom:24px; border-bottom:1px solid var(--steel-200);
}

/* Collapsible Terms of Service / Privacy Policy body */
.legal-details{ max-width:780px; margin:0 auto; }
.legal-details summary{ list-style:none; }
.legal-details summary::-webkit-details-marker{ display:none; }
.legal-summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:var(--white); border:1px solid var(--steel-200); padding:22px 26px;
  cursor:pointer; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.legal-summary:hover{ border-color:var(--gold-400); box-shadow:0 10px 28px -16px rgba(14,42,74,.25); }
.legal-summary-text{ display:flex; flex-direction:column; gap:4px; }
.legal-summary-title{ font-weight:700; color:var(--navy-900); font-size:1rem; }
.legal-summary-sub{ font-size:.82rem; color:var(--ink-700); }
.legal-summary-chevron{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  background:var(--steel-100); display:flex; align-items:center; justify-content:center;
  color:var(--gold-600); transition:transform .3s var(--ease), background .25s var(--ease);
}
.legal-summary-chevron svg{ width:18px; height:18px; }
.legal-details[open] .legal-summary-chevron{ transform:rotate(180deg); background:var(--gold-500); color:var(--navy-950); }
.legal-details[open] .legal-summary{ border-bottom-color:transparent; }
.legal-details-body{
  padding-top:40px;
  animation:legalFadeIn .4s var(--ease);
}
@keyframes legalFadeIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }