/* J.Battersby Engineering Ltd: same look as the original site, in modern HTML/CSS */

:root {
  --mustard: #c9bb04;
  --cream: #fefee6;
  --olive: #8a8a1e;
  --text: #000;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  /* Mustard textured edges, as in the original background */
  background: var(--mustard);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

/* The original background image is a 780px strip: mustard edges and a cream centre.
   Here it is centred and repeated down the page once, instead of tiling across. */
.page {
  width: 780px;
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  background: url("images/bck.gif") repeat-y center top;
}

.content {
  width: 575px;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 0 40px;
}

.banner {
  display: block;
  max-width: 100%;
  height: auto;
}

p { margin: 0 0 1em; }

.intro { margin-top: 10px; }

/* Photo + text rows */
.sample {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 12px 0 24px;
}
.sample > img {
  flex: none;
  max-width: 100%;
  height: auto;
  border: 0;
}
.sample.reverse { flex-direction: row-reverse; }
.sample-text { flex: 1; }
.sample-text .arrow { display: block; margin: 0 auto 10px; }

.closing { margin-top: 30px; }

/* Footer: matches the original bottom banner, as real text so links work */
footer {
  margin-top: 20px;
  padding: 6px 10px;
  border: 1px solid var(--olive);
  background: #fffff0;
  text-align: center;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, Arial, sans-serif;
  color: #4a4a10;
}
footer p { margin: 2px 0; }
footer .address { font-size: 14px; }
footer .contact { font-size: 13px; }
footer .sep { margin: 0 6px; }
footer a { color: inherit; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* Phones and narrow windows: drop the side strips and stack the photos */
@media (max-width: 780px) {
  .page { background: var(--cream); }
  .content { padding: 8px 16px 32px; }
  .sample, .sample.reverse { flex-direction: column; align-items: center; }
  .sample-text .arrow { display: none; }
  footer .contact span { display: block; }
  footer .contact .sep { display: none; }
}