/* Platax Maldives
   Typography and colour taken from the original site: Playfair Display
   throughout, navy on white, with a black footer in cream. */

:root {
  --navy: #0a1a69;        /* headings, the display voice */
  --ink: #050d35;         /* body text and links */
  --ink-soft: #3b4466;
  --muted: #7c84a0;
  --bg: #ffffff;
  --sand: #f7f5f2;
  --line: #dcdce6;
  --cream: #f8f0ef;       /* type on the black footer */
  --black: #000000;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;   /* display type */
  --body: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;  /* running copy */
  --ui: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;  /* labels and nav */

  --wrap: 1240px;
  --gut: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 200;
  font-size: 18px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--ink); text-underline-offset: 4px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(3.4rem, 11vw, 10rem); line-height: 1.05; }
h2 { font-size: clamp(2.6rem, 7.5vw, 6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { margin: 0 0 1.2em; }

/* The original sets its headings on two lines with the second indented. */
.split-head { display: flex; flex-direction: column; }
.split-head span:last-child { padding-left: 1.3em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 780px; margin-left: 0; margin-right: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy); color: #fff; padding: 12px 20px; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ---------- Header ---------- */

.site-header { background: #fff; position: sticky; top: 0; z-index: 60; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 104px; }
.brand img { height: 46px; width: auto; }
.brand-fallback { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; letter-spacing: .2em; color: var(--ink); }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 8px 15px;
  font-family: var(--ui); font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--navy); }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); padding: 10px 12px; cursor: pointer; color: var(--ink); }

@media (max-width: 980px) {
  .nav { min-height: 84px; }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 22px;
  }
  .nav-links[hidden] { display: none; }
  .nav-links a { padding: 14px 2px; font-size: .95rem; }
}

/* ---------- Links and buttons ---------- */

.arrow-link {
  font-family: var(--serif); font-weight: 700; font-size: 1.3rem;
  color: var(--navy); text-decoration: none; display: inline-block;
}
.arrow-link:hover { color: var(--ink); text-decoration: underline; }

.btn {
  display: inline-block; padding: 15px 38px; border: 1px solid var(--navy); cursor: pointer;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700;
  text-decoration: none; background: var(--navy); color: #fff; transition: .18s;
}
.btn:hover { background: #fff; color: var(--navy); }
.btn-outline { background: transparent; color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-primary, .btn-amber { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover, .btn-amber:hover { background: #fff; color: var(--navy); }

/* ---------- Sections ---------- */

section { padding: 130px 0; }
.sec-sand { background: var(--sand); }
.sec-tight { padding: 80px 0; }
@media (max-width: 900px) { section { padding: 76px 0; } .sec-tight { padding: 56px 0; } }

.sec-head { max-width: 40ch; margin-bottom: 56px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; max-width: 52ch; }

.eyebrow {
  display: inline-block; font-family: var(--ui); font-size: .76rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}
.eyebrow-dark { color: var(--muted); }

/* ---------- Illustrations ---------- */

.deco { display: block; width: auto; height: auto; flex: none; object-fit: contain; pointer-events: none; user-select: none; }
.deco-sm   { max-height: 210px; max-width: 190px; }
.deco-md   { max-height: 260px; max-width: 220px; }
.deco-lg   { max-height: 330px; max-width: 330px; }
.deco-wide { max-height: 170px; max-width: 330px; }
@media (max-width: 760px) {
  .deco-lg { max-height: 200px; max-width: 200px; }
  .deco-md { max-height: 165px; max-width: 150px; }
  .deco-sm { max-height: 160px; max-width: 150px; }
  .deco-wide { max-height: 115px; max-width: 230px; }
}

/* ---------- Hero ---------- */

.hero { padding: 40px 0 110px; }
.hero-inner { display: flex; flex-direction: column; align-items: flex-start; }
.hero .deco { margin-bottom: -2.4em; margin-left: .3em; position: relative; z-index: 2; }
.hero h1 { margin: 0 0 .3em; position: relative; z-index: 1; }
.hero .arrow-link { margin-bottom: 28px; }
.hero .lede { font-size: 1.15rem; max-width: 46ch; margin: 0; color: var(--ink-soft); }
@media (max-width: 760px) { .hero .deco { margin-bottom: -1em; } }

/* ---------- Split rows ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.split-narrow { grid-template-columns: 1fr 1.1fr; }
@media (max-width: 900px) { .split, .split-narrow { grid-template-columns: 1fr; gap: 50px; } }

.with-deco { display: flex; align-items: flex-start; gap: 30px; }
.with-deco > div { min-width: 0; }
@media (max-width: 600px) { .with-deco { flex-direction: column; gap: 16px; } }

/* ---------- Photos ---------- */

.collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .tall { grid-row: span 2; aspect-ratio: 3/5; }
.collage .sq { aspect-ratio: 1/1; }

.photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.photo-row img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
@media (max-width: 760px) { .photo-row { grid-template-columns: 1fr 1fr; } .photo-row img:last-child { display: none; } }

.split-media img { width: 100%; }
.split-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.split-stack img { aspect-ratio: 4/5; object-fit: cover; }
.split-stack img:first-child { grid-column: 1 / -1; aspect-ratio: 16/10; }

/* ---------- Three values ---------- */

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; text-align: center; margin-top: 70px; }
.values .v { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.values h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0; }
.values p { font-size: 1rem; margin: 0; max-width: 30ch; color: var(--ink-soft); }
@media (max-width: 840px) { .values { grid-template-columns: 1fr; gap: 50px; } }

/* ---------- Services ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 58px 54px; }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card-icon { display: none; }
.svc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 58px 64px; }
@media (max-width: 840px) { .svc-list { grid-template-columns: 1fr; gap: 46px; } }

/* ---------- Products ---------- */

.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 70px 40px; }
.product-img { background: var(--sand); aspect-ratio: 4/3; overflow: hidden; margin-bottom: 24px; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-no { font-family: var(--ui); font-size: .78rem; letter-spacing: .2em; color: var(--muted); display: block; margin-bottom: 10px; }
.product h3 { font-size: 1.5rem; margin-bottom: 18px; }
.product dl { margin: 0; font-size: 1rem; }
.product dt { font-family: var(--ui); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 15px; }
.product dt:first-child { margin-top: 0; }
.product dd { margin: 4px 0 0; color: var(--ink-soft); }

/* ---------- Compliance ---------- */

.cert-group { margin-bottom: 80px; }
.cert-group:last-child { margin-bottom: 0; }
.cert-group > h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 44px; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 52px 36px; }
.cert { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cert-mark { height: 92px; display: grid; place-items: center; margin-bottom: 20px; }
.cert-mark img { max-height: 92px; width: auto; object-fit: contain; }
.cert h3 { font-size: 1.2rem; margin: 0 0 8px; }
.cert p { font-size: .96rem; margin: 0; color: var(--ink-soft); }

.trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 56px; padding: 40px 0; }
.trust-strip img { height: 56px; width: auto; opacity: .5; filter: grayscale(1); transition: .2s; }
.trust-strip a:hover img { opacity: 1; filter: none; }

/* ---------- Gallery ---------- */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 250px; gap: 18px; }
.gallery figure { margin: 0; overflow: hidden; position: relative; background: var(--sand); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery figure:hover img { transform: scale(1.04); }
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 18px 15px;
  background: linear-gradient(transparent, rgba(5,13,53,.8));
  color: var(--cream); font-size: .95rem;
}
@media (max-width: 640px) { .gallery .wide { grid-column: span 1; } .gallery { grid-auto-rows: 200px; } }

/* ---------- FAQ ---------- */

.faq { display: flex; flex-direction: column; }
.qa { padding: 42px 0; border-bottom: 1px solid var(--line); }
.qa:first-child { padding-top: 0; }
.qa:last-child { border-bottom: 0; }
.qa h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin-bottom: .5em; }
.qa p { color: var(--ink-soft); }
.qa p:last-child { margin-bottom: 0; }

/* ---------- Forms ---------- */

fieldset { border: 0; padding: 0; margin: 0 0 42px; }
legend {
  font-family: var(--ui); font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  padding: 0 0 18px; margin: 0;
}
.field { margin-bottom: 18px; }
.field label {
  display: block; font-family: var(--ui); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 16px; font-family: var(--body); font-size: 1rem;
  color: var(--ink); background: #fff; border: 1px solid var(--navy); border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; box-shadow: inset 0 0 0 1px var(--navy);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: .92rem; color: var(--muted); margin: 18px 0 0; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: start; }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; gap: 56px; } }

.info-block { margin-bottom: 40px; }
.info-block h3 {
  font-family: var(--ui); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 400;
}
.info-block p, .info-block address { margin: 0; font-style: normal; line-height: 1.9; }
.contact-lines a { color: var(--ink); text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hours li:last-child { border-bottom: 0; }

.map-embed { aspect-ratio: 16/10; background: var(--sand); border: 1px solid var(--line); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.btn-wa { background: #25d366; border-color: #25d366; color: #06301a; display: inline-flex; align-items: center; gap: 10px; }
.btn-wa:hover { background: #fff; color: #06301a; border-color: #25d366; }

/* ---------- Closing call to action ---------- */

.cta-close { border-top: 1px solid var(--line); padding: 64px 0 0; margin-top: 90px; }
.cta-close .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; }
.cta-close h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); margin: 0 0 .25em; }
.cta-close p { margin: 0; max-width: 42ch; color: var(--ink-soft); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------- Black footer, carrying the newsletter ---------- */

.site-footer { background: var(--black); color: var(--cream); padding: 120px 0 60px; }
.footer-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: 80px; align-items: start; }
@media (max-width: 900px) { .site-footer { padding: 76px 0 48px; } .footer-top { grid-template-columns: 1fr; gap: 50px; } }

.site-footer h2 { color: var(--cream); margin-bottom: .3em; }
.footer-tagline { font-weight: 700; font-size: 1.25rem; color: var(--cream); margin: 0 0 30px; max-width: 26ch; }

.nl-form { display: flex; max-width: 480px; align-items: stretch; }
.nl-form input {
  flex: 1; min-width: 0; padding: 15px 18px; font-family: var(--body); font-size: 1rem;
  border: 1px solid var(--cream); border-right: 0; background: transparent; color: var(--cream);
}
.nl-form input::placeholder { color: rgba(248,240,239,.6); }
.nl-form input:focus { outline: none; background: rgba(255,255,255,.07); }
.nl-form button {
  flex: none; padding: 15px 42px; cursor: pointer;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700;
  background: var(--cream); color: var(--black); border: 1px solid var(--cream);
}
.nl-form button:hover { background: transparent; color: var(--cream); }
@media (max-width: 540px) { .nl-form { flex-direction: column; gap: 12px; } .nl-form input { border-right: 1px solid var(--cream); } }

.footer-contact { display: flex; flex-direction: column; gap: 6px; font-size: 1rem; }
.footer-contact a { color: var(--cream); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-contact address { font-style: normal; line-height: 1.9; margin-top: 14px; }

.footer-bottom {
  margin-top: 80px; padding-top: 26px; border-top: 1px solid rgba(248,240,239,.22);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .9rem; color: rgba(248,240,239,.65);
}
.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.footer-nav a {
  font-family: var(--ui); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cream); text-decoration: none;
}
.footer-nav a:hover { text-decoration: underline; }

/* ---------- Page heads ---------- */

.page-head { padding: 60px 0 20px; }
.page-head h1 { margin-bottom: .2em; }
.page-head p { max-width: 52ch; font-size: 1.15rem; margin: 0; color: var(--ink-soft); }

/* ---------- Misc ---------- */

.tick-list { list-style: none; margin: 0 0 1.5em; padding: 0; }
.tick-list li { position: relative; padding-left: 30px; margin-bottom: 13px; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 15px; height: 8px; border-left: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy); transform: rotate(-45deg);
}
.note { border-left: 3px solid var(--navy); padding: 6px 0 6px 26px; }
.note p:last-child { margin-bottom: 0; }

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

/* ============================================================
   Homepage: a 1:1 reconstruction of the original layout.

   Every position below is the measured coordinate from
   www.plataxmaldives.com at a 1470px viewport, divided by that
   width, so the whole composition scales proportionally instead
   of reflowing. Below 900px it falls back to ordinary stacking.
   ============================================================ */

/* Safari refuses a calc() that divides by a var(), so --s is declared with
   a literal divisor on every page and the numbers below are registered as
   numbers, which keeps the arithmetic unambiguous in strict engines. */
@property --x      { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --y      { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --w      { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --h      { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --canvas { syntax: "<number>"; inherits: false; initial-value: 1000; }
@property --design { syntax: "<number>"; inherits: true;  initial-value: 1400; }

.home {
  --design: 1470;                                   /* the width everything was measured at */
  --s: calc(min(100vw, 1760px) / 1470);             /* one design pixel, scaled */
}

@media (min-width: 1150px) {

  /* The canvas is exactly one design width wide, centred, so a window
     wider than the 1760px cap does not leave the layout hugging the left. */
  .home .canvas { position: relative; height: calc(5765 * var(--s));
                  width: calc(var(--design) * var(--s)); margin-inline: auto; }
  .home .canvas > *, .home .site-foot > * { position: absolute; margin: 0; }

  .home .pin { left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s)); }
  .home .pin[style*="--w"] { width: calc(var(--w) * var(--s)); }

  .home .canvas img.pin { height: calc(var(--h) * var(--s)); max-width: none; max-height: none; object-fit: contain; }
  .home .canvas img.photo { object-fit: cover; }

  .home h1.pin { font-size: calc(160 * var(--s)); line-height: 1.2; white-space: nowrap; }
  .home h2.pin { font-size: calc(97 * var(--s)); line-height: 1.2; white-space: nowrap; }
  .home h3.pin { font-size: calc(24 * var(--s)); line-height: 1.33; }
  .home p.pin, .home .link.pin { font-size: calc(18 * var(--s)); line-height: 1.8; }
  .home .link.pin { font-size: calc(24 * var(--s)); line-height: 1.4; }
  .home .vlabel.pin { font-size: calc(24 * var(--s)); line-height: 1.33; }

  /* the second line of a two-line heading is indented, as on the original */
  .home .split-head span:last-child { padding-left: 1.42em; }
  .home .split-head { display: block; }
  .home .split-head span { display: block; }

  /* black footer band — every page sets its own --y on the element.
     It bleeds past the centred canvas to both window edges. */
  .home .footer-band {
    left: 50%; transform: translateX(-50%); width: 100vw;
    height: calc(700 * var(--s)); background: var(--black);
  }
  .home .on-dark { color: var(--cream); }
  .home .on-dark a { color: var(--cream); }

  .home .nl-form.pin { width: calc(548 * var(--s)); display: flex; }
  .home .nl-form.pin input { font-size: calc(17 * var(--s)); padding: calc(14 * var(--s)) calc(16 * var(--s)); }
  .home .nl-form.pin button { font-size: calc(18 * var(--s)); padding: calc(14 * var(--s)) calc(34 * var(--s)); }

  .home form.enquiry.pin { width: calc(330 * var(--s)); }
  .home form.enquiry.pin input,
  .home form.enquiry.pin textarea {
    font-size: calc(16 * var(--s)); padding: calc(10 * var(--s)) calc(12 * var(--s));
    margin-bottom: calc(17 * var(--s));
  }
  .home form.enquiry.pin textarea { height: calc(77 * var(--s)); min-height: 0; }
  .home form.enquiry.pin button {
    font-size: calc(18 * var(--s)); padding: calc(9 * var(--s)) calc(26 * var(--s));
    background: transparent; color: #4e598e; border: 1px solid var(--navy);
  }
  .home form.enquiry.pin button:hover { background: var(--navy); color: #fff; }
}

/* ---- Phones and small tablets: ordinary stacked flow ---- */
@media (max-width: 1149px) {
  .home .canvas { display: flex; flex-direction: column; gap: 44px; padding: 20px 0 70px; }
  .home .canvas > *, .home .site-foot > * { position: static !important; width: auto !important; }
  .home .canvas img.pin { height: auto; max-height: 230px; width: auto; }
  .home .canvas img.photo { max-height: none; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
  .home .footer-band { display: none; }
  .home .on-dark, .home .on-dark a { color: var(--ink); }
  .home .split-head span:last-child { padding-left: 1.1em; }
  .home .nl-form.pin { max-width: 440px; }
  .home form.enquiry.pin { max-width: 440px; }
  .home .order-last { order: 99; }
}

/* ---- Inner pages: same pinned system, page-specific pieces ---- */

@media (min-width: 1150px) {
  .home .canvas[style*="--canvas"] { height: calc(var(--canvas) * var(--s)); }

  /* The original's banner is a pale abstract, so the dark heading reads
     over it. Ours are photographs, washed back to the same effect. */
  .home .banner.pin { width: 100%; left: 0; opacity: .28; }
  .home .over-banner.pin { font-size: calc(56 * var(--s)); color: var(--ink); }
  .home .centred.pin { text-align: center; }
  .home .centred.pin.sub {
    font-size: calc(18 * var(--s)); font-family: var(--ui); font-weight: 400;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  }
  .home h1.centred.pin { font-size: calc(56 * var(--s)); }

  .home .svc-title.pin { font-size: calc(20 * var(--s)); color: var(--navy); margin: 0; }
  .home .svc-body.pin  { font-size: calc(16 * var(--s)); line-height: 1.7; }
  .home .small-link.pin { font-size: calc(14 * var(--s)); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }

  .home .cert-mark.pin { object-fit: contain; }

  .home .prod-title.pin { font-size: calc(30 * var(--s)); color: var(--navy); line-height: 1.25; margin: 0; white-space: normal; }
  .home .prod-spec.pin  { font-size: calc(16 * var(--s)); line-height: 1.6; margin: 0; }
  .home .prod-spec dt { font-weight: 700; color: var(--ink); display: inline; }
  .home .prod-spec dd { display: inline; margin: 0 0 0 .3em; color: var(--ink); }
  .home .prod-spec dd::after { content: ""; display: block; height: calc(14 * var(--s)); }

  .home .quote-form.pin .qrow { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--s)); }
  .home .quote-form.pin input,
  .home .quote-form.pin textarea {
    width: 100%; font-size: calc(15 * var(--s)); padding: calc(9 * var(--s)) calc(11 * var(--s));
    margin-bottom: calc(16 * var(--s)); border: 1px solid var(--navy); font-family: var(--body); color: var(--ink);
  }
  .home .quote-form.pin textarea { height: calc(151 * var(--s)); min-height: 0; }
  .home .quote-form.pin button {
    font-size: calc(24 * var(--s)); background: transparent; border: 0; color: var(--navy);
    font-family: var(--serif); font-weight: 700; cursor: pointer; padding: 0;
  }
  .home .quote-form.pin button:hover { text-decoration: underline; }

  .home .footer-band { top: calc(var(--y) * var(--s)); height: calc(700 * var(--s)); }
  .home .footer-nav.pin { display: flex; flex-wrap: wrap; gap: calc(6 * var(--s)) calc(22 * var(--s)); list-style: none; padding: 0; }
  .home .footer-nav.pin a { font-size: calc(13 * var(--s)); }
  .home .on-dark.small { font-size: calc(15 * var(--s)); }
  .home .lead-line { font-size: calc(22 * var(--s)); }
  .home .wa { color: var(--navy); font-weight: 700; }
}

@media (max-width: 1149px) {
  .home .canvas[style*="--canvas"] { height: auto; }
  .home .banner.pin { width: 100% !important; max-height: 220px; object-fit: cover; opacity: .3; }
  .home .prod-img { max-height: 300px; }
  .home .quote-form.pin .qrow { display: grid; grid-template-columns: 1fr; }
  .home .quote-form.pin input, .home .quote-form.pin textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--navy); margin-bottom: 14px;
    font-family: var(--body); font-size: 1rem;
  }
  .home .quote-form.pin button { font-size: 1.2rem; background: transparent; border: 0; color: var(--navy); font-family: var(--serif); font-weight: 700; cursor: pointer; }
  .home .prod-spec dt { font-weight: 700; display: inline; }
  .home .prod-spec dd { display: inline; margin: 0 0 0 .3em; }
  .home .prod-spec dd::after { content: ""; display: block; height: 10px; }
  .home .footer-nav.pin { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; }
  .home .footer-fish { max-height: 120px; }
  .home .centred.pin { text-align: left; }
}

/* ---- Separator rules and service icons ---- */

.home .rule {
  border: 0; border-top: 1px solid #999997; height: 0;
}
/* The product separators are the one ochre note on the original site. */
.home .rule-amber { border-top-color: #96631f; }

.home .svc-icon { color: var(--ink); }

@media (min-width: 1150px) {
  .home .svc-icon.pin { width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s)); }
  .home .rule.pin { width: calc(var(--w) * var(--s)); }
}
@media (max-width: 1149px) {
  .home .svc-icon.pin { width: 44px; height: 46px; }
  .home .rule.pin { width: 100% !important; margin: 4px 0; }
}

/* ---- Stacking, image treatment and page furniture ---- */

/* Text always sits above photographs on the pinned canvas. */
.home .canvas > h1,
.home .canvas > h2,
.home .canvas > h3,
.home .canvas > p,
.home .canvas > a,
.home .canvas > form,
.home .canvas > dl,
.home .canvas > ul,
.home .canvas > svg { z-index: 2; }
.home .canvas > img,
.home .canvas > .footer-band, .home .site-foot > .footer-band,
.home .canvas > .rule { z-index: 0; }
.home .canvas > .on-dark, .home .site-foot > .on-dark,
.home .canvas > .nl-form, .home .site-foot > .nl-form,
.home .canvas > .footer-nav, .home .site-foot > .footer-nav { z-index: 2; }
.home .canvas > .map-embed { z-index: 2; }

/* Processing photographs read as one set in black and white. */
.home .mono { filter: grayscale(1) contrast(1.04); }

/* Product shots are never cropped. */
.home .prod-img { object-fit: contain !important; background: transparent; }

@media (min-width: 1150px) {
  .home .map-embed.pin {
    width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s));
    border: 1px solid var(--line); background: var(--sand);
  }
  .home .map-embed.pin iframe { width: 100%; height: 100%; border: 0; display: block; }
  .home .small-link.pin a { font-size: calc(15 * var(--s)); text-transform: none; letter-spacing: 0; }
}
@media (max-width: 1149px) {
  .home .map-embed.pin { width: 100% !important; aspect-ratio: 16/10; border: 1px solid var(--line); }
  .home .map-embed.pin iframe { width: 100%; height: 100%; border: 0; display: block; }
  .home .prod-img { max-height: 260px; object-fit: contain !important; }
}

/* ---- FAQ ---- */
@media (min-width: 1150px) {
  .home .qa-q.pin { font-size: calc(30 * var(--s)); color: var(--ink); line-height: 1.3; margin: 0; white-space: normal; }
  .home .qa-a.pin { font-size: calc(18 * var(--s)); line-height: 2; margin: 0; }
}
@media (max-width: 1149px) {
  .home .qa-q.pin { font-size: 1.3rem; color: var(--ink); line-height: 1.3; margin: 0 0 .4em; }
  .home .qa-a.pin { font-size: 1rem; line-height: 1.8; margin: 0; }
}

/* ---- Display headings ----
   On the original, the <span> inside each large heading paints black. The
   small h3 standfirsts paint ink, and navy is reserved for links, product
   titles and service titles. This lives here, in the source, so a rebuild
   cannot wipe it. */

.home .canvas h1,
.home .canvas h2,
.home .over-banner.pin,
.home h1.centred.pin { color: #000; }

.home .canvas h3 { color: var(--ink); }

@media (min-width: 1150px) {
  .home .canvas h2.on-dark { color: var(--cream); }
}
@media (max-width: 1149px) {
  .home .canvas h2.on-dark { color: var(--ink); }
}

.home .canvas .prod-title.pin,
.home .canvas .svc-title.pin { color: var(--navy); }
.home .canvas .qa-q.pin { color: var(--ink); }

/* ---- Arrow links ----
   Playfair bold with no rule under them, as on the original. "See Our
   Products" is ink there; "Dive In" and "More" are navy. */
.home .link.pin { font-weight: 700; text-decoration: none; color: var(--navy); }
.home .link.pin.ink { color: var(--ink); }
.home .link.pin:hover { text-decoration: underline; }
.home .arrow-link { text-decoration: none; }
.home .arrow-link:hover { text-decoration: underline; }

/* ---- Typeface split ----
   Playfair carries the display type: headings, arrow links and the two
   submit buttons. Everything that is read as running copy is Work Sans
   ExtraLight, which is the face the original uses for body text. */
.home .link.pin,
.home .arrow-link,
.home .quote-form.pin button,
.home form.enquiry.pin button,
.home .nl-form.pin button { font-family: var(--serif); }
.home strong, .home b { font-weight: 600; }
.home .prod-spec dt { font-weight: 600; }

/* The header sits over the same column as the pinned canvas, so the logo
   and the nav line up with the content rather than floating inside a
   narrower wrapper. */
@media (min-width: 1150px) {
  .home .site-header .wrap {
    max-width: calc(var(--design) * var(--s));
    padding-left: calc(140 * var(--s));
    padding-right: calc(140 * var(--s));
  }
}

/* The About heading stacks on two lines flush left, with no indent on the
   second, and tighter leading than the indented display headings. The
   original measures 176px between line tops at a 1470px viewport, which is
   1.05 of the type size. */
@media (min-width: 1150px) {
  .home h1.split-head.stack.pin { line-height: 1.05; }
  .home .split-head.stack span:last-child { padding-left: 0; }
}
@media (max-width: 1149px) {
  .home .split-head.stack span:last-child { padding-left: 0; }
}

/* ---- Mobile: image sizing in the stacked column ----
   The stacked canvas is a column flex container, so its default
   align-items: stretch was forcing every image to the full width of the
   phone. Each kind of image now states what it should do. */
@media (max-width: 1149px) {

  /* Default: keep the image's own proportions, sit it left. */
  .home .canvas img.pin {
    align-self: flex-start;
    width: auto; height: auto;
    max-width: 100%; max-height: 230px;
  }

  /* Editorial photographs fill the column and crop. */
  .home .canvas img.photo.pin {
    align-self: stretch; width: 100%; height: auto;
    aspect-ratio: 4 / 5; object-fit: cover; max-height: none;
  }

  /* A page banner is a shallow strip, not a tall crop. */
  .home .canvas img.banner.photo.pin {
    aspect-ratio: auto; height: 220px; max-height: 220px; object-fit: cover;
  }

  /* Product shots are never cropped, so they keep their shape. */
  .home .canvas img.prod-img.pin {
    align-self: flex-start; width: auto; aspect-ratio: auto;
    max-width: 100%; max-height: 260px; object-fit: contain !important;
  }

  /* Certificate marks and line drawings stay small. */
  .home .canvas img.cert-mark.pin { max-width: 180px; max-height: 96px; }
  .home .canvas img.deco.pin { max-height: 170px; }
  .home .canvas img.footer-fish.pin { max-height: 110px; }
}

/* ---- Mobile: the footer stops being a black band ----
   Below the breakpoint the black band is hidden, so the newsletter field
   and the pink fish, both designed to sit on black, need to work on white. */
@media (max-width: 1149px) {
  .home .nl-form.pin input {
    border: 1px solid var(--navy); border-right: 1px solid var(--navy);
    background: #fff; color: var(--ink);
  }
  .home .nl-form.pin input::placeholder { color: var(--muted); }
  .home .nl-form.pin input:focus { background: #fff; outline: 2px solid var(--navy); outline-offset: -2px; }
  .home .nl-form.pin button {
    background: var(--navy); color: #fff; border: 1px solid var(--navy);
  }
  .home .nl-form.pin button:hover { background: var(--ink); color: #fff; }

  /* The pink fish only reads on the black band. */
  .home .canvas img.footer-fish.pin { display: none; }
}

/* ---- Mobile: page margins and type that fits a phone ----
   The stacked canvas had no horizontal padding, so everything ran to the
   screen edge, and the desktop heading sizes overflowed 390px. */
@media (max-width: 1149px) {
  .home .canvas { padding: 26px var(--gut) 64px; gap: 30px; }
  .home .canvas > * { overflow-wrap: break-word; max-width: 100%; }

  .home h1.pin              { font-size: 2.6rem; line-height: 1.1; }
  .home h2.pin              { font-size: 1.95rem; line-height: 1.15; }
  .home h1.centred.pin,
  .home .over-banner.pin    { font-size: 2.3rem; line-height: 1.15; }
  .home .centred.sub.pin    { font-size: .95rem; letter-spacing: .12em; }
  .home h3.pin              { font-size: 1.1rem; }
  .home .prod-title.pin     { font-size: 1.45rem; }
  .home .qa-q.pin           { font-size: 1.2rem; }
  .home .link.pin           { font-size: 1.15rem; }
  .home p.pin               { font-size: 1rem; line-height: 1.75; }

  /* Full-bleed photographs would fight the new margins, so inset them too. */
  .home .canvas img.photo.pin { width: 100%; }
}

/* ---- Mobile corrections ---- */
@media (max-width: 1149px) {
  /* The compliance page is a centred page, so keep it centred on phones too. */
  .home .centred.pin { text-align: center; }
  .home .canvas img.cert-mark.pin { align-self: center; }

  /* Photographs were running the full column height and dominating the page. */
  .home .canvas img.photo.pin { aspect-ratio: 4 / 3; max-height: 280px; }
}

/* ---- The footer is a black section on every screen size ----
   On desktop the wrapper is display:contents, so it generates no box and the
   footer pieces stay absolutely positioned on the canvas exactly as before.
   On phones it becomes a real black block, bleeding past the page margins. */
@media (min-width: 1150px) {
  .home .site-foot { display: contents; }
}

@media (max-width: 1149px) {
  .home .site-foot {
    display: block;
    background: var(--black);
    color: var(--cream);
    margin: 14px calc(-1 * var(--gut)) -64px;
    padding: 46px var(--gut) 54px;
  }
  .home .site-foot > * { margin-bottom: 26px; }
  .home .site-foot > *:last-child { margin-bottom: 0; }
  .home .site-foot .footer-band { display: none; }

  .home .site-foot h2,
  .home .site-foot p,
  .home .site-foot .on-dark,
  .home .site-foot .on-dark a,
  .home .site-foot .footer-nav a { color: var(--cream); }

  /* The field is back on black, so it takes the dark treatment again. */
  .home .site-foot .nl-form input {
    background: transparent; color: var(--cream);
    border: 1px solid var(--cream); border-right: 1px solid var(--cream);
  }
  .home .site-foot .nl-form input::placeholder { color: rgba(248,240,239,.6); }
  .home .site-foot .nl-form button {
    background: var(--cream); color: var(--black); border: 1px solid var(--cream);
  }
  /* The pink fish reads properly again now the ground is black. */
  .home .site-foot img.footer-fish.pin { display: block; max-height: 104px; }

  /* The contact page title centres like the other page titles. */
  .home.contact-page h1.pin { text-align: center; }
  .home.contact-page .canvas img.deco.pin { align-self: center; }
  .home.contact-page .small-link.pin { text-align: center; }
}

/* The footer wrapper must escape the page margins and win the colour
   cascade over the earlier mobile overrides. */
@media (max-width: 1149px) {
  .home .site-foot { max-width: none; width: 100vw; }
  .home .site-foot h2.on-dark,
  .home .site-foot p.on-dark,
  .home .site-foot p.on-dark a,
  .home .site-foot .footer-nav.on-dark a,
  .home .site-foot .on-dark strong { color: var(--cream); }
}