:root {
  --blue:#209dcc;
  --blue2:#0877a8;
  --navy:#071623;
  --ink:#182736;
  --muted:#607184;
  --line:#dbe7ee;
  --bg:#f4f8fb;
  --soft:#e7f5fb;
  --radius:28px;
  --shadow:0 24px 70px rgba(7,22,35,.16);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; background:var(--bg); color:var(--navy); line-height:1.55; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.top { background:var(--navy); color:#c7e5ef; font-size:14px; }
.top div { max-width:1240px; margin:auto; padding:9px 24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav { max-width:1320px; margin:auto; padding:8px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { width:390px; max-width:38vw; height:auto; }
.links { display:flex; gap:24px; font-size:14px; font-weight:800; color:#314355; }
.links a:hover { color:var(--blue2); }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; border-radius:999px; font-weight:900; border:1px solid transparent; white-space:nowrap; }
.btn.primary { color:#fff; background:var(--blue); box-shadow:0 16px 35px rgba(32,157,204,.28); }
.btn.primary:hover { background:var(--blue2); transform:translateY(-1px); }
.btn.secondary { background:#fff; color:var(--navy); border-color:var(--line); }
.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border-radius:999px; background:#dbf2fb; border:1px solid #b8e6f5; color:var(--blue2); font-size:14px; font-weight:900; margin-bottom:18px; }
.dot { width:8px; height:8px; border-radius:99px; background:var(--blue); }
.hero { overflow:hidden; background:radial-gradient(circle at 12% 18%,rgba(32,157,204,.18),transparent 28%),linear-gradient(135deg,#fff 0%,#f2f9fc 54%,#eaf5fa 100%); }
.hero-inner { max-width:1240px; margin:auto; padding:46px 24px 72px; display:grid; grid-template-columns:1.02fr .98fr; gap:48px; align-items:center; }
h1 { margin:0; font-size:clamp(40px,5vw,72px); line-height:.98; letter-spacing:-2.4px; }
.lead { max-width:680px; margin:24px 0 0; color:#506173; font-size:19px; }
.actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.trust { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:30px; max-width:680px; }
.trust div { background:#fff; border:1px solid var(--line); border-radius:18px; padding:14px 16px; font-weight:900; color:#2f4152; }
.media { position:relative; min-height:540px; }
.main-photo { position:absolute; right:0; top:20px; width:100%; height:500px; object-fit:cover; border-radius:36px; border:9px solid #fff; box-shadow:var(--shadow); }
.small-photo { position:absolute; left:0; bottom:50px; width:45%; height:280px; object-fit:cover; border-radius:30px; border:8px solid #fff; box-shadow:var(--shadow); }
section { padding:86px 24px; scroll-margin-top:72px; }
.wrap { max-width:1240px; margin:auto; }
.head { max-width:800px; margin-bottom:34px; }
.head h2,.panel h2,.dark h2,.cta h2 { margin:0; font-size:clamp(30px,3.5vw,52px); line-height:1.05; letter-spacing:-1.4px; }
.head p,.panel p { margin:15px 0 0; color:var(--muted); font-size:18px; }
.services { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:0 14px 34px rgba(7,22,35,.06); display:flex; flex-direction:column; }
.icon { width:52px; height:52px; display:grid; place-items:center; border-radius:18px; background:var(--soft); color:var(--blue2); font-size:24px; margin-bottom:22px; font-weight:900; }
.card h3 { margin:0; font-size:21px; letter-spacing:-.4px; }
.card p { color:var(--muted); margin:13px 0 0; font-size:15.5px; }
.dark { background:var(--navy); color:#fff; padding:0; }
.dark-grid { display:grid; grid-template-columns:1fr 1fr; min-height:640px; }
.dark img { width:100%; height:100%; min-height:640px; object-fit:cover; }
.dark-copy { align-self:center; padding:86px max(24px,calc((100vw - 1240px)/2 + 24px)) 86px 24px; }
.dark-copy p { color:#c7dce6; font-size:18px; max-width:660px; }
.checks { margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.checks div { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); border-radius:18px; padding:14px 15px; font-weight:800; color:#eef9fd; }
.split { display:grid; grid-template-columns:.95fr 1.05fr; gap:46px; align-items:center; }
.panel { background:#fff; border:1px solid var(--line); border-radius:34px; padding:34px; box-shadow:0 16px 40px rgba(7,22,35,.08); }
.bullets { margin-top:24px; display:grid; gap:10px; }
.bullet { display:flex; gap:12px; font-weight:800; color:#314355; }
.tick { width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:14px; }
.stack { display:grid; grid-template-columns:.85fr 1.15fr; gap:18px; align-items:end; }
.stack img { width:100%; object-fit:cover; border-radius:30px; box-shadow:var(--shadow); }
.stack img:first-child { height:420px; }
.stack img:last-child { height:540px; }
.image-stack-fix img { width:100%; height:540px; object-fit:cover; border-radius:30px; box-shadow:var(--shadow); }
.camduct-image img { width:100%; height:420px; object-fit:contain; background:#f3f8fb; border-radius:30px; box-shadow:var(--shadow); padding:12px; }
.projects { background:#fff; }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.project { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:30px; box-shadow:0 18px 42px rgba(7,22,35,.08); }
.project img { height:270px; width:100%; object-fit:cover; }
.project img.no-crop { object-fit:contain; background:#f3f8fb; padding:10px; }
.project-image-pair { height:270px; display:grid; grid-template-columns:1fr 1fr; background:#f3f8fb; }
.project-image-pair img { height:270px; width:100%; object-fit:contain; background:#f3f8fb; padding:8px; }
.project div { padding:24px; }
.project h3 { margin:0; font-size:22px; letter-spacing:-.5px; }
.project p { color:var(--muted); margin:10px 0 0; }
.gallery { display:grid; grid-template-columns:1.15fr .85fr 1fr; gap:18px; margin-top:34px; }
.gallery.two { grid-template-columns:1fr 1fr; }
.photo { position:relative; min-height:430px; border-radius:30px; overflow:hidden; box-shadow:0 18px 42px rgba(7,22,35,.1); }
.photo.tall { min-height:520px; }
.photo img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.photo img.no-crop { object-fit:contain; background:#f3f8fb; padding:10px; }
.caption { position:absolute; left:18px; right:18px; bottom:18px; padding:18px; border-radius:22px; color:#fff; background:rgba(7,22,35,.84); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); }
.caption h3 { margin:0 0 5px; }
.caption p { margin:0; color:#cce3ed; font-size:14px; }
.cta { background:linear-gradient(135deg,rgba(7,22,35,.9),rgba(7,22,35,.68)),url('../images/internal-installation.jpg') center/cover; color:#fff; border-radius:42px; padding:60px; display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:start; box-shadow:var(--shadow); }
.cta p { color:#d5e9f0; font-size:18px; max-width:680px; }
.enquiry-form { background:rgba(255,255,255,.96); color:var(--navy); border-radius:30px; padding:30px; }
.enquiry-form h3 { margin:0 0 16px; font-size:25px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.enquiry-form label { display:block; font-size:13px; font-weight:900; color:#314355; margin-bottom:6px; }
.enquiry-form input,.enquiry-form select,.enquiry-form textarea {
  width:100%; border:1px solid var(--line); border-radius:14px; padding:12px 13px; font:inherit; background:#fff; color:var(--navy);
}
.enquiry-form textarea { min-height:120px; resize:vertical; }
.form-full { grid-column:1 / -1; }
.honeypot { display:none; }
.form-note { color:#607184; font-size:13px; margin:12px 0 0; }
.contact-card { background:rgba(255,255,255,.96); color:var(--navy); border-radius:30px; padding:30px; }
.contact-card h3 { margin:0 0 16px; font-size:25px; }
.line { padding:13px 0; border-bottom:1px solid var(--line); color:#314355; font-weight:800; }
.note { color:#5e7180; font-size:14px; margin-top:18px; }
footer { background:#fff; color:var(--navy); padding:38px 24px; border-top:1px solid var(--line); }
.foot { max-width:1240px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap; }
.foot img { width:190px; background:#fff; padding:10px 14px; border-radius:16px; }
.copyright { max-width:1240px; margin:20px auto 0; padding:0 24px; color:#607184; font-size:13px; }
.page-hero { background:linear-gradient(135deg,#fff 0%,#f2f9fc 100%); }
.page-hero .wrap { padding:68px 0 24px; }
.page-hero h1 { max-width:900px; }
.content-grid { display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center; }
.content-grid img { border-radius:32px; box-shadow:var(--shadow); width:100%; object-fit:cover; max-height:520px; }
.service-list { display:grid; gap:14px; margin-top:24px; }
.service-list li { font-weight:800; color:#314355; }
@media(max-width:980px) {
 .links { display:none; } .logo { width:300px; }
 .hero-inner,.dark-grid,.split,.cta,.content-grid { grid-template-columns:1fr; }
 .media { min-height:470px; } .main-photo { width:100%; }
 .services,.project-grid { grid-template-columns:repeat(2,1fr); }
 .dark-copy { padding:60px 24px; } .dark img { min-height:430px; }
 .gallery,.gallery.two { grid-template-columns:1fr; } .photo,.photo.tall { min-height:430px; }
}
@media(max-width:640px) {
 html { scroll-padding-top:70px; }
 section { scroll-margin-top:70px; }
 .top { display:none; } .nav { padding:14px 18px; } .logo { width:240px; } .nav .btn { display:none; }
 .hero-inner { padding:34px 18px 36px; } h1 { letter-spacing:-1.3px; } .lead { font-size:17px; }
 .trust,.services,.project-grid,.checks,.form-grid { grid-template-columns:1fr; }
 .form-full { grid-column:auto; }
 .media { min-height:350px; } .main-photo { height:330px; border-radius:28px; } .small-photo { display:none; }
 section { padding:58px 18px; } .stack { grid-template-columns:1fr; } .stack img:first-child,.stack img:last-child,.image-stack-fix img { height:380px; }
 .camduct-image img { height:320px; }
 .cta { padding:34px 22px; border-radius:30px; }
}

.pattern-gallery {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}
.pattern-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(7,22,35,.06);
}
.pattern-card img {
  width:100%;
  height:230px;
  object-fit:contain;
  background:#f3f8fb;
  padding:8px;
}
.pattern-card div {
  padding:20px;
}
.pattern-card h3 {
  margin:0;
  font-size:20px;
  letter-spacing:-.4px;
}
.pattern-card p {
  margin:8px 0 0;
  color:var(--muted);
  font-size:15px;
}
@media(max-width:980px) {
  .pattern-gallery { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media(max-width:640px) {
  .pattern-gallery { grid-template-columns:1fr; }
}

.direct-enquiry-card {
  background:rgba(255,255,255,.96);
  color:var(--navy);
  border-radius:30px;
  padding:30px;
  box-shadow:0 18px 42px rgba(7,22,35,.10);
}
.direct-enquiry-card h3 {
  margin:0 0 12px;
  font-size:25px;
}
.direct-enquiry-card p {
  color:#607184;
  margin:0 0 18px;
}
.email-link-large {
  display:block;
  font-size:22px;
  font-weight:900;
  color:var(--blue2);
  margin:10px 0 18px;
  word-break:break-word;
}
.enquiry-list {
  margin:18px 0 0;
  padding-left:20px;
  color:#314355;
}
.enquiry-list li {
  margin:8px 0;
  font-weight:700;
}

.supply-images {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.supply-images img {
  width:100%;
  height:430px;
  object-fit:cover;
  border-radius:30px;
  box-shadow:var(--shadow);
}
@media(max-width:640px) {
  .supply-images { grid-template-columns:1fr; }
  .supply-images img { height:360px; }
}

.gallery:has(.photo:nth-child(2):last-child) {
  grid-template-columns:1fr 1fr;
}
@media(max-width:980px) {
  .gallery:has(.photo:nth-child(2):last-child) { grid-template-columns:1fr; }
}

.phone-large {
  font-size:24px;
  padding:18px 28px;
}
.direct-enquiry-card .email-link-large {
  margin-bottom:0;
}
@media(max-width:640px) {
  .phone-large {
    font-size:20px;
    width:100%;
  }
}

.single-stack-image {
  display:block;
}
.single-stack-image img {
  width:100%;
  height:540px;
  object-fit:cover;
  border-radius:30px;
  box-shadow:var(--shadow);
}
@media(max-width:640px) {
  .single-stack-image img {
    height:380px;
  }
}

.service-card {
  min-height:290px;
  justify-content:flex-start;
}
.service-card h3 {
  margin-top:0;
  font-size:24px;
}
.service-card p {
  font-size:16px;
  line-height:1.65;
}

/* Ventilation calculator page */
.calculator-intro {
  max-width: 980px;
  margin: 0 auto 34px;
}
.calculator-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}
.calc-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
  box-shadow:0 14px 34px rgba(7,22,35,.06);
}
.calc-card h3 {
  margin:0 0 10px;
  font-size:25px;
}
.calc-card p {
  color:var(--muted);
  margin:0 0 18px;
}
.calc-fields {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.calc-fields label {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-weight:800;
  color:var(--navy);
  font-size:14px;
}
.calc-fields input, .calc-fields select {
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 13px;
  font:inherit;
  color:var(--navy);
  background:#f9fcfe;
}
.calc-result {
  margin-top:18px;
  padding:16px;
  border-radius:18px;
  background:#e9f7fc;
  color:var(--navy);
  font-weight:900;
  line-height:1.5;
}
.calc-note {
  margin-top:34px;
  background:#071623;
  color:#d7e8ef;
  border-radius:30px;
  padding:28px;
}
.calc-note h3 {
  color:#fff;
  margin-top:0;
}
.calc-note p {
  margin-bottom:0;
}
.quick-calcs {
  background:#f3f9fc;
}
.quick-calcs .panel {
  background:#fff;
  border:1px solid var(--line);
}
@media(max-width:860px) {
  .calculator-grid {
    grid-template-columns:1fr;
  }
}
@media(max-width:560px) {
  .calc-fields {
    grid-template-columns:1fr;
  }
}


.vel-rect.is-hidden,
.vel-round.is-hidden {
  display:none;
}


.vol-rect.is-hidden,
.vol-round.is-hidden {
  display:none;
}


.cta-single {
  grid-template-columns: 1fr;
}
.cta-actions {
  align-items: center;
}
.email-large {
  font-size: 24px;
  padding: 18px 28px;
}
@media(max-width:640px) {
  .email-large {
    font-size: 20px;
    width: 100%;
  }
}