:root {
--navy:#0d2548;
  --navy-2:#163761;
  --gold:#ffbd00;
  --gold-soft:#ffd34d;
  --soft-gold:#e9b949;
  --text:#172033;
  --muted:#667085;
  --light:#f7f8fb;
  --border:#e8ebf1;
}

* {
margin:0;
  padding:0;
  box-sizing:border-box;
}

html {
scroll-behavior:smooth;
}

body {
font-family:"Inter",Arial,sans-serif;
  color:var(--text);
  background:#ffffff;
  line-height:1.6;
}

img {
max-width:100%;
  display:block;
}

a {
text-decoration:none;
  color:inherit;
}

button,
input,
select,
textarea {
font:inherit;
}

.container {
width:min(1180px,92%);
  margin:auto;
}

.topbar {
background:#17162c;
  color:#ffffff;
  font-size:12px;
}

.topbar-inner {
min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.topbar-right {
display:flex;
  gap:18px;
}

.site-header {
position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(13,37,72,.06);
}

.navbar {
height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand {
display:flex;
  align-items:center;
  flex-shrink:0;
}

.site-logo {
width:150px;
  height:auto;
  display:block;
  object-fit:contain;
}

.nav-menu {
display:flex;
  align-items:center;
  gap:26px;
}

.nav-menu a {
position:relative;
  font-size:13px;
  font-weight:600;
  color:#1d2940;
}

.nav-menu a::after {
content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-13px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transition:.25s;
}

.nav-menu a:hover,
.nav-menu a.active {
color:var(--navy);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
transform:scaleX(1);
}

.header-cta {
flex-shrink:0;
  padding:13px 20px;
  border-radius:999px;
  background:var(--gold);
  color:#11182b;
  font-size:13px;
  font-weight:800;
  box-shadow:0 10px 22px rgba(255,189,0,.20);
  transition:.3s ease;
}

.header-cta:hover {
background:var(--gold-soft);
  transform:translateY(-2px);
}

.menu-toggle {
display:none;
  background:none;
  border:0;
  font-size:28px;
  color:var(--navy);
  cursor:pointer;
}

.hero {
min-height:690px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
}

.hero-slides,
.hero-slide,
.hero-overlay {
position:absolute;
  inset:0;
}

.hero-slide {
opacity:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:opacity 1s ease,transform 6s ease;
  transform:scale(1.05);
}

.hero-slide.active {
opacity:1;
  transform:scale(1);
}

.hero-overlay {
z-index:2;
  background:
    linear-gradient(
      90deg,
      rgba(8,27,54,.96) 0%,
      rgba(8,27,54,.89) 24%,
      rgba(8,27,54,.66) 42%,
      rgba(8,27,54,.28) 62%,
      rgba(8,27,54,.05) 100%
    );
}

.hero-inner {
position:relative;
  z-index:4;
}

.hero-copy {
max-width:670px;
  color:#ffffff;
}

.eyebrow {
display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
}

.eyebrow span {
width:44px;
  height:3px;
  background:var(--gold);
  border-radius:99px;
}

.hero h1 {
font-size:clamp(48px,6vw,82px);
  line-height:1.03;
  letter-spacing:-3px;
  margin-bottom:24px;
}

.hero p {
max-width:610px;
  font-size:18px;
  color:rgba(255,255,255,.86);
}

.hero-actions {
display:flex;
  gap:14px;
  margin-top:34px;
  flex-wrap:wrap;
}

.btn {
display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 24px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  border:0;
  cursor:pointer;
  transition:.3s ease;
}

.btn-primary {
background:var(--gold);
  color:#11192c;
}

.btn-primary:hover {
background:var(--gold-soft);
  transform:translateY(-2px);
}

.btn-outline {
color:#ffffff;
  border:2px solid rgba(255,255,255,.78);
  background:rgba(255,255,255,.04);
}

.btn-outline:hover {
background:#ffffff;
  color:var(--navy);
}

.slider-arrow {
position:absolute;
  z-index:8;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(8,27,54,.28);
  color:#ffffff;
  font-size:32px;
  cursor:pointer;
  backdrop-filter:blur(8px);
}

.slider-arrow:hover {
background:var(--gold);
  color:var(--navy);
}

.slider-arrow.prev {
left:24px;
}

.slider-arrow.next {
right:24px;
}

.slider-dots {
position:absolute;
  z-index:9;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  display:flex;
  gap:9px;
}

.dot {
width:10px;
  height:10px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.60);
  cursor:pointer;
  transition:.3s ease;
}

.dot.active {
width:34px;
  border-radius:99px;
  background:var(--gold);
}

.section {
padding:92px 0;
}

.section-kicker {
color:#c9971a;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:10px;
}

.section-kicker.light {
color:var(--gold);
}

.section-kicker.dark {
color:#c9971a;
}

.section-heading {
max-width:720px;
  margin-bottom:44px;
}

.section-heading.center {
text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.section-heading h2,
.about h2,
.why-us h2,
.quote-copy h2 {
color:var(--navy);
  font-size:clamp(34px,4vw,52px);
  line-height:1.1;
  letter-spacing:-1.7px;
}

.section-heading p,
.about p {
color:var(--muted);
  margin-top:16px;
}

.about-grid {
display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

.about-content h2 {
font-size:42px;
  color:var(--navy);
  margin-bottom:18px;
}

.about-content p {
font-size:16px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:14px;
}

.about-image {
width:100%;
  max-width:540px;
  height:360px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,.12);
  margin-left:auto;
}

.about-image img {
width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.stats {
background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255,255,255,.06),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-2)
    );
  color:#ffffff;
  padding:38px 0;
}

.stats-grid {
display:grid;
  grid-template-columns:repeat(3,1fr);
}

.stat-card {
text-align:center;
  padding:16px;
  border-right:1px solid rgba(255,255,255,.18);
}

.stat-card:last-child {
border-right:0;
}

.stat-card strong {
display:block;
  font-size:38px;
  color:var(--gold);
  font-weight:800;
}

.stat-card span {
display:block;
  margin-top:4px;
  font-size:13px;
  color:rgba(255,255,255,.85);
}

.products {
background:#ffffff;
}

.product-list {
display:grid;
  gap:18px;
}

.product-row {
display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:16px;
  min-height:260px;
  box-shadow:0 14px 40px rgba(14,36,65,.08);
}

.product-row.reverse .product-copy {
order:2;
}

.product-row.reverse img {
order:1;
}

.product-row img {
width:100%;
  height:100%;
  object-fit:cover;
}

.product-copy {
padding:42px;
  color:#ffffff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.product-copy h3 {
font-size:28px;
  line-height:1.15;
  margin:6px 0 12px;
}

.product-copy p {
opacity:.88;
  font-size:14px;
}

.product-copy a {
margin-top:18px;
  display:inline-block;
  width:max-content;
  color:#ffffff;
  font-weight:800;
  font-size:13px;
}

.product-no {
font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  opacity:.78;
}

.product-row.green .product-copy {
background:var(--navy-2);
}

.product-row.navy .product-copy {
background:var(--navy);
}

.product-row.yellow .product-copy {
background:var(--soft-gold);
  color:#172033;
}

.product-row.yellow .product-copy a {
color:#172033;
}

.why-us {
padding:92px 0;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(255,255,255,.05),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-2)
    );
  color:#ffffff;
}

.why-us h2 {
color:#ffffff;
  margin-bottom:30px;
}

.why-grid {
display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}

.feature-list {
display:grid;
  gap:18px;
}

.feature {
display:grid;
  grid-template-columns:44px 1fr;
  gap:14px;
  align-items:flex-start;
}

.feature > span {
width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--gold);
  color:var(--navy);
  font-weight:900;
}

.feature h4 {
font-size:15px;
  color:#ffffff;
}

.feature p {
font-size:13px;
  color:rgba(255,255,255,.72);
  margin-top:3px;
}

.why-image-wrap img {
width:100%;
  height:360px;
  object-fit:cover;
  border-radius:18px;
}

.mini-contact {
margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  background:#ffffff;
  color:var(--navy);
  padding:16px 18px;
  border-radius:12px;
  border-left:4px solid var(--gold);
}

.mini-contact span {
font-size:12px;
  color:var(--muted);
}

.mini-contact strong {
color:var(--navy);
}

.applications {
padding:78px 0 86px;
  background:
    linear-gradient(
      135deg,
      #f8f6f1,
      #fffaf0
    );
}

.section-heading.dark h2 {
color:var(--navy);
}

.section-heading.dark p {
color:var(--muted);
}

