/* PAT Bricks — site styles */
:root {
  --g950: #07210f; --g900: #0b2e1a; --g800: #14532d; --g700: #1b6b3c; --g100: #eef6e4; --g200: #d7e8d0;
  --lime: #8cc63f; --lime-l: #b6e07a;
  --brick: #b5532a; --brick-d: #9a3f1b; --brick-l: #d9774a; --brick-50: #fbeee7;
  --cream: #f7f5ec; --paper: #ffffff; --line: #e3e0d2;
  --ink: #17231c; --ink-2: #3d4b42; --muted: #5b6b60;
  --wa: #25d366; --wa-d: #128c4a;
  --r: 18px; --r-sm: 12px;
  --shadow: 0 14px 40px rgba(20, 83, 45, .12);
  --shadow-lg: 0 30px 70px rgba(7, 33, 15, .28);
  --slab: 'Roboto Slab', Georgia, serif;
  --sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tamil: 'Noto Sans Tamil', 'Nirmala UI', 'Latha', sans-serif;
  --header-h: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
a, button, label, summary { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--cream); overflow-x: hidden; overflow-x: clip; }
body.lang-ta { font-family: var(--tamil), var(--sans); }
.ta, .ta-line { font-family: var(--tamil); }
img, svg, video { max-width: 100%; display: block; }
a { color: var(--g800); }
h1, h2, h3 { font-family: var(--slab); color: var(--g900); line-height: 1.15; margin: 0 0 .5em; }
.lang-ta h1, .lang-ta h2, .lang-ta h3 { font-family: var(--tamil); font-weight: 700; line-height: 1.3; }
.lang-ta h1 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
.lang-ta h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 900; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 800; }
p { margin: 0 0 1em; }
.small { font-size: .85rem; color: var(--muted); }
.center { text-align: center; }
.wrap { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 860px; }
.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; display: inline-block; vertical-align: -.2em; }
.skip { position: absolute; left: -999px; top: 0; background: var(--g800); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 46px; padding: 12px 22px; border-radius: var(--r-sm); border: 0; font: 700 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; position: relative; overflow: hidden; }
.lang-ta .btn { font-family: var(--tamil), var(--sans); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-lg { min-height: 56px; padding: 16px 26px; font-size: 17px; }
.btn-sm { min-height: 44px; padding: 10px 16px; font-size: 14px; }
.btn-brick { background: var(--brick); color: #fff; box-shadow: 0 10px 24px rgba(181, 83, 42, .35); }
.btn-brick:hover { background: var(--brick-d); color: #fff; }
.btn-wa { background: var(--wa); color: var(--g950); box-shadow: 0 10px 24px rgba(37, 211, 102, .3); }
.btn-wa:hover { background: #1fbe5b; color: var(--g950); }
.btn-green { background: var(--g800); color: #fff; }
.btn-green:hover { background: var(--g900); color: #fff; }
.btn-ghost-light { background: rgba(255, 255, 255, .1); color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row.center { justify-content: center; }
.btn .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: scale(0); animation: ripple .6s ease-out; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Top bar & header ---------- */
.topbar { background: var(--g950); color: var(--g200); font-size: 13px; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 7px; padding-bottom: 7px; flex-wrap: wrap; }
.topbar a { color: var(--g200); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: #fff; }
.topbar-links { display: flex; gap: 20px; }
.header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.header.scrolled { box-shadow: 0 8px 30px rgba(7, 33, 15, .1); }
/* backdrop-filter makes a containing block for fixed children, so only use it when the menu is not a fixed drawer. */
@media (min-width: 1181px) { .header { background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--g800); flex-shrink: 0; }
.logo img { height: 66px; width: auto; display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav a { display: block; white-space: nowrap; padding: 8px 9px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; border-radius: 8px; position: relative; }
.nav a::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; background: var(--brick); transform: scaleX(0); transition: transform .25s; transform-origin: left; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--brick); }
.header-cta { display: flex; align-items: center; gap: 10px; }
.lang-switch { font-weight: 700; font-size: 14px; text-decoration: none; border: 1.5px solid #c9d8c4; border-radius: 999px; padding: 6px 12px; min-height: 36px; display: inline-flex; align-items: center; }
.lang-switch[lang="ta"] { font-family: var(--tamil); }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid #c9d8c4; background: #fff; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { width: 20px; height: 2px; background: var(--g800); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: calc(100vh - var(--header-h) - 34px); min-height: calc(100svh - var(--header-h) - 34px); display: flex; align-items: center; color: #fff; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(1200px 600px at 80% 20%, rgba(140, 198, 63, .22), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(181, 83, 42, .25), transparent 60%),
    linear-gradient(135deg, var(--g900), var(--g800) 55%, #0f4424); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7, 33, 15, .92) 0%, rgba(11, 46, 26, .75) 45%, rgba(11, 46, 26, .35) 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 96px; position: relative; z-index: 1; pointer-events: none; }
.hero-grid > * { pointer-events: auto; }
.hero h1 { color: #fff; margin-bottom: 18px; text-shadow: 0 4px 30px rgba(0, 0, 0, .3); }
.hero h1 .hl { color: var(--lime-l); display: inline-block; }
.hero .lead, .hero .ticks, .hero .ta-line { text-shadow: 0 2px 12px rgba(7, 33, 15, .8); }
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--g200); max-width: 600px; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: var(--lime); color: var(--g950); font-weight: 800; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; }
.lang-ta .badge { text-transform: none; letter-spacing: 0; }
.ta-line { color: var(--lime-l); font-size: 1.05rem; font-weight: 600; }
.ta-line.dark { color: var(--g700); }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; }
.ticks li { display: flex; align-items: center; gap: 6px; }
.ticks .ic { color: var(--g700); stroke-width: 3; }
.ticks.light { color: var(--g200); }
.ticks.light .ic { color: var(--lime-l); }

.quick-quote { background: rgba(255, 255, 255, .97); color: var(--ink); border-radius: 22px; padding: 24px; box-shadow: var(--shadow-lg); display: grid; gap: 12px; position: relative; }
.quick-quote::before { content: ''; position: absolute; inset: -2px; border-radius: 24px; padding: 2px; background: linear-gradient(135deg, var(--lime), transparent 40%, var(--brick)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.qq-head b { display: block; font: 800 22px/1.2 var(--slab); color: var(--g900); }
.lang-ta .qq-head b { font-family: var(--tamil); }
.qq-head span { font-size: 14px; color: var(--muted); }
.quick-quote label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.quick-quote .btn { width: 100%; min-height: 52px; font-size: 16px; }

/* ---------- Form fields (shared) ---------- */
input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid #cfdccb; border-radius: 10px; padding: 11px 12px; width: 100%; min-height: 46px; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--g700); box-shadow: 0 0 0 4px rgba(140, 198, 63, .25); }
input[aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192, 57, 43, .15); }

/* ---------- Marquee ---------- */
.marquee { background: var(--brick); color: #fff; overflow: hidden; padding: 14px 0; border-block: 3px solid var(--brick-d); }
.marquee-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 38s linear infinite; font: 800 18px/1 var(--slab); white-space: nowrap; }
.lang-ta .marquee-track { font-family: var(--tamil); font-size: 16px; }
.marquee-track i { width: 22px; height: 10px; background: var(--lime); border-radius: 2px; transform: skewX(-20deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats-wrap { margin-top: 40px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 28px 32px; }
.stat { display: flex; flex-direction: column; border-left: 3px solid var(--lime); padding-left: 16px; }
.stat b { font: 900 clamp(2rem, 3.6vw, 2.75rem)/1.05 var(--slab); color: var(--g800); }
.stat:nth-child(2) b { color: var(--brick); }
.stat > span { color: var(--muted); font-size: 14px; }
.stats--col { grid-template-columns: 1fr; align-self: start; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section.soft { background: #fff; border-block: 1px solid var(--line); }
.section.dark { background: var(--g900); color: #fff; }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark p { color: var(--g200); }
.sec-head { max-width: 720px; margin-bottom: 40px; }
.sec-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.sec-head p { color: var(--muted); font-size: 1.08rem; }
.eyebrow { display: inline-block; color: var(--brick); font-weight: 800; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px; }
.lang-ta .eyebrow { letter-spacing: 0; text-transform: none; font-size: 14px; }
.dark .eyebrow { color: var(--lime-l); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.big-p { font-size: 1.15rem; color: var(--ink-2); }

/* ---------- 3D bricks ---------- */
.b3d { --w: 120px; --h: 40px; --d: 58px; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; }
.b3d .f { position: absolute; left: 0; top: 0; }
.b3d .fr, .b3d .bk { width: var(--w); height: var(--h); }
.b3d .fr { transform: translateZ(calc(var(--d) / 2)); }
.b3d .bk { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.b3d .tp, .b3d .bt { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); }
.b3d .tp { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.b3d .bt { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.b3d .lf, .b3d .rt { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); }
.b3d .lf { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.b3d .rt { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.b3d--fly .f { background-color: #c9cbc6; background-image: radial-gradient(rgba(90, 95, 88, .35) 1px, transparent 1.4px), radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.4px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 4px; }
.b3d--fly .tp { background-color: #dcddd8; }
.b3d--fly .bt { background-color: #9fa39b; }
.b3d--fly .lf, .b3d--fly .rt { background-color: #aeb2aa; }
.b3d--fly .bk { background-color: #b9bcb5; }
.b3d--red .f { background-color: #b5532a; background-image: radial-gradient(rgba(70, 20, 5, .3) 1px, transparent 1.5px), linear-gradient(160deg, rgba(255, 255, 255, .08), transparent 60%); background-size: 9px 9px, 100% 100%; }
.b3d--red .tp { background-color: #cf6a3d; }
.b3d--red .bt { background-color: #7c3216; }
.b3d--red .lf, .b3d--red .rt { background-color: #8f3d1b; }
.b3d--red .bk { background-color: #a14822; }
.b3d--block { --w: 150px; --h: 75px; --d: 56px; }
.b3d--block .f { background-color: #8b9087; background-image: radial-gradient(rgba(40, 44, 38, .4) 1px, transparent 1.6px), radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.5px); background-size: 6px 6px, 9px 9px; background-position: 0 0, 2px 3px; }
.b3d--block .tp { background-color: #a8aca4; }
.b3d--block .bt { background-color: #5f645c; }
.b3d--block .lf, .b3d--block .rt { background-color: #6f746c; }
.b3d .fr { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.b3d.spin { animation: spin3d 12s linear infinite; }
.b3d.spin.d2 { animation-duration: 15s; animation-direction: reverse; }
.b3d.spin.d3 { animation-duration: 18s; }
@keyframes spin3d { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }

/* Floating stacks in page heroes */
.stack { position: relative; width: 340px; height: 320px; margin: 0 auto; perspective: 1000px; transform-style: preserve-3d; }
.stack .b3d { position: absolute; animation: floaty 6s ease-in-out infinite; }
.stack .s0 { left: 30px; top: 210px; --rx: -20deg; --ry: 30deg; }
.stack .s1 { left: 180px; top: 200px; --rx: -18deg; --ry: -25deg; animation-delay: -1s; }
.stack .s2 { left: 100px; top: 120px; --rx: -25deg; --ry: 50deg; animation-delay: -2s; }
.stack .s3 { left: 200px; top: 40px; --rx: 10deg; --ry: -40deg; animation-delay: -3s; }
.stack .s4 { left: 40px; top: 30px; --rx: -30deg; --ry: 20deg; animation-delay: -4s; }
.stack--block .b3d { --w: 130px; --h: 64px; --d: 50px; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotateX(var(--rx)) rotateY(var(--ry)); } 50% { transform: translateY(-16px) rotateX(calc(var(--rx) + 8deg)) rotateY(calc(var(--ry) + 14deg)); } }

/* Sand & metal pile */
.pile { position: relative; width: 300px; height: 220px; margin: 0 auto; }
.pile-sand { position: absolute; left: 0; bottom: 0; width: 210px; height: 120px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: radial-gradient(rgba(120, 90, 40, .35) 1px, transparent 1.5px) 0 0/6px 6px, linear-gradient(160deg, #e6cf9d, #c0a571); border-radius: 0 0 20px 20px; }
.pile-metal { position: absolute; right: 0; bottom: 0; width: 170px; height: 95px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: radial-gradient(circle at 30% 30%, #8e959a 3px, transparent 4px) 0 0/12px 10px, radial-gradient(circle at 60% 60%, #4f5a63 3px, transparent 4px) 0 0/10px 12px, linear-gradient(160deg, #7c868e, #46505a); }
.stone { position: absolute; width: 14px; height: 11px; border-radius: 40% 55% 45% 50%; background: #5f6a73; animation: hop 3s ease-in-out infinite; }
.st0 { left: 150px; top: 40px; } .st1 { left: 190px; top: 20px; animation-delay: -.6s; } .st2 { left: 230px; top: 50px; animation-delay: -1.2s; background: #7c868e; }
.st3 { left: 60px; top: 60px; background: #d8c193; animation-delay: -1.8s; } .st4 { left: 100px; top: 30px; background: #c0a571; animation-delay: -2.2s; } .st5 { left: 260px; top: 80px; animation-delay: -.3s; }
.st6 { left: 30px; top: 90px; background: #e6cf9d; animation-delay: -1.5s; } .st7 { left: 210px; top: 90px; animation-delay: -2.6s; background: #46505a; } .st8 { left: 130px; top: 75px; background: #d8c193; animation-delay: -.9s; }
@keyframes hop { 50% { transform: translateY(-14px) rotate(40deg); } }

/* ---------- Product cards ---------- */
.p-card, .mini-card, .area-card, .feature { --tx: 0deg; --ty: 0deg; transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform .25s ease-out, box-shadow .3s, border-color .3s; }
.p-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; text-decoration: none; color: var(--ink); }
.p-card:hover, .mini-card:hover, .area-card:hover { box-shadow: var(--shadow-lg); border-color: var(--lime); }
.p-vis { height: 200px; border-radius: 14px; overflow: hidden; background: var(--cream); }
.p-vis .photo, .mini-vis .photo { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.p-card:hover .photo, .mini-card:hover .photo { transform: scale(1.08); }
.p-card:hover .b3d.spin { animation-duration: 3s; }
.p-card h3 { margin: 6px 0 0; }
.p-card p { color: var(--ink-2); font-size: 14.5px; margin: 0; flex: 1; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--brick); }
.more .ic { transition: transform .25s; }
a:hover .more .ic, .mini-card:hover .ic { transform: translateX(4px); }

/* ---------- Wall build section ---------- */
.wall-sec { position: relative; background: var(--g950); overflow: hidden; }
.wall-stage { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 60px 16px; }
.wall { display: flex; flex-wrap: wrap; gap: 6px; width: min(1100px, 100%); }
.wb { height: clamp(26px, 5vw, 54px); flex: 0 0 calc((100% - 66px) / 12); border-radius: 4px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), inset 0 2px 0 rgba(255, 255, 255, .15); }
.wb.half { flex-basis: calc((100% - 66px) / 24 - 3px); }
.wb--fly { background: #c9cbc6 radial-gradient(rgba(90, 95, 88, .35) 1px, transparent 1.4px) 0 0/7px 7px; }
.wb--red { background: #b5532a radial-gradient(rgba(70, 20, 5, .3) 1px, transparent 1.5px) 0 0/9px 9px; }
.wall-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 24px; pointer-events: none; }
.wall-text > * { background: rgba(7, 33, 15, .82); padding: 4px 18px; border-radius: 10px; }
.wall-text span { font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--lime-l); font-size: 14px; }
.lang-ta .wall-text span { letter-spacing: 0; text-transform: none; }
.wall-text b { font: 900 clamp(3rem, 11vw, 8.5rem)/1 var(--slab); margin: 8px 0; padding: 10px 28px; }
.lang-ta .wall-text b { font-family: var(--tamil); font-size: clamp(2.4rem, 8vw, 6rem); }
.wall-text p { max-width: 560px; font-size: 1.1rem; margin: 0; color: var(--g200); }

/* ---------- USP & delay calculator ---------- */
.savings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 10px; }
.savings div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.savings b { display: block; font: 900 30px/1.1 var(--slab); color: var(--g800); }
.savings span { font-size: 13px; color: var(--muted); }
.delay { background: #fff; border: 2px solid var(--g800); border-radius: 22px; padding: 28px; box-shadow: var(--shadow); }
.delay h3 { font-size: 1.4rem; }
.step-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #efece1; }
.step-row > span { font-size: 15px; color: var(--ink-2); }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid #c9d8c4; background: var(--cream); font-size: 22px; font-weight: 700; color: var(--g800); cursor: pointer; transition: background .2s, transform .1s; }
.stepper button:hover { background: var(--g100); }
.stepper button:active { transform: scale(.92); }
.stepper input { width: 84px; text-align: center; font-weight: 800; padding: 8px 4px; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.delay-out { margin-top: 18px; background: var(--brick-50); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; color: #7a3416; }
.delay-out b { font: 900 clamp(2rem, 4vw, 2.6rem)/1.1 var(--slab); color: var(--brick-d); }
.delay-out small { font-size: 13px; }

/* ---------- Feature cards ---------- */
.feature { background: var(--cream); border-radius: var(--r); padding: 28px; border: 1px solid transparent; }
.soft .feature { background: var(--cream); }
.feature:hover { border-color: var(--lime); box-shadow: var(--shadow); }
.feature-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--g800); color: var(--lime-l); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: transform .4s; }
.feature-ic .ic { width: 28px; height: 28px; }
.feature:hover .feature-ic { transform: rotate(-8deg) scale(1.08); }
.feature-n { font: 900 2rem/1 var(--slab); color: var(--lime); display: block; margin-bottom: 10px; }
.feature p { color: var(--ink-2); margin: 0; font-size: 15px; }

/* ---------- Delivery map ---------- */
.map-box { position: relative; max-width: 540px; margin: 0 auto; overflow: hidden; }
.dmap { width: 100%; height: auto; overflow: visible; }
.ring-spin { transform-origin: 260px 260px; animation: ringspin 60s linear infinite; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.ring-lbl { font: 700 11px var(--sans); fill: #4d7a3a; }
.river { fill: none; stroke: #7fb7d9; stroke-width: 9; stroke-linecap: round; opacity: .75; }
.river.thin { stroke-width: 5; }
.river-lbl { font: italic 600 12px var(--sans); fill: #3b7aa3; }
.route { fill: none; stroke: var(--brick); stroke-width: 3; stroke-dasharray: 8 6; stroke-linecap: round; }
.town { cursor: pointer; outline: none; }
.town .dot { fill: #fff; stroke: var(--g800); stroke-width: 3; transition: fill .25s, r .25s; }
.town .pulse { fill: var(--lime); opacity: 0; transform-box: fill-box; transform-origin: center; }
.town text { font: 700 13px var(--sans); fill: var(--g900); paint-order: stroke; stroke: #eef6e4; stroke-width: 4px; stroke-linejoin: round; transition: fill .2s; }
.lang-ta .town text { font-family: var(--tamil); font-size: 12px; }
.town:hover .dot, .town:focus-visible .dot { fill: var(--lime); }
.town.on .dot { fill: var(--g800); r: 9; }
.town.on .pulse { animation: pulse 1.6s ease-out infinite; }
.town.on text { fill: var(--brick-d); }
@keyframes pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.factory rect { fill: var(--brick); }
.factory text { font: 800 12px var(--sans); fill: var(--brick-d); paint-order: stroke; stroke: #eef6e4; stroke-width: 4px; }
.map-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 6px; }
.map-panel { background: var(--g800); color: #fff; border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 8px; margin: 20px 0; box-shadow: var(--shadow); }
.map-panel .ok { color: var(--lime-l); font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.map-panel .ok b { color: #fff; }
.mp-title { font: 800 1.45rem/1.2 var(--slab); }
.lang-ta .mp-title { font-family: var(--tamil); }
.mp-km { color: var(--g200); font-size: 14px; }
.mp-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.map-panel.flash { animation: flash .6s; }
@keyframes flash { 30% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(140, 198, 63, .45); } }
/* PAT delivery lorry on the map panel */
.truck-road { position: relative; height: 172px; margin: -24px -24px 8px; border-radius: var(--r) var(--r) 0 0; overflow: hidden; background: linear-gradient(#dcefd0, #eef6e4 70%); }
.truck-road::before { content: ''; position: absolute; left: 0; right: 0; bottom: 26px; height: 34px; background: radial-gradient(circle at 20px 34px, #a9cf8f 18px, transparent 19px) 0 0 / 70px 34px repeat-x, radial-gradient(circle at 50px 34px, #93c178 13px, transparent 14px) 0 0 / 110px 34px repeat-x; animation: scenery 4s linear infinite; }
.truck-road::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: repeating-linear-gradient(90deg, #f4f3ec 0 18px, transparent 18px 40px) 0 12px / 40px 3px repeat-x; background-color: #3a403c; animation: road .5s linear infinite; }
@keyframes road { to { background-position: -40px 12px; } }
@keyframes scenery { to { background-position: -70px 0, -110px 0; } }
.pat-truck { position: absolute; left: 50%; bottom: 6px; width: 330px; margin-left: -165px; z-index: 1; overflow: visible; }
.truck-body { animation: bump .45s ease-in-out infinite alternate; }
@keyframes bump { to { transform: translateY(1.3px); } }
.pat-truck .spin { transform-box: fill-box; transform-origin: center; animation: wheel .45s linear infinite; }
@keyframes wheel { to { transform: rotate(360deg); } }
.map-panel.go .pat-truck { animation: deliver 1.8s cubic-bezier(.6, 0, .4, 1); }
@keyframes deliver { 0% { transform: none; } 45% { transform: translateX(480px); } 46% { transform: translateX(-480px); } 100% { transform: none; } }
@media (max-width: 680px) { .truck-road { height: 140px; margin: -24px -24px 6px; } .pat-truck { width: 260px; margin-left: -130px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-height: 40px; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { background: var(--g800); color: #fff; border-color: var(--g800); }
.chip .ic { color: var(--brick); }
.chip:hover .ic { color: var(--lime-l); }

/* ---------- Brick calculator ---------- */
.calc { background: #fff; color: var(--ink); border-radius: 22px; padding: 28px; display: grid; gap: 18px; box-shadow: var(--shadow-lg); }
.calc fieldset { border: 0; padding: 0; margin: 0; }
.calc legend { font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { position: relative; }
.pills input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pills span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border: 2px solid var(--g800); border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--g800); cursor: pointer; transition: background .2s, color .2s; }
.pills input:checked + span { background: var(--g800); color: #fff; }
.pills input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 2px; }
.pills[hidden] { display: none; }
.calc-row { display: grid; gap: 6px; }
.calc-row label { font-weight: 700; font-size: 14px; }
.calc-in { display: flex; align-items: center; gap: 14px; }
.calc-in input[type="range"] { flex: 1; padding: 0; border: 0; min-height: 30px; accent-color: var(--brick); background: transparent; box-shadow: none; }
.num { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.num input { width: 82px; text-align: center; font-weight: 800; padding: 8px 4px; }
.calc-out { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; background: var(--g100); border-radius: 16px; padding: 18px; }
.wall-preview { height: 110px; display: flex; align-items: flex-end; justify-content: center; }
.wall-fill { width: 100px; height: 60px; border-radius: 4px; transition: width .35s, height .35s; background-color: #8f8f8a; background-image: linear-gradient(#f0eee4 3px, transparent 3px), linear-gradient(90deg, #f0eee4 3px, transparent 3px), linear-gradient(90deg, #f0eee4 3px, transparent 3px); background-size: 100% 14px, 30px 28px, 30px 28px; background-position: 0 0, 0 0, 15px 14px; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
.wall-fill.red { background-color: var(--brick); }
.wall-fill.fly { background-color: #bfc1bb; }
.wall-fill.block { background-color: #8b9087; background-size: 100% 22px, 52px 44px, 52px 44px; background-position: 0 0, 0 0, 26px 22px; }
.calc-res { display: flex; flex-direction: column; }
.calc-res span:first-child { font-size: 13px; color: var(--ink-2); }
.calc-res b { font: 900 clamp(1.8rem, 3.5vw, 2.5rem)/1.1 var(--slab); color: var(--g800); }
.lang-ta .calc-res b { font-family: var(--tamil); }
.calc-res small { color: var(--muted); }
.form-note { font-size: 12.5px; color: var(--muted); margin: 0; }
.dark .calc p.form-note { color: var(--muted); }
.calc-bricks { display: flex; gap: 40px; align-items: center; justify-content: center; perspective: 900px; padding: 40px 0; flex-wrap: wrap; }
.calc-bricks.big { padding: 60px 0; }

/* ---------- Tables ---------- */
.table-box { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.cmp { width: 100%; border-collapse: collapse; min-width: 600px; font-size: 15px; }
.cmp th, .cmp td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #efece1; }
.cmp thead th { background: var(--g800); color: #fff; }
.cmp thead th:nth-child(2) { background: var(--g700); }
.cmp tbody th { font-weight: 700; }
.cmp td:nth-child(2) { background: rgba(140, 198, 63, .08); font-weight: 600; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.spec-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.spec-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.spec-table th, .spec-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid #efece1; }
.spec-table th { width: 45%; font-weight: 700; background: #fbfaf5; }
.use-list { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.use-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 1.05rem; }
.use-list .ic { color: #fff; background: var(--g800); border-radius: 50%; padding: 4px; width: 24px; height: 24px; stroke-width: 3; margin-top: 2px; }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: s; position: relative; }
.steps::before { content: ''; position: absolute; top: 40px; left: 16%; right: 16%; border-top: 3px dashed var(--lime); }
.steps li { text-align: center; position: relative; }
.step-ic { position: relative; width: 80px; height: 80px; border-radius: 50%; background: var(--g800); color: var(--lime-l); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 0 0 8px #fff, 0 0 0 10px var(--lime); }
.step-ic .ic { width: 34px; height: 34px; }
.step-ic em { position: absolute; top: -4px; right: -4px; width: 28px; height: 28px; border-radius: 50%; background: var(--brick); color: #fff; font: 800 14px/28px var(--sans); font-style: normal; }
.steps p { color: var(--ink-2); }

/* ---------- Reviews ---------- */
.review { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.review::before { content: '“'; position: absolute; right: 20px; top: -6px; font: 900 90px/1 var(--slab); color: var(--g100); }
.stars { display: flex; gap: 2px; color: #d99a1e; }
.stars .ic { fill: currentColor; width: 18px; height: 18px; }
.review blockquote { margin: 0; color: var(--ink-2); flex: 1; position: relative; }
.review figcaption { font-weight: 800; color: var(--g900); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .2s; }
.faq details[open] { border-color: var(--lime); background: #fff; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 20px; font-weight: 700; font-size: 1.05rem; color: var(--g900); position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--g800); color: #fff; font: 700 20px/30px var(--sans); text-align: center; transition: transform .3s, background .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--brick); }
.faq-a { padding: 0 20px 6px; color: var(--ink-2); }

/* ---------- Quote section ---------- */
.quote-sec { background: linear-gradient(135deg, var(--brick-d), var(--brick)); color: #fff; position: relative; overflow: hidden; }
.quote-sec::before { content: ''; position: absolute; inset: 0; opacity: .1; background-image: linear-gradient(#fff 2px, transparent 2px), linear-gradient(90deg, #fff 2px, transparent 2px); background-size: 80px 32px, 80px 64px; background-position: 0 0, 40px 32px; }
.quote-sec h2 { color: #fff; }
.quote-sec p { color: #fde3d6; }
.quote-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; position: relative; }
.phones { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; }
.phones a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); padding: 10px 16px; border-radius: 12px; min-height: 46px; transition: background .2s; }
.phones a:hover { background: rgba(255, 255, 255, .25); }
.ph-label { color: #fde3d6 !important; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 0; font-family: var(--sans); }
.addr { display: flex; gap: 8px; align-items: flex-start; }
.addr a { color: #fff; }
.quote-sec .small { color: #fde3d6; }
.quote-form { background: #fff; color: var(--ink); border-radius: 22px; padding: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; box-shadow: var(--shadow-lg); }
.quote-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.quote-form .full { grid-column: 1 / -1; }
.form-err { color: #b42318; font-weight: 600; font-size: 14px; margin: 0; }
.quote-form .form-note { color: var(--muted); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: radial-gradient(800px 400px at 85% 30%, rgba(140, 198, 63, .25), transparent 60%), linear-gradient(135deg, var(--g900), var(--g800)); color: #fff; padding: 56px 0 72px; overflow: hidden; }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: var(--g200); font-size: 1.15rem; max-width: 620px; }
.page-hero .ticks { color: var(--g200); }
.page-hero .ticks .ic { color: var(--lime-l); }
.page-hero .ta-line.dark { color: var(--lime-l); }
.page-hero--red { background: radial-gradient(800px 400px at 85% 30%, rgba(217, 119, 74, .35), transparent 60%), linear-gradient(135deg, var(--g900), var(--g800)); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.ph-text .btn-row { margin-top: 24px; }
.crumbs ol { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--g200); }
.crumbs li + li::before { content: '›'; margin-right: 6px; opacity: .7; }
.crumbs a { color: var(--lime-l); text-decoration: none; }
.page-hero.nf { padding: 80px 0; }
.mini-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; text-decoration: none; color: var(--g900); }
.mini-vis { height: 150px; background: var(--cream); border-radius: 12px; overflow: hidden; }
.mini-vis .pile { transform: scale(.5); }
.mini-card b { font-family: var(--slab); font-size: 1.1rem; }
.lang-ta .mini-card b { font-family: var(--tamil); }
.mini-card span { display: inline-flex; align-items: center; gap: 6px; color: var(--brick); font-weight: 700; font-size: 14px; }
.area-card { display: flex; flex-direction: column; gap: 6px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; text-decoration: none; color: var(--ink); }
.area-card b { font: 800 1.25rem var(--slab); color: var(--g900); }
.area-card b .ta { font-size: .85rem; color: var(--muted); font-weight: 600; margin-left: 6px; }
.area-card p { color: var(--ink-2); font-size: 14.5px; margin: 0; flex: 1; }
.map-embed { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: 24px; }
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--g800); color: #fff; padding: 56px 0; overflow: hidden; }
.cta-in { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: 6px; }
.cta-band p { color: var(--g200); margin: 0; }
.cta-bricks { display: flex; gap: 30px; perspective: 700px; }
.cta-bricks .b3d { --w: 90px; --h: 30px; --d: 44px; }
.cta-btns { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Footer ---------- */
.footer { background: var(--g950); color: #c9d8c4; padding: 64px 0 24px; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .9fr 1.1fr 1.2fr; gap: 40px; }
.footer .logo { margin-bottom: 16px; }
.footer .logo img { height: 76px; }
.footer h3 { color: #fff; font-family: var(--sans); font-size: 15px; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px; }
.lang-ta .footer h3 { font-family: var(--tamil); letter-spacing: 0; text-transform: none; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer ul.cols-2 { grid-template-columns: 1fr 1fr; }
.footer a { color: #c9d8c4; text-decoration: none; }
.footer a:hover { color: var(--lime-l); }
.footer address { font-style: normal; }
.footer address p { margin-bottom: 12px; }
.footer .small { color: #9db59a; }
.footer .credit a { color: var(--lime-l); font-weight: 700; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid #1f4a30; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #9db59a; }

/* ---------- Floating & mobile bar ---------- */
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; }
.fab-wa { width: 62px; height: 62px; border-radius: 50%; background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(0, 0, 0, .25); position: relative; transition: transform .2s; }
.fab-wa::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--wa); animation: fabpulse 2s ease-out infinite; z-index: -1; }
.fab-wa:hover { transform: scale(1.08); }
.fab-wa svg { width: 32px; height: 32px; }
@keyframes fabpulse { from { transform: scale(1); opacity: .6; } to { transform: scale(1.7); opacity: 0; } }
.mobile-bar { display: none; }

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .p-card[data-reveal].in, .js .feature[data-reveal].in, .js .mini-card[data-reveal].in, .js .area-card[data-reveal].in { transform: perspective(900px) rotateX(var(--tx)) rotateY(var(--ty)); }

/* ---------- Photos ---------- */
.photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-photo { position: relative; }
.ph-photo > .photo { height: auto; aspect-ratio: 4 / 3; border-radius: 22px; border: 6px solid rgba(255, 255, 255, .14); box-shadow: var(--shadow-lg); }
.ph-float { position: absolute; left: -28px; bottom: -24px; perspective: 700px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.ph-float .b3d { --w: 110px; --h: 36px; --d: 52px; }
.photo-wide { margin: 0 0 32px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.photo-wide .photo { height: auto; aspect-ratio: 2 / 1; }
.sand-grid { align-items: start; }
.cmp-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.cmp-photos figure { margin: 0; position: relative; height: 280px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.cmp-photos figcaption { position: absolute; left: 16px; bottom: 16px; background: var(--g800); color: #fff; font-weight: 800; padding: 8px 16px; border-radius: 999px; }
.cmp-photos figure:last-child figcaption { background: var(--brick); }

/* ---------- Strength lab ---------- */
.lab-sec { background: #fff; border-block: 1px solid var(--line); }
.lab { background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; }
.lab-tabs { display: flex; gap: 6px; padding: 8px; background: var(--g900); overflow-x: auto; }
.lab-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 16px; border: 0; border-radius: 14px; background: transparent; color: var(--g200); font: 700 15px var(--sans); cursor: pointer; white-space: nowrap; transition: background .25s, color .25s; }
.lang-ta .lab-tabs button { font-family: var(--tamil); }
.lab-tabs button:hover { background: rgba(255, 255, 255, .08); }
.lab-tabs button[aria-selected="true"] { background: #fff; color: var(--g900); }
.lab-tabs button[aria-selected="true"] .ic { color: var(--brick); }
.lab-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "stage head" "stage side"; grid-template-rows: auto 1fr; column-gap: 36px; row-gap: 0; padding: 32px; }
.lab-panel > .press, .lab-panel > .drop-stage, .lab-panel > .tank { grid-area: stage; }
.lab-head { grid-area: head; align-self: end; }
.lab-side { grid-area: side; }
.lab-panel[hidden] { display: none; }
.lab-head h3 { font-size: 1.45rem; }
.lab-head p { color: var(--ink-2); }
.lab-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
.btn-outline { background: transparent; color: var(--g800); border: 2px solid var(--g800); }
.btn-outline:hover { background: var(--g100); color: var(--g800); }
.btn-text { background: none; color: var(--muted); text-decoration: underline; padding-left: 8px; padding-right: 8px; }
[data-hold] { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
[data-hold].holding { background: var(--brick-d); transform: scale(.97); }
.lab-result { min-height: 3em; margin: 6px 0 0; font-weight: 600; color: var(--ink-2); }
.lab-result.pass { color: #16794a; }
.lab-note { margin: 0; padding: 12px 32px 18px; font-size: 12.5px; color: var(--muted); border-top: 1px solid #efece1; }

/* Compression machine */
.press, .drop-stage, .tank { position: relative; height: 380px; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fbfaf5, #e9ece4); }
.press-beam { position: absolute; left: 10%; right: 10%; top: 22px; height: 44px; border-radius: 10px; background: linear-gradient(#3b4a40, #24312a); }
.press-col { position: absolute; top: 40px; bottom: 30px; width: 20px; border-radius: 6px; background: linear-gradient(90deg, #8d979a, #d6dbdc 45%, #7c868a); }
.press-col.l { left: 15%; } .press-col.r { right: 15%; }
.press-ram { --gap: 0px; --c: 0px; position: absolute; left: 50%; top: 66px; width: 52%; transform: translate(-50%, calc(var(--gap) + var(--c))); transition: transform .5s cubic-bezier(.3, .7, .3, 1); display: flex; flex-direction: column; align-items: center; }
.press.engaged .press-ram { --gap: 80px; }
.press-rod { width: 40px; height: 70px; background: linear-gradient(90deg, #9aa4a7, #eef1f1 45%, #8a9497); }
.press-platen { width: 100%; height: 18px; border-radius: 4px; background: linear-gradient(#7c868a, #545e62); }
.press-platen.bottom { position: absolute; left: 24%; right: 24%; width: auto; bottom: 58px; }
.press-base { position: absolute; left: 6%; right: 6%; bottom: 14px; height: 44px; border-radius: 10px; background: linear-gradient(#3b4a40, #1b2620); }
.lab-brick { --sq: 1; --heat: 0; position: absolute; left: 50%; bottom: 76px; width: 46%; height: 70px; border-radius: 4px; transform: translateX(-50%) scaleY(var(--sq)); transform-origin: bottom; background: #c9cbc6 radial-gradient(rgba(90, 95, 88, .35) 1px, transparent 1.4px) 0 0/7px 7px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12), inset 0 4px 0 rgba(255, 255, 255, .4); overflow: hidden; }
.crack-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255, 140, 60, .7), rgba(255, 90, 30, 0) 70%); opacity: var(--heat); }
.lab-stamp { position: absolute; top: 18px; right: 18px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 3px solid #16794a; border-radius: 10px; background: rgba(255, 255, 255, .92); color: #16794a; font: 900 20px/1 var(--slab); text-transform: uppercase; letter-spacing: 1px; transform: rotate(-8deg) scale(1.8); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2, 1.6, .4, 1), opacity .3s; }
.lang-ta .lab-stamp { font-family: var(--tamil); text-transform: none; letter-spacing: 0; }
.lab-stamp.show { opacity: 1; transform: rotate(-8deg) scale(1); }

.gauge { width: 100%; max-width: 300px; display: block; margin: 8px 0; }
.gauge .g-bg, .gauge .g-fill, .gauge .g-zone { fill: none; stroke-width: 14; stroke-linecap: round; }
.gauge .g-bg { stroke: #ebe8dc; }
.gauge .g-fill { stroke: var(--brick); transition: stroke .3s; }
.gauge .g-fill.ok { stroke: #2f9a5b; }
.gauge .g-zone { stroke: #2f9a5b; stroke-width: 5; stroke-linecap: butt; transform: translateY(-11px); transform-origin: center; opacity: .8; }
.gauge text { font: 700 9px var(--sans); fill: var(--muted); }
.gauge line { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.gauge circle { fill: var(--ink); }
.lab-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lab-nums > div { background: var(--cream); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.lab-nums b { font: 900 2rem/1.1 var(--slab); color: var(--g800); }
.lab-nums span { font-size: 13px; color: var(--muted); }

/* Drop test */
.drop-stage { background: linear-gradient(#eaf3f8, #f7f5ec 70%); }
.drop-ruler { position: absolute; left: 18%; top: 40px; bottom: 64px; width: 14px; border-left: 3px solid var(--ink-2); background: repeating-linear-gradient(transparent 0 22px, var(--ink-2) 22px 24px) left / 10px 100% no-repeat; }
.drop-ruler span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font: 800 14px var(--sans); color: var(--ink-2); white-space: nowrap; }
.drop-brick { position: absolute; left: 50%; top: 40px; width: 150px; height: 46px; margin-left: -75px; border-radius: 4px; background: #c9cbc6 radial-gradient(rgba(90, 95, 88, .35) 1px, transparent 1.4px) 0 0/7px 7px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12), 0 10px 18px rgba(0, 0, 0, .15); transition: transform .55s cubic-bezier(.55, 0, 1, .45); }
.drop-stage.dropped .drop-brick { transform: translateY(230px) rotate(2deg); }
.drop-stage.impact .drop-brick { animation: land .5s ease-out; }
@keyframes land { 0% { transform: translateY(230px) rotate(2deg); } 35% { transform: translateY(214px) rotate(-3deg); } 70% { transform: translateY(230px) rotate(1deg); } 100% { transform: translateY(230px) rotate(0); } }
.drop-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(#a9aca3, #8d9088); border-top: 4px solid #6f736b; }
.dust { position: absolute; left: 50%; bottom: 64px; }
.dust i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: rgba(160, 150, 130, .7); opacity: 0; }
.drop-stage.impact .dust i { animation: puff .8s ease-out forwards; }
.dust i:nth-child(1) { --dx: -90px; --dy: -30px; } .dust i:nth-child(2) { --dx: -60px; --dy: -50px; } .dust i:nth-child(3) { --dx: -30px; --dy: -24px; } .dust i:nth-child(4) { --dx: 30px; --dy: -40px; }
.dust i:nth-child(5) { --dx: 60px; --dy: -24px; } .dust i:nth-child(6) { --dx: 90px; --dy: -44px; } .dust i:nth-child(7) { --dx: -110px; --dy: -10px; } .dust i:nth-child(8) { --dx: 110px; --dy: -12px; }
@keyframes puff { 0% { opacity: .9; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(2.4); } }
.drop-stage.impact { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* Water test */
.tank { background: linear-gradient(#f7f9fb, #eef2f0); }
.tank::before { content: ''; position: absolute; left: 14%; right: 14%; top: 70px; bottom: 36px; border: 4px solid #a7bfcc; border-top: 0; border-radius: 0 0 18px 18px; z-index: 2; pointer-events: none; }
.tank-water { --lvl: 0; position: absolute; left: calc(14% + 4px); right: calc(14% + 4px); bottom: 40px; height: calc((100% - 110px) * var(--lvl)); max-height: calc(100% - 110px); border-radius: 0 0 14px 14px; background: linear-gradient(rgba(110, 180, 220, .55), rgba(60, 140, 200, .75)); transition: height 1.2s ease-in-out; }
.tank-water::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: radial-gradient(ellipse at 50% 100%, rgba(110, 180, 220, .7) 60%, transparent 62%) 0 0 / 40px 12px repeat-x; animation: wave 2s linear infinite; }
@keyframes wave { to { background-position: 40px 0; } }
.tank-brick { position: absolute; left: 50%; bottom: 44px; width: 150px; height: 46px; margin-left: -75px; border-radius: 4px; background: #c9cbc6 radial-gradient(rgba(90, 95, 88, .35) 1px, transparent 1.4px) 0 0/7px 7px; transition: background-color 2s; z-index: 1; }
.tank.soaked .tank-brick { background-color: #a9aca6; }
.tank-clock { position: absolute; left: 16px; top: 16px; z-index: 3; background: var(--g800); color: #fff; padding: 8px 14px; border-radius: 999px; font-weight: 700; }
.tank-clock b { font: 900 1.2rem var(--slab); }
.absorb { background: var(--cream); border-radius: 12px; padding: 14px; }
.absorb-top { display: flex; justify-content: space-between; align-items: baseline; }
.absorb-top b { font: 900 2rem/1 var(--slab); color: var(--g800); }
.absorb-bar { position: relative; height: 16px; margin: 10px 0 6px; border-radius: 999px; background: #e6e2d4; overflow: hidden; }
.absorb-zone { position: absolute; left: 50%; width: 20%; top: 0; bottom: 0; background: rgba(47, 154, 91, .3); }
.absorb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #6eb4dc, #3c8cc8); transition: width .3s; }
.absorb-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* Quality promise */
.promise { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; margin-top: 40px; background: var(--g800); color: #fff; border-radius: 24px; padding: 36px 40px; }
.promise h3 { color: #fff; font-size: 1.6rem; }
.promise .use-list li { color: var(--g200); }
.promise .use-list .ic { background: var(--lime); color: var(--g950); }
.promise-seal { position: relative; width: 170px; height: 170px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, #1f7a45, #0b2e1a); box-shadow: 0 0 0 6px var(--g800), 0 0 0 9px var(--lime); text-align: center; transform: rotate(-8deg); }
.promise-seal::before { content: ''; position: absolute; inset: 10px; border: 2px dashed var(--lime-l); border-radius: 50%; animation: ringspin 30s linear infinite; }
.promise-seal span { font: 900 1.9rem/1 var(--slab); color: var(--lime-l); }
.promise-seal b { font: 900 1.1rem/1.3 var(--slab); letter-spacing: 1px; }
.promise-seal small { font-weight: 700; letter-spacing: 3px; font-size: .8rem; color: var(--g200); }
.lang-ta .promise-seal b { font-family: var(--tamil); letter-spacing: 0; }

@media (max-width: 980px) {
  .lab-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "side"; grid-template-rows: auto; row-gap: 14px; padding: 20px; }
  .lab-head p { font-size: 14.5px; margin: 0; }
  .gauge { max-width: 220px; margin: 0 auto; }
  .promise { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 28px 22px; }
  .promise > div:last-child { justify-self: stretch; }
  .ph-photo > .photo { max-height: 300px; }
  .ph-float { left: -6px; bottom: -18px; transform: scale(.75); }
}
@media (max-width: 680px) {
  .press, .drop-stage, .tank { height: 300px; }
  .press.engaged .press-ram { --gap: 30px; }
  .press-rod { height: 40px; }
  .drop-stage.dropped .drop-brick, .drop-stage.impact .drop-brick { transform: translateY(150px); animation: none; }
  .lab-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
  .lab-side > .lab-btns { grid-column: 1 / -1; order: -2; margin: 0; }
  .lab-side > .lab-result { grid-column: 1 / -1; order: -1; min-height: 0; margin: 0; font-size: 14px; }
  .lab-side > .absorb { grid-column: 1 / -1; }
  [data-hold], [data-drop], [data-soak] { flex: 1 1 100%; }
  .lab-nums { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lab-nums > div { padding: 8px 12px; }
  .lab-nums b { font-size: 1.4rem; }
  .gauge { max-width: 170px; }
  .lab-tabs button { font-size: 13px; padding: 10px 8px; gap: 4px; }
  .lab-tabs button .ic { display: none; }
  .lab-note { padding: 12px 20px 16px; }
  .cmp-photos figure { height: 180px; }
}

/* ---------- Owner (About page) ---------- */
.owner-sec { background: linear-gradient(180deg, var(--cream), #fff); }
.owner { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: center; }
.owner-photo { position: relative; margin: 0 0 0 24px; max-width: 320px; }
.owner-photo::before { content: ''; position: absolute; inset: 24px -24px -24px 24px; border-radius: 24px; z-index: 0; background: var(--brick) radial-gradient(rgba(70, 20, 5, .3) 1px, transparent 1.5px) 0 0 / 9px 9px; background-image: linear-gradient(#f0d6c8 3px, transparent 3px), linear-gradient(90deg, #f0d6c8 3px, transparent 3px), linear-gradient(90deg, #f0d6c8 3px, transparent 3px); background-size: 100% 26px, 60px 52px, 60px 52px; background-position: 0 0, 0 0, 30px 26px; }
.owner-photo img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 22px; border: 6px solid #fff; box-shadow: var(--shadow-lg); }
.owner-photo figcaption { position: absolute; z-index: 2; left: -24px; bottom: 28px; background: var(--g800); color: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; line-height: 1.25; }
.owner-photo figcaption b { font: 800 1.15rem var(--slab); }
.lang-ta .owner-photo figcaption b { font-family: var(--tamil); }
.owner-photo figcaption span { font-size: 13px; color: var(--lime-l); }
.owner-text p { color: var(--ink-2); font-size: 1.06rem; }
.motto { margin: 24px 0; padding: 18px 24px; border-radius: 16px; background: var(--g100); font: 800 1.5rem/1.3 var(--slab); color: var(--g800); position: relative; }
.lang-ta .motto { font-family: var(--tamil); font-size: 1.3rem; }
.motto span { display: block; font: 700 12px var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--brick); margin-bottom: 4px; }
.lang-ta .motto span { font-family: var(--tamil); letter-spacing: 0; text-transform: none; font-size: 13px; }
.owner-chips { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.owner-chips li { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; color: var(--g900); }
.owner-chips .ic { color: var(--g700); stroke-width: 3; }
@media (max-width: 980px) {
  .owner { grid-template-columns: minmax(0, 1fr); gap: 48px; justify-items: center; }
  .owner-photo { margin: 0; max-width: 280px; }
  .owner-text .btn { width: 100%; white-space: normal; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav-toggle { display: flex; }
  .nav { position: fixed; top: calc(var(--header-h)); left: 0; right: 0; bottom: 0; background: #fff; transform: translateX(100%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s .35s; overflow-y: auto; padding: 16px 20px 100px; border-top: 1px solid var(--line); }
  .nav.open { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { font-size: 18px; padding: 14px 8px; border-bottom: 1px solid #efece1; border-radius: 0; }
  .nav a::after { display: none; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 980px) {
  .hero-grid, .two-col, .quote-grid, .ph-grid, .spec-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-grid { padding-top: 48px; padding-bottom: 56px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-in { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cta-btns { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ph-visual { order: -1; }
  .stack { transform: scale(.75); height: 250px; margin-top: -30px; }
  .map-sec > :first-child { order: 0; }
}
@media (max-width: 680px) {
  :root { --header-h: 64px; }
  .wrap { padding: 0 16px; }
  .topbar .wrap { justify-content: center; }
  .topbar-links, .tb-extra { display: none; }
  .logo img { height: 52px; }
  .header-cta .btn { display: none; }
  .section { padding: 64px 0; }
  .grid-3, .grid-4, .steps, .savings { grid-template-columns: minmax(0, 1fr); }
  .steps::before { display: none; }
  .stats { padding: 20px; gap: 18px; }
  .hero { min-height: auto; }
  .quick-quote { padding: 20px; }
  .quote-form { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .calc { padding: 20px; }
  .calc-out { grid-template-columns: 1fr; text-align: center; }
  .calc-in { flex-wrap: wrap; }
  .calc-in input[type="range"] { flex-basis: 100%; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer { padding-bottom: 96px; }
  .fab { display: none; }
  .mobile-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .1); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px; font-weight: 800; font-size: 13px; text-decoration: none; color: var(--g800); }
  .mobile-bar a:nth-child(1) { background: var(--brick); color: #fff; }
  .mobile-bar a:nth-child(2) { background: var(--wa); color: var(--g950); }
  .mobile-bar .ic { width: 22px; height: 22px; }
  .wall-stage { min-height: 70vh; }
  .wall { gap: 4px; }
  .wb { flex-basis: calc((100% - 44px) / 12); }
  .wb.half { flex-basis: calc((100% - 44px) / 24 - 2px); }
  .map-embed iframe { height: 320px; }
  .cta-bricks { display: none; }
  .btn-row .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}