/* Suvarna's original blue and green, carried through the full experience. */
:root {
  --ink: #0c334b;
  --paper: #f7fafb;
  --sage: #e1f0e6;
  --line: #d7e4e9;
  --accent: #b0e676;
}
body { background: var(--paper); }
.button { border-radius: 6px; }
.button.blue { background: var(--brand-blue); }
.button.blue:hover { background: #045481; }
.overview h2 span, .materials-grid h2 span { color: var(--brand-blue); }
.products { background: #edf4f7; }
.quality { background: #e9f3ed; }
.enquiry { background: #e1f0e6; }
.product-image-scene, .solution-image { background: #e2edf1; }
.product-card:nth-child(3n+2) .product-image-scene, .solution-card:nth-child(2) .solution-image { background: #e7f0e5; }
.product-card:nth-child(3n) .product-image-scene, .solution-card:nth-child(3) .solution-image { background: #e2edf6; }
.motion-showcase { background: linear-gradient(120deg, #0b334a, #0b293f 70%, #103d43); }
.showcase-copy .button { background: #f7fafb; color: var(--ink); }
.showcase-copy .button:hover { background: var(--accent); }
footer { background: #092c40; }

/* A compact, inset navigation surface leaves the banner visible around it. */
.header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  background: transparent;
  box-shadow: none;
}
.header::after { display: none; }
.header.is-scrolled { box-shadow: none; }
.header-inner {
  position: relative;
  min-height: 82px;
  padding: 8px 24px;
  gap: 28px;
  border: 1px solid #ffffffb3;
  border-radius: 16px;
  background: #fff;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 40px #062c4326;
  transition: box-shadow 300ms ease, border-color 300ms ease;
}
.header.is-scrolled .header-inner { border-color: #dce9eb; box-shadow: 0 8px 32px #062c432b; }
.header-inner::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -1px;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-green), #5cbf36, var(--brand-blue));
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
  pointer-events: none;
}
.header .brand { flex-direction: row; align-items: center; gap: 22px; }
.header .logo-window { width: 144px; }
.header-brand-detail {
  border-left: 1px solid #dbe6e8;
  padding: 8px 0 8px 22px;
  font-size: 8px;
  line-height: 1.8;
  letter-spacing: .13em;
  color: #607880;
}
#navigation { font-size: 12px; gap: 30px; }
#navigation > a:not(.nav-cta)::after { background: var(--brand-green); height: 2px; border-radius: 2px; }
#navigation .nav-cta {
  min-height: 46px;
  border-radius: 8px;
  padding: 12px 18px;
  gap: 26px;
  margin-left: 6px;
  background: linear-gradient(120deg, #007bb8, #0066a0);
}
.menu-toggle { border-radius: 8px; padding: 0 12px; font-size: 11px; background: #eaf3f7; color: var(--brand-blue); }

/* Three photographic banners share one stable layout. */
.hero { background: #063750; color: #fff; isolation: isolate; }
.hero-banners, .hero-banner { position: absolute; inset: 0; z-index: -3; }
.hero-banner {
  opacity: 0;
  transform: translateX(4%);
  transition: opacity 1100ms ease, transform 1400ms cubic-bezier(.2,.65,.2,1);
}
.hero-banner.is-active { opacity: 1; transform: translateX(0); }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.hero-banner[data-banner="1"] img { object-position: 75% 42%; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -2; }
.hero::before { background: linear-gradient(90deg, #032c49f5 0%, #053551eb 40%, #073a5699 70%, #07405660 100%); }
.hero::after {
  z-index: -1;
  background: radial-gradient(ellipse at 76% 20%, #73bd8730, transparent 55%), linear-gradient(0deg, #052d46ed, transparent 40%);
  transition: background 800ms ease;
}
.hero.banner-green::before { background: linear-gradient(90deg, #07372df5 0%, #063e39e8 40%, #073b4099 70%, #063b4760 100%); }
.hero-layout { grid-template-columns: 1.12fr .88fr; gap: 80px; padding-top: 154px; padding-bottom: 40px; min-height: 760px; }
.hero-content { min-width: 0; }
.hero-copy-panels { display: grid; }
.hero-copy-panel {
  grid-area: 1 / 1;
  align-self: start;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 650ms ease, transform 850ms ease, visibility 650ms;
}
.hero-copy-panel.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.hero-content .eyebrow { font-size: 10px; letter-spacing: .12em; color: #b9e4cb; margin-bottom: 25px; }
.hero-content .eyebrow::before { content: ""; display: inline-block; width: 24px; height: 2px; margin: 0 10px 3px 0; background: #7ac54b; }
.hero h1 { font-size: clamp(58px, 6.4vw, 96px); line-height: .99; letter-spacing: -.05em; }
.hero h1 span { color: #b6e989; letter-spacing: -.04em; }
.hero-description { color: #d5e4e9; font-size: 15px; line-height: 1.8; margin-top: 25px; }
.hero-actions { gap: 24px; margin-top: 30px; }
.hero-actions .button { background: #b0e676; color: #103b32; min-height: 58px; }
.hero-actions .button:hover { background: #c5f399; }
.hero-actions .text-link { font-size: 12px; border-bottom-color: #ffffff5e; color: #fff; }
.hero-product-stage {
  align-self: center;
  padding: 24px 26px;
  border: 1px solid #ffffff96;
  border-radius: 18px;
  background: #ffffffed;
  color: var(--ink);
  box-shadow: 0 24px 64px #01203440;
  backdrop-filter: blur(12px);
}
.stage-top { font-size: 9px; color: #496b7a; letter-spacing: .13em; padding-bottom: 16px; border-color: #0d547626; }
.stage-top > span:first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--brand-green); border-radius: 50%; margin-right: 9px; }
.hero-image-frame { flex: none; height: 350px; min-height: 0; aspect-ratio: auto; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.hero-image-frame img { height: 100%; min-height: 0; min-width: 0; max-height: 100%; padding: 12px 4px; }
.stage-bottom { gap: 20px; padding-top: 18px; border-top-color: #0d547626; }
.stage-bottom > div { flex: 1; min-width: 0; }
.stage-bottom .eyebrow { font-size: 8px; letter-spacing: .13em; color: var(--brand-green); }
.hero-text-slot { display: grid; }
.hero-text-slot > * { grid-area: 1 / 1; min-width: 0; align-self: start; }
.hero-text-reserve { visibility: hidden; pointer-events: none; user-select: none; }
.hero-product-title { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 23px; font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
#hero-product-name { font: inherit; letter-spacing: inherit; }
.hero-product-range { font-size: 11px; color: #597583; line-height: 1.65; margin-top: 8px; }
.stage-bottom #hero-product-size { font: inherit; color: inherit; margin: 0; }
#hero-product-details { background: var(--brand-blue); border-color: var(--brand-blue); width: 46px; height: 46px; min-width: 46px; min-height: 46px; }
#hero-product-details:hover { background: var(--brand-green); border-color: var(--brand-green); }
.hero-bottom { padding: 22px 0 30px; border-top: 1px solid #ffffff26; }
.hero-context { display: flex; gap: 13px; align-items: center; min-width: 0; }
.hero-context-dot { width: 8px; height: 8px; border-radius: 50%; background: #9bdc72; box-shadow: 0 0 0 5px #b0e67618; flex: none; }
.hero-context small { display: block; font-size: 8px; letter-spacing: .14em; color: #abcbcf; }
.hero-context p { color: #fff; font-size: 12px; margin-top: 3px; }
.hero-controls { gap: 12px; flex: none; color: #fff; }
.hero-controls .circle-button { color: #fff; border-color: #ffffff50; width: 46px; height: 46px; min-width: 46px; min-height: 46px; }
.hero-controls .filled { background: #b0e676; color: #0d3b31; border-color: #b0e676; }
.hero-controls .circle-button:hover { background: #ffffff22; }
.hero-controls .filled:hover { background: #c5f399; }
.hero-controls .quiet { border: 0; width: 34px; min-width: 34px; }
.slide-dots { gap: 9px; margin-right: 8px; }
.slide-dots button { width: 38px; height: 44px; padding: 0; color: #a6c5cd; font-size: 10px; position: relative; }
.slide-dots button::after { width: 100%; height: 2px; top: auto; bottom: 3px; left: 0; border: 0; border-radius: 2px; background: #ffffff33; }
.slide-dots button.active { color: #c0ee95; }
.slide-dots button.active::after { background: #ffffff33; }
.slide-dots button .gallery-progress { position: absolute; z-index: 1; left: 0; bottom: 3px; height: 2px; width: 100%; background: #b0e676; border-radius: 2px; transform: scaleX(0); transform-origin: left; }
.slide-dots button:not(.active) .gallery-progress { visibility: hidden; }
.trust-strip { padding: 25px 0; background: #fff; }
.trust-strip strong { color: var(--brand-blue); }
.trust-strip .container > span { position: relative; padding-left: 15px; }
.trust-strip .container > span::before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-green); top: .65em; left: 0; }
.hero { touch-action: pan-y pinch-zoom; }

@media (min-width: 1600px) {
  .hero-layout { min-height: 800px; padding-top: 165px; padding-bottom: 45px; }
  .hero-image-frame { height: 380px; min-height: 0; }
  .hero-image-frame img { max-height: none; }
}
@media (max-width: 1150px) {
  .header-brand-detail { display: none; }
  .hero-layout { gap: 45px; }
}
@media (max-width: 1100px) {
  #navigation { gap: 22px; }
  .hero-layout { padding-top: 140px; padding-bottom: 35px; min-height: 700px; }
  .hero h1 { font-size: 68px; }
  .hero-content .eyebrow { font-size: 8px; letter-spacing: .1em; }
  .hero-description { font-size: 13px; }
  .hero-product-stage { padding: 21px; }
  .hero-image-frame { height: 300px; min-height: 0; }
  .hero-product-title { font-size: 20px; }
  .hero-actions { gap: 18px; }
  .hero-actions .button { font-size: 11px; padding: 16px 18px; gap: 18px; }
}
@media (max-width: 800px) {
  .header { top: 10px; }
  .header-inner { min-height: 74px; padding: 8px 16px; border-radius: 13px; }
  .header .logo-window { width: 128px; }
  #navigation { top: calc(100% + 8px); left: 0; right: 0; padding: 16px; border: 1px solid #dce7eb; border-radius: 13px; box-shadow: 0 15px 40px #06364c30; gap: 0; }
  #navigation .nav-cta { margin: 12px 0 0; padding: 16px; }
  #navigation > a { padding: 13px 16px; font-size: 14px; }
  .hero-layout { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 124px; min-height: 640px; }
  .hero h1 { font-size: 53px; }
  .hero-content .eyebrow { font-size: 7px; line-height: 1.8; margin-bottom: 20px; }
  .hero-content .eyebrow::before { width: 15px; margin-right: 7px; }
  .hero-description { font-size: 12px; }
  .hero-actions .button { padding: 15px; gap: 12px; min-height: 52px; }
  .hero-product-stage { padding: 18px; border-radius: 14px; }
  .stage-top { font-size: 7px; letter-spacing: .07em; }
  .stage-top > span:first-child::before { margin-right: 5px; width: 4px; height: 4px; }
  .hero-image-frame { height: 255px; min-height: 0; }
  .hero-product-title { font-size: 18px; }
  .hero-product-range { font-size: 10px; }
  .stage-bottom { gap: 10px; }
  .hero-bottom { padding: 20px 0 24px; }
  .hero-context p { font-size: 10px; max-width: 230px; }
  .hero-context small { font-size: 6px; }
  .hero-controls { gap: 8px; }
  .slide-dots { gap: 6px; margin-right: 5px; }
  .slide-dots button { width: 28px; }
}
@media (max-width: 600px) {
  .hero-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 122px; padding-bottom: 26px; min-height: 0; }
  .hero h1 { font-size: clamp(48px, 15vw, 68px); line-height: .98; }
  .hero-content .eyebrow { font-size: 8px; letter-spacing: .075em; margin-bottom: 20px; }
  .hero-description { font-size: 13px; margin-top: 22px; }
  .hero-actions { margin-top: 25px; gap: 22px; }
  .hero-actions .button { font-size: 12px; padding: 17px 20px; }
  .hero-actions .text-link { display: inline-flex; font-size: 10px; gap: 10px; }
  .hero-product-stage { margin: 0; padding: 18px 20px; }
  .stage-top { font-size: 8px; letter-spacing: .09em; padding-bottom: 14px; }
  .hero-image-frame { height: 225px; max-height: none; min-height: 0; aspect-ratio: auto; }
  .hero-image-frame img { max-height: none; padding: 8px; }
  .hero-product-title { font-size: 20px; }
  .hero-product-range { font-size: 10px; }
  .stage-bottom .eyebrow { font-size: 8px; }
  .hero-bottom { flex-direction: column; gap: 16px; align-items: stretch; }
  .hero-context { gap: 11px; }
  .hero-context small { font-size: 7px; }
  .hero-context p { font-size: 11px; max-width: none; }
  .hero-controls { justify-content: flex-end; gap: 10px; }
  .hero-controls .quiet { margin-right: auto; }
  .hero-controls .circle-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .hero-controls .quiet { width: 34px; min-width: 34px; }
  .slide-dots { gap: 8px; }
  .slide-dots button { width: 30px; font-size: 10px; }
  .trust-strip { padding: 22px 0; }
}
@media (max-width: 360px) {
  .header-inner { padding: 8px 12px; }
  .header .logo-window { width: 122px; }
  .hero h1 { font-size: 47px; }
  .hero-content .eyebrow { font-size: 7px; }
  .hero-actions .text-link { display: none; }
  .hero-product-stage { padding: 16px; }
  .hero-image-frame { height: 205px; }
  .hero-product-title { font-size: 18px; }
  .stage-bottom { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-banner, .hero-banner.is-active, .hero-copy-panel, .hero-copy-panel.is-active { transform: none; }
}