.application-grid {
display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.app-card {
background:#ffffff;
  min-height:126px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:22px;
  border:1px solid #ece7dc;
  box-shadow:0 10px 28px rgba(13,37,72,.07);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.app-card:hover {
transform:translateY(-5px);
  border-color:var(--gold);
  box-shadow:0 16px 36px rgba(13,37,72,.12);
}

.app-icon {
width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--navy);
  color:var(--gold);
  font-size:24px;
  margin-bottom:12px;
}

.app-card h4 {
font-size:13px;
  color:var(--navy);
  font-weight:700;
}

.projects {
background: #ffffff;
  padding: 90px 0;
}

.projects .section-heading {
max-width: 760px;
  margin-bottom: 42px;
}

.projects .section-kicker {
color: #c9971a;
}

.projects .section-heading h2 {
color: var(--navy);
}

.projects .section-heading p {
color: var(--muted);
  margin-top: 14px;
}

.project-grid {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.project-card {
background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(13, 37, 72, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(13, 37, 72, 0.16);
}

.project-card img {
width: 100%;
  height: 330px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.project-info {
padding: 20px 22px 24px;
  border-top: 3px solid var(--gold);
}

.project-info span {
display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #c9971a;
}

.project-info h3 {
margin-top: 6px;
  font-size: 19px;
  line-height: 1.35;
  color: var(--navy);
}

.process {
background:var(--light);
}

.process .section-kicker {
color:#c9971a;
}

.process-grid {
display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.process-card {
background:#ffffff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px 24px;
  box-shadow:0 10px 28px rgba(13,37,72,.06);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.process-card:hover {
transform:translateY(-5px);
  border-color:var(--gold);
  box-shadow:0 18px 40px rgba(13,37,72,.12);
}

.process-card span {
display:inline-block;
  color:var(--navy);
  background:var(--gold);
  font-weight:800;
  font-size:12px;
  padding:7px 10px;
  border-radius:8px;
}

.process-card h4 {
margin:14px 0 8px;
  color:var(--navy);
  font-size:16px;
}

.process-card p {
color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.quote-section {
padding:84px 0;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.06),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-2)
    );
}

.quote-wrap {
display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:50px;
  align-items:center;
}

.quote-copy h2 {
color:#ffffff;
}

.quote-copy p {
color:rgba(255,255,255,.78);
  margin-top:16px;
}

.quote-section .section-kicker {
color:var(--gold);
}

.quote-form {
background:#102d52;
  padding:30px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 50px rgba(4,18,38,.28);
}

.form-grid {
display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
width:100%;
  border:1px solid rgba(13,37,72,.10);
  outline:none;
  background:#ffffff;
  border-radius:10px;
  padding:14px;
  color:#1a2435;
  font-size:13px;
  transition:border-color .3s ease,box-shadow .3s ease;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,189,0,.15);
}

.quote-form textarea {
min-height:110px;
  margin-top:12px;
  resize:vertical;
}

.quote-form .btn {
margin-top:14px;
  background:var(--gold);
  color:var(--navy);
  font-weight:800;
}

.quote-form .btn:hover {
background:var(--gold-soft);
}

.contact-strip {
padding:56px 0 74px;
  background:var(--light);
}

.contact-grid {
display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.contact-card {
background:var(--navy);
  color:#ffffff;
  padding:28px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 14px 34px rgba(13,37,72,.10);
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
}

.contact-card:hover {
transform:translateY(-5px);
  background:var(--navy-2);
  box-shadow:0 20px 42px rgba(13,37,72,.16);
}

.contact-icon {
width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--gold);
  color:var(--navy);
  margin-bottom:18px;
  font-weight:800;
}

.contact-card h4 {
font-size:17px;
  color:#ffffff;
}

.contact-card p {
font-size:13px;
  color:rgba(255,255,255,.78);
  margin:8px 0 18px;
}

.contact-card a {
display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  background:var(--gold);
  color:var(--navy);
  font-size:12px;
  font-weight:800;
  transition:background .3s ease,transform .3s ease;
}

.contact-card a:hover {
background:var(--gold-soft);
  transform:translateY(-2px);
}

.footer {
background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-2)
    );
  color:#ffffff;
  padding:62px 0 20px;
}

.footer-grid {
display:grid;
  grid-template-columns:1.2fr .9fr .7fr;
  gap:50px;
}

.footer-brand {
font-size:24px;
  font-weight:800;
  color:#ffffff;
}

.footer-brand span {
color:var(--gold);
}

.footer p {
color:rgba(255,255,255,.68);
  font-size:13px;
  margin-top:10px;
}

.footer h4 {
font-size:14px;
  margin-bottom:12px;
  color:#ffffff;
}

.footer a {
display:block;
  color:rgba(255,255,255,.76);
  font-size:13px;
  margin:6px 0;
  transition:color .3s ease,transform .3s ease;
}

.footer a:hover {
color:var(--gold);
  transform:translateX(3px);
}

.footer-bottom {
display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.56);
  font-size:11px;
}

.footer-bottom a {
color:var(--gold);
}

@media (max-width:1050px) {
.nav-menu {
gap:16px;
}

.nav-menu a {
font-size:11px;
}

.header-cta {
font-size:11px;
    padding:12px 16px;
}



}

@media (max-width:900px) {
.topbar-right {
display:none;
}

.navbar {
height:74px;
}

.menu-toggle {
display:block;
}

.header-cta {
display:none;
}

.nav-menu {
position:absolute;
    top:74px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    background:#ffffff;
    padding:20px 4%;
    box-shadow:0 18px 30px rgba(20,34,60,.08);
}

.nav-menu.open {
display:flex;
}

.nav-menu a::after {
display:none;
}

.hero {
min-height:620px;
}

.hero-overlay {
background:
      linear-gradient(
        90deg,
        rgba(8,27,54,.95),
        rgba(8,27,54,.76),
        rgba(8,27,54,.36)
      );
}

.about-grid,
.why-grid,
.quote-wrap {
grid-template-columns:1fr;
}

.about-image {
max-width:100%;
    margin-left:0;
}

.project-grid {
grid-template-columns:1fr 1fr;
}

.process-grid {
grid-template-columns:1fr 1fr;
}



}

@media (max-width:640px) {
.site-logo {
width:165px;
}

.section {
padding:68px 0;
}

.hero {
min-height:670px;
}

.hero h1 {
font-size:44px;
    letter-spacing:-2px;
}

.hero p {
font-size:15px;
}

.hero-slide {
background-position:62% center;
}

.slider-arrow {
display:none;
}

.stats-grid {
grid-template-columns:1fr;
}

.stat-card {
border-right:0;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.stat-card:last-child {
border-bottom:0;
}

.product-row,
.product-row.reverse {
grid-template-columns:1fr;
}

.product-row .product-copy,
.product-row.reverse .product-copy {
order:1;
}

.product-row img,
.product-row.reverse img {
order:2;
    height:230px;
}

.application-grid {
grid-template-columns:1fr 1fr;
}

.project-grid {
grid-template-columns:1fr;
}

.project-card img {
height:280px;
}

.process-grid {
grid-template-columns:1fr;
}

.form-grid {
grid-template-columns:1fr;
}

.contact-grid {
grid-template-columns:1fr;
}

.footer-grid {
grid-template-columns:1fr;
}

.footer-bottom {
flex-direction:column;
}



}

section[id],
header[id] {
scroll-margin-top: 90px;
}

.container > *,
.form-grid > *,
.product-row > *,
.footer-grid > * {
min-width: 0;
}

a,
p,
h2,
h3,
h4 {
overflow-wrap: break-word;
}

button,
a,
input,
select,
textarea {
-webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible {
outline: 3px solid var(--gold); outline-offset: 4px;
}

@media (max-width:1100px) {
.navbar {
gap: 16px;
}

.nav-menu {
gap: 14px;
}



}

@media (max-width:900px) {
.nav-menu {
top: 100%; gap: 0; max-height: calc(100dvh - 90px); overflow-y: auto; border-top: 1px solid var(--border);
}

.nav-menu a {
width: 100%; min-height: 48px; display: flex; align-items: center; font-size: 15px; padding: 8px 12px; border-radius: 8px;
}

.nav-menu a.active {
background: var(--light);
}

.menu-toggle {
width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px;
}

.contact-grid {
grid-template-columns: 1fr;
}

.footer-grid {
grid-template-columns: 1fr 1fr; gap: 28px;
}

.footer-grid > :first-child {
grid-column: 1 / -1;
}

.about-grid,
.why-grid,
.quote-wrap {
gap: 30px;
}



}

@media (max-width:640px) {
.container {
width: calc(100% - 32px);
}

.topbar-inner {
min-height: 32px; justify-content: center; text-align: center; font-size: 10px;
}

.navbar {
height: 68px;
}

.site-logo {
width: 145px; max-height: 56px;
}

section[id],
header[id] {
scroll-margin-top: 80px;
}

.section,
.why-us,
.applications,
.projects,
.quote-section {
padding: 48px 0;
}

.contact-strip {
padding: 36px 0 48px;
}

.section-heading {
margin-bottom: 28px;
}

.section-heading h2,
.about h2,
.about-content h2,
.why-us h2,
.quote-copy h2 {
font-size: clamp(28px, 7.5vw, 36px); letter-spacing: -1px; line-height: 1.18;
}

.hero {
min-height: 560px; padding: 56px 0 76px;
}

.hero h1 {
font-size: clamp(34px, 9vw, 48px); letter-spacing: -1.4px; line-height: 1.1;
}

.eyebrow {
font-size: 10px; letter-spacing: 1.4px; gap: 10px; margin-bottom: 20px;
}

.eyebrow span {
width: 24px; flex-shrink: 0;
}

.hero-actions {
margin-top: 24px; gap: 12px;
}

.hero-actions .btn {
width: 100%;
}

.slider-dots {
gap: 4px; bottom: 18px;
}

.dot,
.dot.active {
width: 44px; height: 44px; background: transparent; border-radius: 50%; position: relative;
}

.dot::after {
content: ""; width: 10px; height: 10px; background: rgba(255,255,255,.6); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 99px;
}

.dot.active::after {
width: 28px; background: var(--gold);
}

.about-image {
height: auto; aspect-ratio: 4 / 3;
}

.about-content p {
font-size: 15px;
}

.stats {
padding: 20px 0;
}

.stat-card strong {
font-size: 32px;
}

.product-copy {
padding: 26px 22px;
}

.product-copy h3 {
font-size: 24px;
}

.product-copy a {
min-height: 44px; display: inline-flex; align-items: center;
}

.product-row img,
.product-row.reverse img {
height: auto; aspect-ratio: 4 / 3;
}

.why-image-wrap img {
height: auto; aspect-ratio: 4 / 3;
}

.mini-contact {
flex-wrap: wrap; gap: 4px 12px; padding: 14px;
}

.app-card {
padding: 18px 10px;
}

.project-card img {
height: auto; aspect-ratio: 4 / 3;
}

.process-card,
.contact-card {
padding: 24px;
}

.quote-form {
padding: 20px 16px;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
font-size: 16px; min-height: 48px; min-width: 0;
}

.quote-form .btn {
width: 100%; padding-inline: 12px;
}

.footer {
padding: 42px 0 20px;
}

.footer-grid {
grid-template-columns: 1fr; gap: 28px;
}

.footer a {
min-height: 44px; display: flex; align-items: center;
}

.footer-bottom {
gap: 10px; margin-top: 24px;
}



}

@media (max-width:360px) {
.container {
width: calc(100% - 24px);
}

.hero h1 {
font-size: 32px;
}

.eyebrow {
letter-spacing: .8px; font-size: 9px;
}



}

@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
transition: none !important;
}



}

.header-social {
display:flex; align-items:center; gap:6px; flex-shrink:0; order:3;
}

.social-icon {
width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--light); border:1px solid var(--border); transition:background .2s,transform .2s;
}

.social-icon svg {
width:23px; height:23px;
}

.social-icon.whatsapp {
color:#128c4b;
}

.social-icon.call {
color:var(--navy);
}

.social-icon.facebook {
color:#1877f2;
}

.social-icon:hover {
background:#eef2f7; transform:translateY(-2px);
}

.navbar > .brand {
order:0;
}

.navbar > .nav-menu {
order:1;
}

.navbar > .header-cta {
order:2;
}

.navbar > .menu-toggle {
order:4;
}

@media (min-width:901px) and (max-width:1250px) {
.navbar {
gap:12px;
}

.navbar > .header-cta {
display:none;
}

.nav-menu {
gap:14px;
}



}

@media (max-width:900px) {
.header-social {
margin-left:auto;
}

.navbar {
gap:10px;
}



}

@media (max-width:640px) {
.header-social {
gap:2px;
}

.site-logo {
width:120px;
}

.navbar {
gap:6px;
}

.menu-toggle {
width:44px;
}



}

@media (max-width:360px) {
.site-logo {
width:100px;
}

.navbar {
gap:2px;
}



}

/* Compact phone layout */
@media (max-width:640px) {
  .section, .why-us, .applications, .projects, .quote-section { padding:32px 0; }
  .contact-strip { padding:28px 0; }
  .section-heading { margin-bottom:20px; }
  .section-heading h2, .about h2, .about-content h2, .why-us h2, .quote-copy h2 { font-size:27px; line-height:1.16; }
  .section-heading p, .about-content p, .quote-copy p { font-size:14px; line-height:1.65; margin-top:10px; }
  .about-content p { margin-bottom:10px; }
  .about-content h2 { margin-bottom:12px; }
  .section-kicker { font-size:10px; letter-spacing:1.4px; margin-bottom:8px; }
  .hero { min-height:430px; padding:36px 0 64px; }
  .hero h1 { font-size:clamp(30px,8.5vw,40px); margin-bottom:16px; }
  .hero p { font-size:14px; line-height:1.6; }
  .eyebrow { margin-bottom:16px; }
  .hero-actions { margin-top:18px; gap:10px; }
  .hero-actions .btn { width:auto; flex:1 1 145px; min-height:46px; padding:0 12px; font-size:12px; }
  .about-grid, .why-grid, .quote-wrap { gap:20px; }
  .about-image, .why-image-wrap img { aspect-ratio:16 / 9; }
  .stats { padding:16px 0; }
  .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stat-card { padding:8px 6px; border-bottom:0; border-right:1px solid rgba(255,255,255,.18); }
  .stat-card:last-child { border-right:0; }
  .stat-card strong { font-size:25px; }
  .stat-card span { font-size:10px; line-height:1.4; }
  .product-list { gap:14px; }
  .product-row { min-height:0; }
  .product-copy { padding:20px; }
  .product-copy h3 { font-size:22px; margin:4px 0 8px; }
  .product-copy p { font-size:13px; line-height:1.6; }
  .product-copy a { margin-top:8px; }
  .product-row img, .product-row.reverse img { aspect-ratio:16 / 9; }
  .why-us h2 { margin-bottom:20px; }
  .feature-list { gap:14px; }
  .feature { grid-template-columns:34px minmax(0,1fr); gap:10px; }
  .feature > span { width:32px; height:32px; }
  .application-grid { gap:10px; }
  .app-card { min-height:100px; padding:14px 10px; }
  .app-icon { width:38px; height:38px; font-size:20px; margin-bottom:8px; }
  .project-grid { gap:16px; }
  .project-card img { aspect-ratio:16 / 9; }
  .project-info { padding:14px 16px; }
  .project-info h3 { font-size:17px; }
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .process-card { padding:16px 12px; }
  .process-card h4 { font-size:14px; margin:10px 0 6px; }
  .process-card p { font-size:12px; line-height:1.6; }
  .quote-form { padding:16px; }
  .form-grid { gap:10px; }
  .quote-form input, .quote-form select, .quote-form textarea { padding:12px; }
  .quote-form textarea { min-height:90px; }
  .contact-grid { gap:12px; }
  .contact-card { padding:20px; }
  .contact-icon { margin-bottom:12px; }
  .contact-card p { margin-bottom:12px; }
  .footer { padding:32px 0 16px; }
  .footer-grid { gap:20px; }
  .footer-bottom { margin-top:20px; padding-top:14px; }
}

/* Separate mobile image banner and introduction */
.hero-media { position:absolute; inset:0; }
@media (max-width:640px) {
  .hero { display:block; min-height:0; padding:14px 0 24px; overflow:hidden; background:#fff; }
  .hero-media { position:relative; inset:auto; width:calc(100% - 24px); margin:0 auto; aspect-ratio:16 / 9; border-radius:16px; overflow:hidden; background:var(--light); }
  .hero-overlay { display:none; }
  .hero-slide, .hero-slide.active { background-position:center; transform:none; }
  .hero-media .slider-dots { bottom:2px; gap:0; }
  .hero-media .dot, .hero-media .dot.active { width:36px; height:36px; }
  .hero-media .dot::after { box-shadow:0 1px 5px rgba(0,0,0,.4); }
  .hero-inner { padding-top:20px; }
  .hero-copy { max-width:none; color:var(--navy); }
  .hero .eyebrow { color:var(--muted); font-size:9px; letter-spacing:1px; margin-bottom:10px; }
  .hero h1 { color:var(--navy); font-size:clamp(27px,7.5vw,34px); line-height:1.15; margin-bottom:10px; letter-spacing:-1px; }
  .hero h1 br { display:none; }
  .hero p { color:var(--muted); font-size:13px; line-height:1.65; }
  .hero-actions { margin-top:16px; gap:10px; }
  .hero-actions .btn { border-radius:12px; min-height:46px; font-size:12px; padding:0 12px; }
  .hero .btn-outline { color:var(--navy); border:1px solid var(--border); background:var(--light); }
  .hero .btn-outline:hover { background:#edf1f6; }
}

/* Final compact layout for phones and tablets */
html { -webkit-text-size-adjust:100%; }
@media (max-width:900px) {
  .about-grid, .why-grid, .quote-wrap, .footer-grid { gap:24px; }
  .container > *, .product-list > *, .project-grid > *, .contact-grid > * { min-width:0; }
  .nav-menu a { font-size:14px; min-height:44px; }
  .quote-form input, .quote-form select, .quote-form textarea { min-width:0; font-size:16px; }
}
@media (min-width:641px) and (max-width:900px) {
  .section, .why-us, .applications, .projects, .quote-section { padding:44px 0; }
  .hero { min-height:480px; }
  .hero h1 { font-size:46px; }
  .hero-copy { max-width:560px; }
  .hero-inner { padding-inline:28px; }
  .slider-arrow.prev { left:8px; }
  .slider-arrow.next { right:8px; }
  .product-copy { padding:26px; }
  .product-copy h3 { font-size:24px; }
  .contact-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .contact-card { padding:18px; }
}
@media (max-width:640px) {
  .container { width:calc(100% - 28px); }
  .navbar { height:62px; gap:4px; }
  .site-logo { width:110px; max-height:46px; }
  .header-social { gap:0; }
  .social-icon, .menu-toggle { width:44px; height:44px; }
  .social-icon svg { width:21px; height:21px; }
  section[id] { scroll-margin-top:74px; }
  .hero { padding:10px 0 20px; }
  .hero-media { width:calc(100% - 28px); border-radius:14px; }
  .hero-inner { padding-top:16px; }
  .hero h1 { font-size:27px; }
  .hero .eyebrow { font-size:9px; letter-spacing:.7px; }
  .hero-actions { margin-top:12px; gap:8px; }
  .hero-actions .btn { min-height:44px; }
  .section, .why-us, .applications, .projects, .quote-section { padding:26px 0; }
  .section-heading { margin-bottom:16px; }
  .section-heading h2, .about h2, .about-content h2, .why-us h2, .quote-copy h2 { font-size:24px; line-height:1.2; letter-spacing:-.6px; }
  .section-heading p, .about-content p, .quote-copy p { font-size:13px; line-height:1.65; }
  .section-kicker { font-size:10px; letter-spacing:1px; }
  .about-grid, .why-grid, .quote-wrap { gap:16px; }
  .about-image, .why-image-wrap img { height:auto; max-height:200px; aspect-ratio:16 / 9; border-radius:14px; }
  .stats { padding:12px 0; }
  .stat-card strong { font-size:23px; }
  .product-list { gap:12px; }
  .product-row, .product-row.reverse { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); min-height:0; border-radius:14px; }
  .product-row .product-copy, .product-row.reverse .product-copy { order:1; padding:16px 14px; }
  .product-row img, .product-row.reverse img { order:2; height:100%; min-height:180px; aspect-ratio:auto; object-fit:cover; }
  .product-no { font-size:10px; letter-spacing:1px; }
  .product-copy h3 { font-size:18px; line-height:1.2; margin:5px 0 8px; }
  .product-copy p { font-size:12px; line-height:1.6; }
  .product-copy a { font-size:12px; min-height:44px; margin-top:4px; }
  .why-us h2 { margin-bottom:16px; }
  .feature-list { gap:12px; }
  .feature h4 { font-size:14px; }
  .feature p { font-size:12px; }
  .mini-contact { padding:12px; }
  .application-grid { gap:8px; }
  .app-card { min-height:90px; padding:12px 8px; border-radius:12px; }
  .app-icon { width:32px; height:32px; font-size:18px; margin-bottom:6px; }
  .app-card h4 { font-size:12px; }
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .project-card { border-radius:12px; }
  .project-card img { height:auto; aspect-ratio:4 / 3; }
  .project-info { padding:12px; }
  .project-info span { font-size:9px; letter-spacing:.6px; }
  .project-info h3 { font-size:14px; line-height:1.35; }
  .process-card { padding:14px 12px; border-radius:12px; }
  .process-card h4 { font-size:13px; }
  .process-card p { font-size:12px; }
  .quote-form { padding:16px 14px; border-radius:14px; }
  .quote-form input, .quote-form select, .quote-form textarea { min-height:46px; padding:10px 12px; }
  .quote-form textarea { min-height:80px; }
  .contact-strip { padding:24px 0; }
  .contact-grid { gap:10px; }
  .contact-card { display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:12px; padding:16px; border-radius:14px; }
  .contact-icon { grid-column:1; grid-row:1 / 4; width:32px; height:32px; margin:0; }
  .contact-card h4, .contact-card p, .contact-card a { grid-column:2; }
  .contact-card h4 { font-size:15px; }
  .contact-card p { font-size:12px; margin:4px 0 8px; }
  .contact-card a { justify-self:start; min-height:44px; display:inline-flex; align-items:center; padding:8px 14px; }
  .footer { padding:26px 0 14px; }
  .footer-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:16px; }
  .footer-grid > :first-child { grid-column:1 / -1; }
  .footer-brand { font-size:21px; }
  .footer p { font-size:12px; overflow-wrap:anywhere; }
  .footer a { font-size:12px; margin:0; }
  .footer-bottom { margin-top:16px; gap:6px; }
}
@media (max-width:359px) {
  .site-logo { width:94px; }
  .container { width:calc(100% - 24px); }
  .hero h1 { font-size:25px; }
  .product-row, .product-row.reverse { grid-template-columns:1fr; }
  .product-row img, .product-row.reverse img { height:auto; min-height:0; aspect-ratio:16 / 9; }
  .project-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
}

/* Footer: full-width contact followed by compact link rows on mobile */
@media (max-width:640px) {
  .footer { padding:24px 0 12px; }
  .footer .footer-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .footer .footer-grid > * { grid-column:1; min-width:0; }
  .footer h4 { margin-bottom:8px; font-size:14px; }
  .footer-contact p { margin-top:6px; font-size:12px; line-height:1.6; }
  .footer-quick-links { padding-top:14px; border-top:1px solid rgba(255,255,255,.12); }
  .footer-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; row-gap:4px; }
  .footer .footer-links a { display:flex; align-items:center; min-height:44px; margin:0; padding:8px 12px; font-size:12px; line-height:1.3; border-radius:8px; background:rgba(255,255,255,.05); }
  .footer .footer-bottom { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 12px; margin-top:16px; padding-top:10px; font-size:10px; }
  .footer-bottom > span { min-width:0; }
  .footer .footer-bottom a { min-height:44px; margin:0; padding:6px 0; font-size:11px; }
}

/* Four selected product cards */
@media (min-width:1101px) {
  .project-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
  .project-card img { height:260px; }
  .project-info { padding:18px; }
  .project-info h3 { font-size:17px; }
}
@media (min-width:360px) and (max-width:1100px) {
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.dining-card img { object-position:center 72%; }

/* Clean, spacious mobile footer */
@media (max-width:640px) {
  .footer { background:#0d2548; padding:30px 0 18px; }
  .footer .container { width:calc(100% - 40px); }
  .footer .footer-grid { display:flex; flex-direction:column; gap:22px; }
  .footer-brand { font-size:23px; letter-spacing:.3px; }
  .footer-grid > :first-child p { max-width:36ch; margin-top:8px; font-size:13px; line-height:1.75; }
  .footer h4 { font-size:14px; font-weight:600; margin-bottom:10px; }
  .footer-contact { border-top:1px solid rgba(255,255,255,.12); padding-top:20px; }
  .footer-contact p { font-size:13px; line-height:1.75; margin-top:5px; }
  .footer-quick-links { border-top:0; padding-top:0; }
  .footer .footer-links { display:flex; flex-wrap:wrap; column-gap:20px; row-gap:0; }
  .footer .footer-links a { flex:0 0 auto; min-height:44px; padding:6px 0; background:transparent; border:0; border-radius:0; font-size:13px; font-weight:400; color:rgba(255,255,255,.78); }
  .footer .footer-bottom { flex-direction:column; align-items:flex-start; gap:6px; margin-top:22px; padding-top:16px; font-size:11px; line-height:1.6; }
  .footer .footer-bottom a { min-height:44px; font-size:12px; padding:6px 0; }
}

.material-guide { background:var(--light); }
.material-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:14px; }
.material-table { border-collapse:collapse; width:100%; background:#fff; font-size:14px; }
.material-table caption { text-align:left; padding:14px; font-weight:600; color:var(--navy); }
.material-table th, .material-table td { padding:14px; text-align:left; vertical-align:top; border-top:1px solid var(--border); }
.material-table thead { background:var(--navy); color:#fff; }
.faq-section details { border-bottom:1px solid var(--border); padding:4px 0; }
.faq-section summary { cursor:pointer; padding:14px 0; min-height:44px; font-weight:600; color:var(--navy); }
.faq-section details p { padding:0 0 14px; color:var(--muted); font-size:14px; }
@media(max-width:640px) {
 .material-table { font-size:12px; table-layout:fixed; }
 .material-table th, .material-table td { padding:10px 8px; overflow-wrap:anywhere; }
 .material-table caption { font-size:12px; padding:12px; }
 .faq-section summary { font-size:13px; }
 .faq-section details p { font-size:13px; }
}