:root { --ink:#101b32; --blue:#163b78; --cyan:#04a7d9; --ice:#edf6f8; --paper:#f7f4ed; --line:rgba(16,27,50,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar { height:86px; display:flex; align-items:center; padding:0 4.5vw; background:#fff; position:relative; z-index:10; border-bottom:1px solid #e6e8ea; }
.brand { width:260px; display:flex; align-items:center; }
.brand img, footer img { width:220px; height:auto; display:block; }
.topbar nav { display:flex; gap:28px; margin-left:auto; margin-right:38px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.topbar nav a { transition:color .2s; }
.topbar nav a:hover { color:var(--cyan); }
.contact-link { background:var(--cyan); color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; padding:16px 20px; }
.contact-link span, .button span { margin-left:18px; }

.hero { min-height:calc(100vh - 86px); position:relative; color:#fff; overflow:hidden; display:flex; align-items:center; padding:80px 7vw 150px; background:#102445; }
.hero-image { position:absolute; inset:0; background:url('facility-aerial.jpg') center 52%/cover no-repeat; filter:saturate(.76) contrast(1.06); transform:scale(1.01); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,18,39,.94) 0%,rgba(10,31,61,.76) 45%,rgba(6,24,47,.2) 100%), linear-gradient(0deg,rgba(7,23,45,.78),transparent 50%); }
.hero-grid { position:absolute; inset:0; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px); background-size:calc(100% / 6) 100%,calc(100% / 6) 100%; }
.hero-copy { position:relative; z-index:1; max-width:850px; }
.eyebrow,.section-label { font-size:11px; text-transform:uppercase; letter-spacing:.22em; font-weight:700; display:flex; align-items:center; gap:12px; }
.eyebrow span { width:34px; height:2px; background:var(--cyan); display:inline-block; }
h1 { font-size:clamp(58px,7.5vw,116px); line-height:.89; letter-spacing:-.06em; margin:28px 0 30px; font-weight:700; }
h1 em { color:#8ed9e8; font-style:normal; font-weight:400; }
.lead { max-width:620px; font-size:18px; line-height:1.65; color:rgba(255,255,255,.78); }
.hero-actions { display:flex; align-items:center; gap:38px; margin-top:44px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; padding:19px 24px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.primary { background:var(--cyan); min-width:230px; }
.text-link { font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:8px; }
.hero-meta { position:absolute; z-index:1; bottom:0; left:0; right:0; min-height:105px; display:grid; grid-template-columns:repeat(3,1fr); margin-left:47%; border-top:1px solid rgba(255,255,255,.28); }
.hero-meta div { padding:26px 3vw; border-left:1px solid rgba(255,255,255,.28); display:flex; align-items:center; gap:20px; }
.hero-meta strong { color:#8ed9e8; font-size:21px; letter-spacing:-.04em; }
.hero-meta span { font-size:10px; line-height:1.6; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.68); }

.statement { padding:130px 7vw; display:grid; grid-template-columns:25% 75%; border-bottom:1px solid var(--line); }
.section-label { color:#5a6575; align-self:start; }
.statement h2,.section-head h2,.application-title h2,.quality h2,.contact h2 { font-size:clamp(42px,5.3vw,78px); letter-spacing:-.055em; line-height:.98; margin:0; }
.statement > div { max-width:990px; }
.statement > div > p { margin:42px 0 28px 38%; max-width:580px; color:#596375; font-size:17px; line-height:1.75; }
.inline-link { display:inline-block; margin-left:38%; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--blue); padding-bottom:7px; }

.capabilities { background:var(--ink); color:#fff; padding:120px 7vw; }
.section-head { display:grid; grid-template-columns:22% 48% 30%; align-items:end; padding-bottom:60px; }
.light { color:#94a1b5; }
.section-head p:last-child { color:#aeb7c7; line-height:1.7; font-size:15px; margin:0; max-width:360px; }
.product-grid { border-top:1px solid rgba(255,255,255,.18); display:grid; grid-template-columns:repeat(4,1fr); }
.product-grid article { min-height:350px; padding:30px 26px; border-right:1px solid rgba(255,255,255,.18); position:relative; transition:background .25s,transform .25s; }
.product-grid article:first-child { border-left:1px solid rgba(255,255,255,.18); }
.product-grid article:hover { background:var(--blue); transform:translateY(-5px); }
.number { color:#75d5e7; font-size:11px; letter-spacing:.15em; }
.product-grid h3 { font-size:24px; letter-spacing:-.03em; line-height:1.15; margin:80px 0 18px; max-width:230px; }
.product-grid p { color:#aeb7c7; line-height:1.65; font-size:13px; max-width:240px; }
.arrow { position:absolute; bottom:28px; right:28px; color:#75d5e7; font-size:20px; }

.portfolio { padding:125px 7vw; background:#fff; display:grid; grid-template-columns:38% 56%; column-gap:6%; }
.portfolio-intro { align-self:start; position:sticky; top:36px; }
.portfolio-intro h2,.facility-head h2 { font-size:clamp(42px,5.3vw,78px); letter-spacing:-.055em; line-height:.98; margin:34px 0 30px; }
.portfolio-intro > p:not(.section-label) { max-width:520px; color:#596375; font-size:16px; line-height:1.75; margin-bottom:30px; }
.no-indent { margin-left:0; }
.portfolio-visual { grid-column:2; align-self:start; margin-bottom:46px; background:var(--ice); overflow:hidden; }
.portfolio-visual img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .6s ease; }
.portfolio-visual:hover img { transform:scale(1.025); }
.product-list { grid-column:2; border-top:1px solid var(--ink); }
.product-list-head,.product-list article { display:grid; grid-template-columns:9% 45% 46%; align-items:center; }
.product-list-head { padding:12px 0; color:#737d8d; font-size:9px; text-transform:uppercase; letter-spacing:.18em; font-weight:700; }
.product-list article { min-height:74px; border-top:1px solid var(--line); transition:background .2s,padding .2s; }
.product-list article:hover { background:var(--ice); padding:0 12px; }
.product-list article:first-of-type { border-top:0; }
.product-no { font-size:10px; color:#7a8492; letter-spacing:.12em; }
.product-list h3 { font-size:19px; letter-spacing:.02em; margin:0; }
.product-list p { margin:0; color:#5c6778; font-size:14px; }

.facility { background:var(--ink); color:#fff; padding:120px 7vw 130px; }
.facility-head { display:grid; grid-template-columns:22% 48% 30%; align-items:end; margin-bottom:60px; }
.facility-head h2 { margin:0; }
.facility-head > p:last-child { color:#aeb7c7; line-height:1.7; font-size:15px; margin:0; max-width:380px; }
.facility-gallery { display:grid; grid-template-columns:1.35fr 1fr 1fr; grid-auto-rows:300px; gap:2px; }
.facility-gallery figure { margin:0; position:relative; overflow:hidden; background:#162742; }
.facility-gallery .gallery-large { grid-row:span 2; }
.facility-gallery img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.86); transition:transform .55s ease,filter .55s ease; }
.facility-gallery figure:hover img { transform:scale(1.035); filter:saturate(1); }
.facility-gallery figcaption { position:absolute; inset:auto 0 0; padding:46px 24px 20px; color:#fff; background:linear-gradient(transparent,rgba(5,16,34,.88)); font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.facility-gallery figcaption span { color:#75d5e7; margin-right:12px; font-size:9px; }

.applications { padding:120px 7vw; display:grid; grid-template-columns:48% 52%; gap:6%; background:var(--ice); }
.application-title h2 { margin-top:34px; }
.application-list { border-top:1px solid var(--line); }
.application-list div { border-bottom:1px solid var(--line); padding:18px 4px; font-size:16px; font-weight:700; display:flex; gap:34px; }
.application-list span { color:#6b7585; font-size:10px; font-weight:400; letter-spacing:.15em; padding-top:4px; }

.quality { display:grid; grid-template-columns:55% 45%; min-height:620px; background:var(--blue); color:#fff; }
.quality-photo { background:url('laboratory-testing.jpg') 44% center/cover; clip-path:polygon(0 0,100% 0,88% 100%,0 100%); }
.quality-copy { padding:100px 7vw 80px 4vw; align-self:center; }
.quality-copy h2 { margin:30px 0; }
.quality-copy > p:not(.section-label) { color:#c8d6e7; font-size:16px; line-height:1.75; max-width:520px; }
.certs { display:flex; gap:45px; margin-top:48px; padding-top:28px; border-top:1px solid rgba(255,255,255,.3); font-weight:700; }
.certs small { font-weight:400; color:#aec0d8; line-height:2.2; }

.contact { padding:120px 7vw 80px; position:relative; background:#fff; }
.contact h2 { margin:30px 0 48px; }
.dark { background:var(--ink); color:#fff; min-width:370px; }
.contact-details { position:absolute; right:8vw; bottom:80px; display:flex; gap:65px; color:#687181; font-size:13px; line-height:1.7; }
.contact-details strong { color:var(--ink); display:inline-block; margin-bottom:6px; }
footer { background:#fff; border-top:1px solid var(--line); margin:0; padding:28px 7vw; display:flex; align-items:center; gap:50px; font-size:11px; color:#737c89; }
footer img { width:180px; }
footer p { margin-left:auto; }

@media (max-width:900px) {
  .topbar { height:72px; padding:0 20px; }
  .brand { width:auto; }
  .brand img { width:180px; }
  .topbar nav { display:none; }
  .contact-link { margin-left:auto; padding:13px 15px; }
  .hero { min-height:720px; padding:80px 24px 170px; align-items:center; }
  .hero-image { background-position:62% center; }
  .hero-overlay { background:linear-gradient(90deg,rgba(6,18,39,.96),rgba(10,31,61,.62)); }
  h1 { font-size:clamp(50px,13vw,76px); }
  .lead { font-size:16px; }
  .hero-meta { margin-left:0; grid-template-columns:repeat(3,1fr); }
  .hero-meta div { padding:20px 12px; display:block; }
  .hero-meta strong { display:block; margin-bottom:6px; }
  .hero-meta span { font-size:8px; }
  .statement { grid-template-columns:1fr; gap:42px; padding:85px 24px; }
  .statement > div > p,.inline-link { margin-left:0; }
  .statement > div > p { margin-top:30px; }
  .capabilities { padding:85px 24px; }
  .section-head { grid-template-columns:1fr; gap:26px; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .product-grid article { min-height:300px; border-bottom:1px solid rgba(255,255,255,.18); }
  .product-grid h3 { margin-top:45px; }
  .portfolio { padding:85px 24px; grid-template-columns:1fr; }
  .portfolio-intro { position:static; }
  .portfolio-visual,.product-list { grid-column:1; }
  .portfolio-visual { margin-top:50px; }
  .facility { padding:85px 24px; }
  .facility-head { grid-template-columns:1fr; gap:26px; }
  .facility-gallery { grid-template-columns:1fr 1fr; grid-auto-rows:280px; }
  .facility-gallery .gallery-large { grid-column:span 2; grid-row:auto; }
  .applications { grid-template-columns:1fr; padding:85px 24px; gap:55px; }
  .quality { grid-template-columns:1fr; }
  .quality-photo { min-height:420px; clip-path:none; }
  .quality-copy { padding:75px 24px; }
  .contact { padding:85px 24px; }
  .contact-details { position:static; margin-top:70px; gap:35px; }
  footer { margin:0; padding:28px 24px; flex-wrap:wrap; gap:20px; }
  footer p { margin-left:0; }
}
@media (max-width:560px) {
  .contact-link { font-size:0; }
  .contact-link::before { content:'Enquire'; font-size:11px; }
  .contact-link span { font-size:11px; margin-left:9px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:25px; }
  .hero-meta { min-height:98px; }
  .product-grid { grid-template-columns:1fr; }
  .product-grid article { min-height:250px; }
  .product-list-head { display:none; }
  .product-list article { grid-template-columns:12% 88%; padding:17px 0; row-gap:7px; }
  .product-list article:hover { padding:17px 10px; }
  .product-list h3 { font-size:17px; }
  .product-list p { grid-column:2; font-size:13px; }
  .facility-gallery { grid-template-columns:1fr; grid-auto-rows:260px; }
  .facility-gallery .gallery-large { grid-column:auto; }
  .applications { gap:45px; }
  .dark { min-width:0; width:100%; font-size:10px; }
  .contact-details { flex-direction:column; gap:18px; }
  footer { align-items:flex-start; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }