:root{color-scheme:light;--pine:#172b24;--deep:#10201a;--sand:#f6f2e7;--gold:#eac274;--muted:#4d5b50}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--sand);color:var(--pine);font:17px/1.6 system-ui,sans-serif}a{color:inherit}a:focus-visible{outline:3px solid #bd791f;outline-offset:5px}.wrap{width:min(1100px,calc(100% - 48px));margin:auto}.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}header,footer{background:var(--deep);color:var(--sand)}.brand{font-size:1rem;font-weight:800;letter-spacing:.08em;text-decoration:none}.brand span{font-weight:400}.brand i{font-style:normal;color:var(--gold);margin-right:.35rem}nav{display:flex;gap:1.35rem}nav a,footer a{font-size:.9rem;text-underline-offset:4px}.hero{background:radial-gradient(ellipse at 73% 45%,#344b3b,var(--pine) 63%);color:var(--sand)}.opening{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:1rem;min-height:530px;padding:64px 0}.label{font-size:.74rem;font-weight:750;letter-spacing:.15em}.hero .label{color:var(--gold)}h1,h2{font-family:Georgia,serif;font-weight:500;line-height:1.04;margin:.2em 0 .32em;letter-spacing:-.035em}h1{font-size:clamp(3.25rem,8vw,6.4rem)}h2{font-size:clamp(2.2rem,5vw,4rem)}.intro{max-width:31rem;color:#e1e6dc}.button{display:inline-flex;gap:2rem;background:var(--gold);color:var(--deep);padding:.78rem 1.15rem;margin-top:12px;font-weight:700;text-decoration:none}.button:hover{background:#f7d894}.visual svg{display:block;width:100%;max-height:400px}.section{padding:70px 0}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}article{border-top:1px solid #a9ab97;padding:14px 0}article span{color:#75531c;font-size:.8rem;font-weight:700}h3{line-height:1.2;margin:.65em 0 .35em}article p,.details p:not(.label){color:var(--muted);margin-top:.45rem}.enquiry{background:#e9eddf}.details{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}ol{margin:0;padding-left:1.6rem}li{padding:.45rem .25rem;border-bottom:1px solid #b9c3ad}footer .bar{padding:24px 0;font-size:.9rem}@media(max-width:760px){.opening{grid-template-columns:1fr;padding:48px 0 28px}.visual svg{max-height:220px}.grid{grid-template-columns:1fr 1fr}.details{grid-template-columns:1fr;gap:20px}.section{padding:46px 0}}@media(max-width:380px){.wrap{width:calc(100% - 30px)}nav{gap:.6rem}.brand,nav a{font-size:.8rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.logistics{background:#dce4d7}.log-intro{max-width:40rem;color:var(--muted)}.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}.routes figure{margin:0;padding:16px;background:#eef1e8;border:1px solid #a9b7a5}.routes svg{display:block;width:100%;color:#263d32;fill:currentColor}.routes figcaption{font-weight:700;padding:8px 6px 2px}.route-line,.iso{fill:none;stroke:#637c6b;stroke-width:2}.tank{fill:#dfb764;stroke:#7b5f28;stroke-width:2}.window{fill:#c6d4c8}@media(max-width:560px){.routes{grid-template-columns:1fr}.routes svg{max-height:145px}header .bar{flex-wrap:wrap;justify-content:space-between;padding:14px 0;gap:.4rem .85rem}header nav{gap:.8rem}}

.minimum{color:var(--gold);font-size:.88rem;letter-spacing:.025em;margin:1.2rem 0 .15rem}

.crop-art{margin:32px 0 0}.crop-art img{display:block;width:100%;height:auto}.crop-art figcaption{font-size:.85rem;color:var(--muted);margin-top:.45rem}

.sustainability p:not(.label){max-width:44rem;color:var(--muted)}

.contact{background:#172b24;color:#f6f2e7}.contact h2{max-width:850px}.contact-links{display:flex;flex-wrap:wrap;gap:12px 36px;margin:28px 0;font-size:clamp(1.1rem,3vw,1.7rem)}.contact-links a{overflow-wrap:anywhere;text-underline-offset:7px}.contact .label{color:#eac274}

/* Full-width photographic composition and refined spacing. */
.wrap { width: min(1240px, calc(100% - 64px)); }
header .bar { min-height: 92px; }
.brand { letter-spacing: .14em; }
nav a { text-decoration: none; }
nav a:hover { color: var(--gold); }
.section { padding-top: 96px; padding-bottom: 96px; }
.opening { min-height: 650px; gap: 48px; }
.hero { background: radial-gradient(ellipse at 85% 60%, #3b523d, #172b24 62%); }
h1 { font-size: clamp(3.5rem, 7.5vw, 7rem); }
h2 { max-width: 900px; }
.intro { font-size: 1.1rem; }
.button { padding: 16px 24px; border-radius: 3px; transition: background .2s, transform .2s; }
.button:hover { transform: translateY(-2px); }
.grid { gap: 32px; margin-top: 48px; }
article { padding-top: 24px; }
article span { font-size: .9rem; }
article h3 { font-family: Georgia, serif; font-size: 1.65rem; font-weight: 500; }
.crop-art { position: relative; width: 100%; margin: 0; background: #253a28; }
.crop-art img { display: block; width: 100%; height: auto; }
.crop-art figcaption { position: absolute; inset: auto 0 0; padding: 100px 5% 38px; margin: 0; background: linear-gradient(transparent,rgba(10,27,16,.85)); color: #fff9eb; }
.crop-art figcaption span { display: block; font-size: .72rem; letter-spacing: .2em; margin-bottom: 10px; }
.crop-art figcaption strong { font-family: Georgia,serif; font-weight: 400; font-size: clamp(1.3rem,3vw,2.7rem); }
.logistics { background: #e8ecdf; }
.routes { gap: 26px; margin-top: 45px; }
.routes figure { padding: 28px; background: #f6f5ec; border: 0; border-radius: 4px; box-shadow: 0 12px 30px rgba(24,43,31,.045); }
.routes figcaption { font-family: Georgia,serif; font-size: 1.4rem; font-weight: 400; }
.sustainability { border-bottom: 1px solid #c9cfbd; }
.contact { background: radial-gradient(ellipse at 100% 100%,#36523d,#14291f 65%); }
.contact-links { flex-direction: column; align-items: flex-start; gap: 16px; }
.contact-links a { text-decoration-thickness: 1px; text-decoration-color: #7f957c; }
.contact-links a:hover { color: var(--gold); }
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .section { padding-top: 60px; padding-bottom: 60px; }
  .opening { min-height: auto; gap: 16px; }
  .grid { gap: 24px; }
  .crop-art figcaption { padding: 55px 20px 20px; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .crop-art figcaption span { display: none; }
  .crop-art figcaption strong { font-size: 1rem; }
  .contact-links { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }

/* Cinematic transport photography. */
.logistics .wrap { width: min(1600px, calc(100% - 48px)); }
.logistics .label, .logistics h2, .logistics .log-intro { margin-left: max(0px, calc((100% - 1240px) / 2)); }
.transport-photos { gap: 16px; }
.transport-photos figure { position: relative; overflow: hidden; padding: 0; background: #172b24; border-radius: 3px; }
.transport-photos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.transport-photos figcaption { padding: 22px 24px 26px; color: #fff4df; font-family: Georgia, serif; font-size: 1.65rem; }
.transport-photos figcaption span { display: block; }
.transport-photos figcaption small { display: block; margin-top: 6px; color: #cbd6c6; font: .86rem/1.5 system-ui, sans-serif; }
@media (max-width: 850px) {
  .transport-photos { grid-template-columns: 1fr; gap: 24px; }
  .transport-photos img { max-height: 520px; }
  .logistics .wrap { width: calc(100% - 32px); }
}
.brand img { display: block; width: 198px; height: auto; background: transparent; filter: grayscale(1) invert(1) brightness(2); mix-blend-mode: screen; }
.footer-logo { width: 150px; height: auto; background: transparent; filter: grayscale(1) invert(1) brightness(2); mix-blend-mode: screen; }
header .bar { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 560px) { .brand img { width: 154px; } footer .bar { flex-wrap: wrap; } }
.enquiry-form { max-width: 900px; margin-top: 32px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 20px; }
.enquiry-form label { display: block; font-size: .9rem; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 8px; padding: 13px 15px; border: 1px solid #81917f; border-radius: 3px; background: #f6f2e7; color: #172b24; font: inherit; }
.enquiry-form textarea { resize: vertical; }
.enquiry-form :is(input, select, textarea):focus-visible { outline: 3px solid #eac274; outline-offset: 2px; }
.enquiry-form .button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.form-note, #form-status { color: #d1dacc; font-size: .86rem; max-width: 750px; }
@media(max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
#products { width: min(1600px, calc(100% - 48px)); }
#products > .label, #products > h2, #products > .grid { margin-left: max(0px, calc((100% - 1240px) / 2)); margin-right: max(0px, calc((100% - 1240px) / 2)); }
.product-photos { margin-top: 48px; }
@media (max-width: 850px) { #products { width: calc(100% - 32px); } }

/* Unified, readable typography for the commercial website. */
:root {
  --font-text: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
body {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, article h3, .routes figcaption, .transport-photos figcaption {
  font-family: var(--font-text);
  font-weight: 600;
}
h1 {
  font-size: clamp(2.65rem, 5.4vw, 5.2rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin-bottom: 28px;
}
h2 {
  font-size: clamp(2rem, 3.7vw, 3.35rem);
  line-height: 1.16;
  letter-spacing: -.035em;
  margin-bottom: 24px;
  text-wrap: balance;
}
h3, article h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -.015em;
  margin: 12px 0;
}
.label {
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .13em;
  line-height: 1.5;
  margin-bottom: 18px;
}
.intro {
  font-size: 1.1rem;
  line-height: 1.75;
  max-width: 34rem;
}
article p, .log-intro, .details p, .sustainability p {
  font-size: 1rem;
  line-height: 1.75;
}
.log-intro, .sustainability p:not(.label) { max-width: 48rem; }
.minimum { font-size: .85rem; line-height: 1.7; }
nav a { font-weight: 500; font-size: .95rem; }
.button { font-size: .95rem; font-weight: 600; letter-spacing: .01em; }
.routes figcaption, .transport-photos figcaption {
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: -.015em;
}
.transport-photos figcaption small {
  font-family: var(--font-text);
  font-size: .9rem;
  line-height: 1.6;
  letter-spacing: 0;
}
.enquiry-form label { font-size: .93rem; font-weight: 500; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.form-note, #form-status { font-size: .88rem; line-height: 1.65; }
footer { font-size: .9rem; }
@media (max-width: 600px) {
  body { font-size: 16px; }
  .intro { font-size: 1rem; }
  .opening { gap: 8px; }
}