/* Moldrite Products, Inc. - static one-page site (44ORANGE rebuild, Nov 2026).
   Written from scratch to match the look of the 2013 site. No theme code reused.
   Fonts: Open Sans (SIL OFL 1.1), self-hosted. Icons: Tabler Icons (MIT), inline SVG. */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-latin-700-italic.woff2") format("woff2"); }

:root {
  --header-h: 89px;
  --text: #4c4c4c;
  --heading: #404040;
  --muted: #666;            /* nav sub-labels (was #888; darkened for contrast) */
  --link: #0a6d9f;          /* body links (was #0b81be; darkened for contrast) */
  --nav-active: #15679c;    /* active menu item (was #2f96d8; darkened for contrast) */
  --accent: #37b1ff;        /* active menu bar, links on dark */
  --dark-bg: #212121;
  --dark-text: #dbdbdb;
  --dark-heading: #efefef;
  --light-bg: #eee;
  --noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --noise-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 6px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font: 400 13px/18px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--light-bg) var(--noise-light);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 20px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #08506f; text-decoration: underline; }
h1, h2, h3, h4, .h4 { font-weight: 600; color: var(--heading); margin: 0; }
.h4 { font-size: 17px; line-height: 24px; text-shadow: 0 1px 0 #fff; }
em { font-style: italic; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
  position: absolute; left: 10px; top: -60px; z-index: 2000;
  background: #fff; color: #000; padding: 8px 14px; border-radius: 3px; font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.skip-link:focus { top: 10px; }

.container { max-width: 960px; margin: 0 auto; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  border-top: 6px solid #4a4a4a;
  background: linear-gradient(to top, rgba(0,0,0,.06), rgba(0,0,0,0) 80px), var(--light-bg) var(--noise-light);
  border-bottom: 1px solid #ddd;
  box-shadow: 0 1px 0 #fff;
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.header-inner { display: flex; align-items: flex-start; justify-content: space-between; height: calc(var(--header-h) - 7px); padding: 0 10px; }
.logo { display: block; margin-top: 1px; }
.logo img { width: 350px; height: auto; }
.logo .logo-small { display: none; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.site-nav a {
  display: block; margin-top: -6px; padding: 18px 20px 0; height: calc(var(--header-h) - 3px);
  border-top: 3px solid #4a4a4a;
  font-weight: 600; font-size: 13px; line-height: 18px; color: #333;
  transition: border-color .2s, color .2s;
}
.site-nav a span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.site-nav a:hover { text-decoration: none; color: var(--nav-active); }
.site-nav a.active { color: var(--nav-active); border-top-color: var(--accent); }

.menu-toggle { display: none; }

/* ---------- Sections ---------- */
main { padding-top: var(--header-h); }
.section { padding: 40px 0; }
.section-home { padding: 14px 0 20px; }
.section-dark, .dark-texture { background: var(--dark-bg) var(--noise-dark); color: var(--dark-text); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--dark-heading); text-shadow: 0 2px 0 #000; }
.section-dark a { color: var(--accent); }
.section-dark a:hover { color: #8fd3ff; }

.row { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; padding: 0 10px; }
.titleset { padding: 0 10px; margin-bottom: 26px; }
.titleset h2 { font-size: 28px; line-height: 34px; text-shadow: 0 1px 0 #fff; }
.section-dark .titleset h2 { text-shadow: 0 2px 0 #000; }
.subheader { margin: 0; font-weight: 600; font-size: 13px; line-height: 19px; color: #555; }
.section-dark .subheader { color: #ccc; }

/* Hero box */
.hero {
  display: grid; grid-template-columns: 400px 1fr; gap: 20px; align-items: start;
  padding: 10px 10px 10px 0; border-radius: 5px; margin: 0 0 20px;
  box-shadow: 1px 1px 3px #fff;
}
.hero-text { padding: 12px 10px 0 30px; }
.hero h1 { font-size: 35px; line-height: 40px; color: var(--dark-heading); text-shadow: 0 2px 0 #000; margin: 0 0 10px; }
.hero p { color: var(--dark-text); }
.hero-cta { text-align: center; }

.button {
  display: inline-block; font-weight: 700; text-align: center; cursor: pointer;
}
.button:hover { text-decoration: none; }
.button-dark {
  min-width: 256px; padding: 7px 20px; border-radius: 18px;
  font-size: 14px; line-height: 21px; color: #ccc;
  background: #202020 linear-gradient(to bottom, rgba(255,255,255,.09), rgba(255,255,255,0));
  box-shadow: 0 1px 5px #000, inset 0 0 1px rgba(255,255,255,.2);
  text-shadow: 1px 1px 0 #000;
  transition: color .2s, background-color .2s;
}
a.button-dark:hover, .section-dark a.button-dark:hover { color: #fff; background-color: #2c2c2c; }
.button-light {
  padding: 4px 12px; border-radius: 3px; border: 1px solid #ccc;
  font-size: 11px; line-height: 21px; color: #555;
  background: #fff linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.09));
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 0 5px rgba(255,255,255,.7);
  text-shadow: 1px 1px 0 #fff;
}
.button-light:hover { color: #222; }

/* Slider: originals are 520x280. Larger replacements at the same 13:7 ratio
   can use the same file names; they are shown at the box size, never upscaled. */
.hero-media { justify-self: end; width: 100%; max-width: 520px; }
.slider { position: relative; }
.slides { list-style: none; margin: 0; padding: 0; position: relative; aspect-ratio: 520 / 280; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-controls { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; align-items: center; }
.slider-controls button {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; display: grid; place-items: center;
}
.slider-controls .dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.45); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.slider-controls .dot.is-active::before { background: #fff; }
.pause-icon { width: 10px; height: 10px; border-left: 3px solid #fff; border-right: 3px solid #fff; filter: drop-shadow(0 0 1px #000); }
.slider-pause.is-paused .pause-icon { border: 0; width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (prefers-reduced-motion: reduce) { .slide, .slide.is-active { transition: none; } }

/* Icon rows */
.headsets { grid-template-columns: repeat(3, 1fr); margin: 0 0 4px; padding-top: 6px; }
.headset { position: relative; padding-left: 70px; min-height: 48px; }
.headset .icon {
  position: absolute; left: 0; top: 0; width: 48px; height: 48px;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.headsets .icon { color: #111; filter: drop-shadow(0 1px 0 #fff); }
.headsets .h4 { margin: 0; }
.headsets p { margin: 0 0 20px; }
.section-dark .headset .icon { color: #fff; filter: drop-shadow(0 2px 0 #000); }
.section-dark h3 { font-size: 21px; line-height: 30px; margin: 0 0 4px; }
.row.cols-3 { grid-template-columns: repeat(3, 1fr); }

.divider {
  position: relative; height: 0; margin: 0 0 15px;
  border-top: 1px solid #ddd; border-bottom: 1px solid #fff;
}
.divider::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 40px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.06), rgba(0,0,0,0) 70%);
}

/* About + tabs */
.col-two-thirds h2.h4, .col-one-third h2.h4 { margin: 0; }
.tabs { margin: 0; }
.tab-list { display: flex; flex-wrap: wrap; border-bottom: 1px solid #ddd; }
.tab-list [role="tab"] {
  font: inherit; font-size: 13px; line-height: 30px; cursor: pointer;
  padding: 4px 20px 0; margin: 0 -1px -1px 0; position: relative; top: 0;
  border: 1px solid #ddd; border-radius: 3px 3px 0 0;
  background: #e8e8e8; color: var(--link);
}
.tab-list [role="tab"]:hover { color: #08506f; background: #f0f0f0; }
.tab-list [role="tab"][aria-selected="true"] { background: #f6f6f6; color: #111; border-bottom-color: #f6f6f6; z-index: 1; }
.tab-panels { background: #f6f6f6; border: 1px solid #ddd; border-top: 0; border-radius: 0 0 3px 3px; padding: 20px 10px 10px; }
.tab-panel[hidden] { display: none; }
ul.square { list-style: square; margin: 0 0 20px 30px; padding: 0; }
ul.square li { margin: 0 0 6px; }
.add-top { margin-top: 10px; }

/* Get started */
.start-text { padding: 0 10px; margin: 0; }

/* Contact */
.section-dark h4 { font-size: 14px; line-height: 21px; }
.section-dark .tel strong { color: #fff; }
.contact-actions { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 20px; }
.contact-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.section-dark a.contact-button { color: #ddd; }
.icon-sm { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map { margin: 0 0 20px; max-width: 280px; }
.map-link { display: block; }
.map-link img { border: 0; }
.map figcaption { margin-top: 4px; font-size: 11px; line-height: 16px; color: #bbb; text-align: right; }
.map figcaption a { color: #bbb; text-decoration: underline; text-underline-offset: 2px; }
.map figcaption a:hover { color: #fff; }
/* Links inside running text are underlined so they don't rely on color alone. */
p a.tel, .footer-center a { text-decoration: underline; text-underline-offset: 2px; }

/* Footer */
.site-footer { padding: 0 0 5px; }
.site-footer .divider { margin: 0 0 20px; }
.footer-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 10px; align-items: center; }
.footer-center { text-align: center; }
.footer-right { text-align: right; }

/* ---------- Tablet ---------- */
@media (max-width: 979px) {
  .container { max-width: 768px; }
  .logo img { width: 280px; }
  .site-nav a { padding: 18px 10px 0; }
  .hero { grid-template-columns: 1fr 1.2fr; }
  .hero-text { padding-left: 20px; }
  .button-dark { min-width: 220px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  :root { --header-h: 58px; }
  .header-inner { align-items: center; height: 51px; position: relative; }
  .logo .logo-full { display: none; }
  .logo .logo-small { display: block; width: 44px; height: 44px; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font: 600 13px/18px "Open Sans", Arial, sans-serif; color: #333;
    background: transparent; border: 1px solid #bbb; border-radius: 3px; padding: 7px 10px; cursor: pointer;
  }
  .menu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .menu-toggle .i-close { display: none; }
  .menu-toggle[aria-expanded="true"] .i-open { display: none; }
  .menu-toggle[aria-expanded="true"] .i-close { display: block; }
  .site-nav {
    display: none; position: absolute; top: 51px; left: 0; right: 0;
    background: #f4f4f4; border-bottom: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0,0,0,.15);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { margin: 0; height: auto; padding: 12px 16px; border-top: 1px solid #ddd; border-left: 4px solid transparent; }
  .site-nav a.active { border-top-color: #ddd; border-left-color: var(--accent); }
  .site-nav a span { display: inline; margin-left: 8px; }

  .hero { grid-template-columns: 1fr; padding: 10px; gap: 4px; }
  .hero-text { padding: 6px 0 0 0; }
  .hero-media { justify-self: center; }
  .button-dark { min-width: 0; width: 100%; max-width: 280px; }
  .row, .headsets, .row.cols-3, .footer-inner { grid-template-columns: 1fr; gap: 0; }
  .col-one-third { margin-top: 10px; }
  .headsets { padding-top: 0; }
  .headsets p { margin-bottom: 14px; }
  .section-dark .headset { margin-bottom: 10px; }
  .tab-list [role="tab"] { padding: 4px 14px 0; }
  .footer-inner { text-align: center; }
  .footer-center, .footer-right { text-align: center; }
  .contact-actions { flex-direction: column; align-items: flex-start; }
  .contact-actions .contact-button { width: 100%; max-width: 320px; }
}