/* Premier Tank and Terminal Service LLC — site styles */
    :root {
      --navy: #142533;
      --navy-2: #1d3545;
      --slate: #526675;
      --steel: #82919a;
      --sand: #b7a17a;
      --paper: #f4f3ef;
      --white: #ffffff;
      --line: #d9dedf;
      --ink: #1a2932;
      --muted: #65747d;
      --max: 1200px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, "Segoe UI", Arial, sans-serif; line-height: 1.6; }
    a { color: inherit; text-decoration: none; }
    .topbar { background: #0e1c26; color: #d7dfe3; font-size: .78rem; letter-spacing: .035em; }
    .topbar-inner { max-width: var(--max); margin: auto; padding: 9px 24px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
    .topbar a:hover { color: var(--white); }
    header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(20,37,51,.1); backdrop-filter: blur(12px); }
    .nav-wrap { max-width: var(--max); margin: auto; min-height: 86px; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: flex; align-items: center; gap: 13px; min-width: 230px; }
    .brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--sand); color: var(--sand); font-weight: 800; font-size: .92rem; letter-spacing: -.08em; position: relative; }
    .brand-mark::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(183,161,122,.5); }
    .brand-name { font-size: .83rem; font-weight: 800; letter-spacing: .075em; line-height: 1.3; color: var(--navy); text-transform: uppercase; }
    .brand-name span { display: block; font-size: .65rem; font-weight: 600; letter-spacing: .18em; color: var(--slate); margin-top: 4px; }
    nav { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 24px); }
    nav a { font-size: .79rem; color: #394c58; font-weight: 650; transition: color .2s; white-space: nowrap; }
    nav a:hover, nav a:focus-visible { color: #9a8053; }
    .nav-contact { border: 1px solid var(--navy); padding: 10px 15px; color: var(--navy); }
    .menu-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--navy); padding: 9px 12px; font-size: 1.1rem; cursor: pointer; }
    .hero { min-height: 620px; display: flex; align-items: center; color: var(--white); background: linear-gradient(90deg, rgba(11,27,39,.94) 0%, rgba(16,36,49,.81) 45%, rgba(16,36,49,.2) 100%), url('../images/bg-hero2.jpg') center 48%/cover no-repeat; }
    .hero-inner { max-width: var(--max); width: 100%; margin: auto; padding: 94px 24px 110px; }
    .eyebrow { display: flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .19em; font-size: .72rem; font-weight: 750; color: #d0bc98; }
    .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--sand); }
    h1 { max-width: 750px; margin: 23px 0 22px; font-size: clamp(2.6rem, 5.5vw, 5.2rem); letter-spacing: -.045em; line-height: 1.06; font-weight: 650; }
    h1 span { color: #d0bc98; }
    .hero-copy { max-width: 610px; color: #d6dfe4; font-size: 1.08rem; margin: 0 0 34px; }
    .actions { display: flex; gap: 13px; flex-wrap: wrap; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 49px; padding: 13px 20px; font-weight: 750; font-size: .83rem; letter-spacing: .015em; transition: transform .2s, background .2s; }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { background: var(--sand); color: #142533; }
    .btn-outline { border: 1px solid rgba(255,255,255,.6); color: var(--white); }
    .hero-note { margin-top: 48px; display: flex; gap: 12px; align-items: center; color: #d4dde2; font-size: .76rem; letter-spacing: .04em; }
    .hero-note i { width: 7px; height: 7px; border-radius: 50%; background: #b7a17a; display: inline-block; }
    .stats { background: var(--navy); color: var(--white); }
    .stats-inner { max-width: var(--max); margin: auto; display: grid; grid-template-columns: repeat(3,1fr); padding: 31px 24px; }
    .stat { padding: 4px 34px; border-right: 1px solid rgba(255,255,255,.16); }
    .stat:first-child { padding-left: 0; }
    .stat:last-child { border: 0; }
    .stat strong { display: block; color: #d0bc98; font-size: clamp(1.75rem, 3vw, 2.55rem); line-height: 1.15; font-weight: 650; letter-spacing: -.04em; }
    .stat span { display: block; margin-top: 8px; color: #d1d9de; text-transform: uppercase; letter-spacing: .12em; font-size: .69rem; }
    section { scroll-margin-top: 100px; }
    .section { padding: 100px 24px; }
    .container { max-width: var(--max); margin: auto; }
    .section-head { max-width: 740px; margin-bottom: 42px; }
    .kicker { color: #92784f; text-transform: uppercase; font-size: .72rem; letter-spacing: .17em; font-weight: 800; }
    h2 { color: var(--navy); font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -.04em; line-height: 1.13; font-weight: 650; margin: 12px 0 18px; }
    .section-head p, .intro-copy { color: var(--muted); font-size: 1rem; margin: 0; }
    .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .intro-visual { min-height: 440px; position: relative; background: linear-gradient(180deg, rgba(20,37,51,.05), rgba(20,37,51,.3)), url('../images/home1.jpg') center/cover; }
    .visual-label { position: absolute; bottom: 22px; left: 22px; right: 22px; background: rgba(20,37,51,.92); color: white; padding: 18px 21px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
    .visual-label strong { font-size: .9rem; font-weight: 700; }
    .visual-label span { color: #d0bc98; font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; }
    .intro-copy p { margin: 0 0 17px; }
    .text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); border-bottom: 1px solid var(--sand); padding: 8px 0; margin-top: 13px; font-weight: 800; font-size: .84rem; }
    .text-link span { color: #9a8053; font-size: 1.2rem; }
    .business { background: var(--paper); }
    .business-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
    .business-card { background: var(--white); padding: 30px 27px 28px; border: 1px solid #e3e3df; min-height: 245px; transition: transform .2s, box-shadow .2s; }
    .business-card:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(20,37,51,.08); }
    .card-number { color: #a28a61; font-size: .75rem; letter-spacing: .15em; font-weight: 800; }
    .business-card h3 { color: var(--navy); margin: 27px 0 10px; font-size: 1.22rem; }
    .business-card p { color: var(--muted); font-size: .91rem; margin: 0 0 20px; }
    .business-card a { font-size: .8rem; font-weight: 800; color: var(--navy); }
    .locations-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .location-card { border: 1px solid var(--line); display: grid; grid-template-columns: 42% 58%; min-height: 335px; }
    .location-image { background-position: center; background-size: cover; min-height: 100%; }
    .location-image.rotterdam { background-image: linear-gradient(rgba(20,37,51,.1),rgba(20,37,51,.1)),url('../images/home2.jpg'); }
    .location-image.houston { background-image: linear-gradient(rgba(20,37,51,.15),rgba(20,37,51,.15)),url('../images/home3.jpg'); }
    .location-content { padding: 26px 24px; }
    .location-content .kicker { font-size: .65rem; }
    .location-content h3 { color: var(--navy); font-size: 1.4rem; margin: 8px 0 12px; }
    .capacity { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin: 16px 0; }
    .capacity small { display: block; color: var(--muted); text-transform: uppercase; font-size: .64rem; letter-spacing: .12em; }
    .capacity strong { display: block; color: var(--navy); font-size: 1.65rem; letter-spacing: -.03em; }
    .location-content p { color: var(--muted); font-size: .84rem; margin: 7px 0; }
    .safety-band { background: var(--navy-2); color: white; }
    .safety-inner { max-width: var(--max); margin: auto; padding: 70px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .safety-inner h2 { color: white; }
    .safety-inner p { color: #d1dbe0; margin: 0; }
    .safety-points { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .safety-point { border-top: 1px solid rgba(255,255,255,.24); padding-top: 15px; }
    .safety-point strong { display: block; color: #d0bc98; font-size: .94rem; margin-bottom: 6px; }
    .safety-point span { display: block; color: #d1dbe0; font-size: .82rem; }
    .contact { background: var(--paper); }
    .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; }
    .contact-copy p { color: var(--muted); }
    .contact-detail { margin-top: 24px; }
    .contact-detail small { display: block; color: #92784f; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; font-size: .66rem; }
    .contact-detail a, .contact-detail span { display: block; color: var(--navy); margin-top: 4px; font-weight: 650; overflow-wrap: anywhere; }
    .contact-panel { background: white; border: 1px solid var(--line); padding: 34px; }
    .contact-panel h3 { margin: 0 0 18px; color: var(--navy); font-size: 1.35rem; }
    .contact-panel p { color: var(--muted); font-size: .9rem; margin: 0 0 22px; }
    .email-list { display: grid; gap: 0; }
    .email-row { padding: 15px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: .87rem; }
    .email-row span { color: var(--muted); }
    .email-row a { color: var(--navy); font-weight: 750; text-align: right; }
    footer { background: #0e1c26; color: #d1d9de; }
    .footer-main { max-width: var(--max); margin: auto; padding: 48px 24px 38px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px; }
    .footer-brand { color: white; font-size: .82rem; font-weight: 800; letter-spacing: .1em; line-height: 1.5; }
    .footer-brand p { max-width: 370px; color: #aab8c0; font-size: .85rem; font-weight: 400; letter-spacing: 0; margin-top: 14px; }
    footer h4 { color: #d0bc98; text-transform: uppercase; font-size: .7rem; letter-spacing: .15em; margin: 0 0 15px; }
    .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
    .footer-links a, .footer-main p { color: #b6c1c7; font-size: .83rem; margin: 0; }
    .footer-links a:hover, footer a:hover { color: white; }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); max-width: var(--max); margin: auto; padding: 18px 24px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .73rem; color: #95a5ae; }
    :focus-visible { outline: 2px solid #b7a17a; outline-offset: 4px; }
    @media (max-width: 1080px) {
      .menu-toggle { display: inline-block; }
      nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; padding: 18px 24px 25px; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; }
      nav.open { display: flex; }
      nav a { padding: 12px 0; border-bottom: 1px solid #edf0f0; }
      nav .nav-contact { border: 0; padding: 12px 0; }
      .intro-grid { gap: 40px; }
      .location-card { grid-template-columns: 1fr; }
      .location-image { min-height: 170px; }
    }
    @media (max-width: 760px) {
      .topbar-inner { padding: 8px 18px; }
      .topbar-inner span:last-child { display: none; }
      .nav-wrap { padding: 12px 18px; min-height: 75px; }
      .brand { min-width: 0; gap: 10px; }
      .brand-mark { width: 40px; height: 40px; }
      .brand-name { font-size: .72rem; }
      .brand-name span { font-size: .58rem; }
      .hero { min-height: 590px; background-position: 58% center; }
      .hero-inner { padding: 75px 22px 70px; }
      .hero-copy { font-size: .98rem; }
      .stats-inner { grid-template-columns: 1fr; padding: 12px 24px; }
      .stat, .stat:first-child { padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
      .stat:last-child { border-bottom: 0; }
      .section { padding: 70px 22px; }
      .intro-grid, .business-grid, .locations-grid, .safety-inner, .contact-grid { grid-template-columns: 1fr; }
      .intro-grid { gap: 32px; }
      .intro-visual { min-height: 310px; }
      .business-grid { gap: 12px; }
      .business-card { min-height: 0; }
      .safety-inner { padding: 65px 22px; gap: 32px; }
      .contact-grid { gap: 35px; }
      .contact-panel { padding: 24px 20px; }
      .footer-main { grid-template-columns: 1fr; gap: 30px; padding: 40px 22px 30px; }
      .footer-bottom { padding: 18px 22px; }
    }
    
    
/* BUSINESS SECTION — local image background */
.section.business {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(
      rgba(12, 29, 42, 0.84),
      rgba(12, 29, 42, 0.88)
    ),
    url("../images/bg-hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 90px 0;
}

/* Business section heading */
.section.business .section-head {
  color: #ffffff;
  max-width: 760px;
  margin-bottom: 38px;
}

.section.business .section-head .kicker {
  color: #d0b78c;
}

.section.business .section-head h2 {
  color: #ffffff;
}

.section.business .section-head p {
  color: rgba(255, 255, 255, 0.84);
}

/* Responsive business cards */
.section.business .business-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.section.business .business-card {
  min-width: 0;
  padding: 30px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  overflow-wrap: anywhere;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.section.business .business-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.section.business .business-card .card-number {
  color: #8a7049;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  margin-bottom: 20px;
}

.section.business .business-card h3 {
  color: #142533;
  margin-bottom: 14px;
}

.section.business .business-card p {
  color: #526675;
  line-height: 1.7;
}

.section.business .business-card a {
  display: inline-block;
  margin-top: 12px;
  color: #142533;
  font-weight: 700;
  text-decoration: none;
}

.section.business .business-card a:hover {
  color: #9a7c4d;
}

/* Tablets */
@media (max-width: 900px) {
  .section.business {
    padding: 70px 0;
  }

  .section.business .business-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

/* Mobile phones */
@media (max-width: 600px) {
  .section.business {
    padding: 55px 0;
    background-position: center;
  }

  .section.business .business-grid {
    grid-template-columns: 1fr;
  }

  .section.business .business-card {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section.business .business-card {
    transition: none;
  }

  .section.business .business-card:hover {
    transform: none;
  }
}



/* Image below the Contact Page button */
.contact-panel .contact-image {
  width: 100%;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 4px;
  background: #e8ecee;
}

.contact-panel .contact-image img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  max-width: 100%;
}

/* Tablet */
@media (max-width: 768px) {
  .contact-panel .contact-image img {
    height: 230px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .contact-panel .contact-image {
    margin-top: 22px;
  }

  .contact-panel .contact-image img {
    height: 190px;
  }
}

    
    
    
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }