:root {
  --navy: #061827;
  --navy2: #0a2841;
  --gold: #d5a84f;
  --cream: #f5f1e8;
  --ink: #081c2c;
  --muted: #5d6d7a;
  --line: #d8dee2;
}
body {
  background:
    linear-gradient(90deg, rgba(6,24,39,.018) 1px, transparent 1px),
    #fff;
  background-size: 54px 54px;
}
.site-header {
  height: 98px;
  background: linear-gradient(180deg, rgba(3,15,26,.72), transparent);
  border-bottom-color: rgba(213,168,79,.25);
  backdrop-filter: blur(10px);
}
.brand img {
  width: 246px;
  height: auto;
  display: block;
}
.site-header nav a {
  color: #dce4ea;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
}
.site-header nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 1px;
  background: var(--gold);
  transition: right .25s ease;
}
.site-header nav a:hover::after { right: 0; }
.nav-cta {
  border-color: rgba(213,168,79,.65);
  color: #fff !important;
  background: rgba(213,168,79,.08);
}
.hero {
  min-height: 820px;
  background:
    linear-gradient(90deg, rgba(3,15,26,.97) 0%, rgba(5,23,38,.92) 48%, rgba(7,32,52,.78) 100%),
    url("https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?auto=format&fit=crop&w=2000&q=90") center/cover;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to right, #000, transparent 72%);
}
.hero-copy, .hero-panel { position: relative; z-index: 1; }
.prestige-line {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #dbe3e9;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 30px;
}
.prestige-line span {
  width: 42px;
  height: 1px;
  background: var(--gold);
}
.hero h1 {
  text-shadow: 0 12px 38px rgba(0,0,0,.28);
}
.hero-panel {
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035));
  border-color: rgba(213,168,79,.32);
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
}
.button {
  letter-spacing: .02em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover {
  transform: translateY(-2px);
}
.button.primary {
  background: linear-gradient(135deg, #edcb7f, #bd8730);
  box-shadow: 0 14px 32px rgba(213,168,79,.2);
}
.trust-strip {
  position: relative;
  box-shadow: 0 16px 45px rgba(6,24,39,.07);
}
.section {
  position: relative;
}
.section > .eyebrow,
.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-head .eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.service-grid article,
.principle-grid article,
.credential-grid article,
.management-grid article {
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.service-grid article:hover {
  background: rgba(255,255,255,.055);
}
.principle-grid article:hover,
.management-grid article:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 60px rgba(6,24,39,.1);
}
.service-grid h3,
.principle-grid h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 24px;
}
.leadership {
  background:
    radial-gradient(circle at 100% 0, rgba(213,168,79,.12), transparent 28%),
    #fff;
}
.leadership-photo::before {
  border-color: rgba(213,168,79,.8);
  border-width: 2px;
}
.leadership-photo::after {
  content: "LEADERSHIP";
  position: absolute;
  z-index: 2;
  right: -42px;
  bottom: 90px;
  color: var(--gold);
  letter-spacing: .34em;
  font-size: 10px;
  font-weight: 700;
  transform: rotate(90deg);
}
.management-grid article {
  box-shadow: 0 14px 42px rgba(6,24,39,.06);
}
.initials {
  border: 1px solid rgba(213,168,79,.65);
  box-shadow: 8px 8px 0 rgba(213,168,79,.12);
}
.fleet-showcase figure {
  border-top: 1px solid rgba(213,168,79,.5);
}
.fleet-showcase img {
  transition: transform .7s ease, filter .7s ease;
}
.fleet-showcase figure:hover img {
  transform: scale(1.025);
  filter: saturate(1.05) contrast(1.03);
}
.commodity-card {
  border-top: 0;
  border-left: 5px solid var(--gold);
  box-shadow: 0 28px 80px rgba(6,24,39,.12);
}
.contact {
  background:
    radial-gradient(circle at 15% 10%, rgba(213,168,79,.16), transparent 26%),
    linear-gradient(135deg, #061827, #0b2a45);
}
.contact-card {
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
  border-top: 4px solid var(--gold);
}
footer {
  border-top: 1px solid rgba(213,168,79,.26);
}
footer .brand img { width: 220px; }
@media (max-width: 900px) {
  .brand img { width: 214px; }
  .hero { min-height: 760px; }
  .leadership-photo::after { display: none; }
}
@media (max-width: 600px) {
  .site-header { height: 82px; }
  .brand img { width: 190px; }
  .hero { padding-top: 118px; }
  .prestige-line { margin-bottom: 22px; }
}

/* Interactive enquiry experience */
.button:focus-visible,.service-card:focus-visible,.whatsapp-trigger:focus-visible,.back-top:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #f1c96f;outline-offset:3px}
.text-action{display:inline-flex;align-items:center;color:#fff;text-decoration:none;font-weight:700;padding:0 6px;border-bottom:1px solid rgba(255,255,255,.45)}
.service-card{display:block;text-decoration:none;color:inherit;border-right:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.service-card article{border:0;height:100%;min-height:0;padding:0;position:relative;overflow:hidden;transition:transform .25s ease,background .25s ease}
.service-card:hover article{background:rgba(255,255,255,.065);transform:translateY(-4px)}
.service-card.active{box-shadow:inset 0 -4px var(--gold)}
.service-card img{display:block;width:100%;height:220px;object-fit:cover;filter:saturate(.82) contrast(1.03);transition:transform .65s ease,filter .35s ease}
.service-card:hover img{transform:scale(1.035);filter:saturate(1) contrast(1.03)}
.service-card-copy{padding:26px 28px 30px}.service-card-copy h3{margin:25px 0 10px}.service-card-copy p{min-height:54px}.service-card b{display:inline-block;margin-top:20px;color:var(--gold);font-size:13px;letter-spacing:.03em}.photo-note{color:#8093a3;font-size:13px;margin:20px 0 0}
.service-details{display:grid;grid-template-columns:1.05fr .95fr;background:#f4f1e9;scroll-margin-top:20px}.detail-media{min-height:720px;overflow:hidden}.detail-media img{display:block;width:100%;height:100%;min-height:720px;object-fit:cover}.detail-content{padding:clamp(55px,7vw,110px)}.detail-content h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(40px,4.6vw,66px);font-weight:400;line-height:1.05;letter-spacing:-.035em;margin-bottom:24px}.detail-lead{font-size:21px;line-height:1.5;color:var(--navy);font-weight:650}.detail-content>p:not(.eyebrow):not(.detail-lead){color:var(--muted);font-size:17px}.detail-content h3{font-family:Georgia,serif;font-size:25px;margin:34px 0 14px}.detail-content ul{padding-left:21px;color:var(--muted);margin-bottom:34px}.detail-content li{margin-bottom:8px}
.petcoke-image{display:block;width:100%;height:310px;object-fit:cover;margin-top:34px;box-shadow:0 22px 55px rgba(6,24,39,.17)}
.dark-button{background:var(--navy);color:#fff;margin-top:12px}
.phone-list{display:grid;gap:8px}.phone-list small{grid-column:1/-1}.phone-list a{font-family:Georgia,serif}
.contact-actions{display:flex!important;gap:10px;border:0!important;padding:0!important;margin:0!important}.outline-dark{border:1px solid var(--navy);color:var(--navy)}
.enquiry-form{display:grid;gap:15px;margin-top:32px;max-width:650px}.enquiry-form label{display:grid;gap:7px;color:#dbe5ec;font-size:13px;font-weight:700}.enquiry-form input,.enquiry-form select,.enquiry-form textarea{width:100%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.075);color:#fff;padding:14px 15px;font:inherit;border-radius:0}.enquiry-form select option{color:#081c2c}.enquiry-form textarea{resize:vertical}.enquiry-form ::placeholder{color:#9fb1be}.enquiry-form .button{border:0;cursor:pointer;width:max-content}
.whatsapp-dock{position:fixed;right:24px;bottom:24px;z-index:50}.whatsapp-trigger{border:0;background:#0b8f55;color:#fff;min-height:54px;padding:0 20px;border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.28);font-weight:800;font-size:15px;display:flex;align-items:center;gap:9px;cursor:pointer}.wa-icon{font-size:22px}.whatsapp-panel{position:absolute;right:0;bottom:68px;width:min(340px,calc(100vw - 32px));background:#fff;color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.28);border-top:4px solid #0b8f55;padding:22px}.whatsapp-panel[hidden]{display:none}.whatsapp-panel p{margin-bottom:16px}.whatsapp-panel p strong,.whatsapp-panel p small{display:block}.whatsapp-panel p small{color:var(--muted);font-size:13px}.whatsapp-panel>a{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;text-decoration:none;padding:13px 0;border-top:1px solid var(--line)}.whatsapp-panel>a span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e8f7ef;color:#087846;font-size:11px}.panel-close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:25px;cursor:pointer}.back-top{position:fixed;right:28px;bottom:92px;z-index:40;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);background:var(--navy);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;cursor:pointer}.back-top.visible{opacity:1;pointer-events:auto}.back-top:hover{transform:translateY(-3px)}
@media (max-width:900px){.service-details{grid-template-columns:1fr}.detail-media,.detail-media img{min-height:470px;height:470px}}
@media (max-width:600px){.contact-actions{flex-direction:column}.contact-actions .button,.enquiry-form .button{width:100%}.whatsapp-dock{right:14px;bottom:14px}.back-top{right:18px;bottom:82px}.text-action{width:100%;justify-content:center;margin-top:5px}.petcoke-image{height:230px}.service-card img{height:235px}.service-card-copy p{min-height:0}.detail-media,.detail-media img{min-height:310px;height:310px}.detail-content{padding:55px 22px}.detail-content .button{width:100%}}