/* =========================================================
   MEGA OPTICS — design tokens
   Grounded in the subject: precision lens manufacturing.
   Signature motif: the aperture ring (concentric circles +
   tick marks), standing in for a lens viewed head-on.
   ========================================================= */
:root{
  --ink:        #12181F;   /* near-black, header/footer */
  --ink-soft:   #1C2530;
  --paper:      #F7F5F0;   /* warm off-white page bg */
  --paper-dim:  #EFEBE2;   /* subtle darker tone for isolated bands */
  --teal:       #1F6F78;   /* primary brand — coated-lens blue-green */
  --teal-dark:  #144A50;
  --amber:      #E2A63B;   /* focus / highlight accent, used sparingly */
  --slate:      #4B5A66;
  --text:       #1B2530;
  --line:       #DBD5C8;
  --line-dark:  #2B3540;
  --radius:     2px;
  --max:        1180px;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  line-height:1.6;
  font-size:16px;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--teal-dark); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; color:var(--ink); line-height:1.15; margin:0 0 .5em; }
h1{ font-size:2.6rem; }
h2{ font-size:1.9rem; }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
.container{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; font-weight:700; color:var(--teal); display:inline-block; margin-bottom:.6em;
}
:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

/* ---------- aperture ring signature ---------- */
.ring{
  border-radius:50%; border:1px solid var(--line-dark);
}
.aperture{ position:relative; }
.aperture svg{ display:block; width:100%; height:auto; }

/* ---------- top utility bar ---------- */
.topbar{
  background:var(--ink); color:#C9CDD2; font-size:.82rem;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px; }
.topbar a{ color:#C9CDD2; }
.topbar a:hover{ color:#fff; }
.topbar .tb-contacts{ display:flex; gap:20px; flex-wrap:wrap; }
.topbar .tb-social a{ margin-left:14px; }

/* ---------- header / nav ---------- */
.site-header{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.header-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:46px; width:auto; }
.brand-word{ font-family:var(--font-display); font-size:1.35rem; color:var(--ink); letter-spacing:.02em; }
.brand-word span{ color:var(--teal); }
.brand-tag{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); display:block; margin-top:2px; }

.mo-nav{ }
.mo-nav ul{ list-style:none; display:flex; gap:2px; margin:0; padding:0; }
.mo-nav a{
  display:block; padding:10px 16px; color:var(--ink); font-weight:600; font-size:.92rem;
  letter-spacing:.02em; border-bottom:2px solid transparent;
}
.mo-nav a:hover, .mo-nav li.current a, .mo-nav li.active a{ color:var(--teal); border-bottom-color:var(--teal); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line-dark); border-radius:var(--radius); padding:8px 10px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:var(--ink); position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-7px; } .nav-toggle span::after{ position:absolute; top:7px; }

@media (max-width:900px){
  .nav-toggle{ display:inline-block; }
  .mo-nav{ position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--line); display:none; }
  .mo-nav.open{ display:block; }
  .mo-nav ul{ flex-direction:column; padding:8px 24px 16px; }
}

/* ---------- hero (home only) ---------- */
.hero{ background:var(--ink); color:#EDEBE4; overflow:hidden; }
.hero .container{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding-top:64px; padding-bottom:64px; }
.hero h1{ color:#fff; }
.hero .eyebrow{ color:var(--amber); }
.hero p.lead{ color:#B9C0C6; font-size:1.08rem; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.hero-visual{ position:relative; }
.hero-visual .ring-anim{ transform-origin:center; animation:spin 60s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (max-width:900px){
  .hero .container{ grid-template-columns:1fr; padding-top:40px; padding-bottom:40px; }
  .hero-visual{ order:-1; max-width:280px; margin:0 auto; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:12px 26px; font-weight:700; font-size:.9rem; letter-spacing:.02em;
  border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-dark); color:#fff; }
.btn-outline{ background:transparent; color:#fff; border-color:#5C6874; }
.btn-outline:hover{ border-color:#fff; color:#fff; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }

/* ---------- page banner (inner pages) ---------- */
.page-banner{ background:var(--ink); color:#fff; padding:34px 0; }
.page-banner .eyebrow{ color:var(--amber); }
.page-banner h1{ color:#fff; margin:0; font-size:1.9rem; }
.breadcrumb{ background:var(--paper-dim); border-bottom:1px solid var(--line); font-size:.85rem; padding:10px 0; color:var(--slate); }
.breadcrumb a{ color:var(--slate); }
.breadcrumb a:hover{ color:var(--teal); }
.breadcrumb nav, .breadcrumb ol, .breadcrumb ul{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:0; margin:0;
}
.breadcrumb li{ list-style:none; display:flex; align-items:center; gap:6px; }
.breadcrumb li:not(:last-child)::after{ content:"/"; margin-left:6px; color:var(--slate); }
.breadcrumb li:first-child:empty,
.breadcrumb li:first-child:not(:has(a)):not(:has(span:not(:empty))){ display:none; }
.breadcrumb svg, .breadcrumb i[class*="icon"]{ display:none; }

/* ---------- section rhythm ---------- */
.section{ padding:64px 0; }
.section-tight{ padding:40px 0; }
.section-alt{ background:var(--paper-dim); }
.section-dark{ background:var(--ink); color:#D9DCDF; }
.section-dark h2{ color:#fff; }
.section-head{ max-width:640px; margin-bottom:36px; }
.divider-ring{ display:flex; align-items:center; gap:10px; margin:8px 0 28px; }
.divider-ring::before, .divider-ring::after{ content:""; height:1px; background:var(--line-dark); flex:1; }

/* ---------- feature roundels (aperture icons) ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.feature{ text-align:left; }
.feature .roundel{
  width:60px; height:60px; border-radius:50%; border:1.5px solid var(--teal);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; position:relative;
}
.feature .roundel::before{ content:""; position:absolute; inset:6px; border:1px solid var(--line); border-radius:50%; }
.feature .roundel svg{ width:24px; height:24px; stroke:var(--teal); position:relative; }
.feature .roundel img{ width:24px; height:24px; position:relative; }
.feature h3{ font-size:1.05rem; margin-bottom:.4em; }
.feature p{ color:var(--slate); font-size:.94rem; }
@media (max-width:900px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }

/* ---------- numbered process (real sequence) ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:step; }
.process .step{ position:relative; padding:0 20px 0 0; border-right:1px dashed var(--line-dark); }
.process .step:last-child{ border-right:none; }
.process .step .num{
  font-family:var(--font-display); font-size:2.1rem; color:var(--amber); display:block; margin-bottom:8px;
}
.process .step h3{ font-size:1rem; color:#fff; }
.process .step p{ color:#AEB6BC; font-size:.9rem; }
@media (max-width:900px){
  .process{ grid-template-columns:1fr 1fr; row-gap:28px; }
  .process .step{ border-right:none; }
}
@media (max-width:560px){ .process{ grid-template-columns:1fr; } }

/* ---------- capability bars ---------- */
.bars{ display:flex; flex-direction:column; gap:18px; }
.bar-row .bar-label{ display:flex; justify-content:space-between; font-size:.85rem; font-weight:700; margin-bottom:6px; }
.bar-track{ background:var(--paper-dim); height:8px; border-radius:4px; overflow:hidden; }
.bar-fill{ background:var(--teal); height:100%; border-radius:4px; }

/* ---------- generic card grid (services / products) ---------- */
.mo-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; }
.mo-card{ background:#fff; border:1px solid var(--line); padding:26px; }
.mo-card h3{ font-size:1.08rem; }
.mo-card p{ color:var(--slate); font-size:.94rem; margin-bottom:0; }

.mo-product-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.mo-product-filters button{
  background:#fff; border:1px solid var(--line-dark); padding:8px 16px; font-size:.82rem; font-weight:700;
  letter-spacing:.02em; cursor:pointer; border-radius:var(--radius); color:var(--ink);
}
.mo-product-filters button.active, .mo-product-filters button:hover{ background:var(--teal); border-color:var(--teal); color:#fff; }

.mo-product-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
.mo-product{ border:1px solid var(--line); background:#fff; overflow:hidden; }
.mo-product .thumb{ aspect-ratio:1/1; overflow:hidden; background:var(--paper-dim); }
.mo-product .thumb img{ width:100%; height:100%; object-fit:cover; }
.mo-product .meta{ padding:14px 16px; }
.mo-product .meta .tag{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); font-weight:700; }
.mo-product .meta h4{ margin:.3em 0 0; font-family:var(--font-body); font-size:.98rem; color:var(--ink); }

/* ---------- office / contact cards ---------- */
.office-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.office-card{ background:#fff; border:1px solid var(--line); padding:24px; border-top:3px solid var(--teal); }
.office-card h3{ font-size:1.05rem; }
.office-card dl{ margin:14px 0 0; font-size:.92rem; }
.office-card dt{ font-weight:700; color:var(--slate); float:left; clear:left; width:60px; }
.office-card dd{ margin:0 0 8px 60px; }
@media (max-width:700px){ .office-grid{ grid-template-columns:1fr; } }

.mo-form{ display:grid; gap:14px; max-width:560px; }
.mo-form input, .mo-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line-dark); font-family:var(--font-body); font-size:.95rem; background:#fff;
}
.mo-form textarea{ min-height:130px; resize:vertical; }
.mo-form button{ justify-self:start; }
.map-frame{ border:1px solid var(--line); height:340px; }
.map-frame iframe{ width:100%; height:100%; border:0; }

/* ---- keep core Joomla component/contact output legible ---- */
#component .contact, #component .item-page{ max-width:800px; }
.contact-telephone dt, .contact-address dt, .contact-email dt{ font-weight:700; }
table{ width:100%; border-collapse:collapse; margin:1em 0; }
table th, table td{ border:1px solid var(--line); padding:8px 10px; text-align:left; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#AEB6BC; }
.footer-top{ padding:56px 0 30px; display:grid; grid-template-columns:1.3fr 1fr 1.2fr; gap:40px; border-bottom:1px solid var(--line-dark); }
.footer-top h4{ color:#fff; font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:16px; }
.footer-top p{ font-size:.92rem; }
.footer-top ul{ list-style:none; margin:0; padding:0; }
.footer-top li{ margin-bottom:9px; }
.footer-top a{ color:#AEB6BC; font-size:.92rem; }
.footer-top a:hover{ color:#fff; }
.footer-bottom{ padding:18px 0; display:flex; justify-content:space-between; align-items:center; font-size:.8rem; flex-wrap:wrap; gap:10px; }
.footer-bottom .social a{ margin-left:12px; color:#AEB6BC; }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- utility ---------- */
.mt-0{ margin-top:0; } .text-center{ text-align:center; }
.stack-lg > * + *{ margin-top:28px; }