:root {
    --ink: #102846;
    --ink-2: #213D60;
    --steel: #4A6272;
    --mist: #8FA3B1;
    --line: #D3DADF;
    --paper: #EEF1F3;
    --white: #FFFFFF;
    --safety: #102846;
    --display: "Arial Narrow", "Impact", sans-serif;
    --body: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; }
  body {
    margin: 0;
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
  }
  img, svg, iframe { max-width: 100%; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--safety); outline-offset: 3px; }

  h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; }
  h2 { font-size: clamp(2.1rem, 4vw, 2.9rem); }
  h3 { font-size: 1.65rem; }
  p { margin: 0 0 1rem; }

  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 50px; padding: 0 24px;
    border: 2px solid transparent; border-radius: 4px;
    font-family: var(--body); font-size: 1.05rem; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
  }
  .btn-safety { background: var(--safety); color: var(--ink); }
  .btn-safety:hover { background: #213D60; }
  .btn-outline { border-color: currentColor; background: transparent; }
  .btn-outline:hover { background: rgba(255, 255, 255, .08); }

  /* Header */
  .site-header {
    position: sticky; top: 0; z-index: 30;
    background: var(--white);
    border-bottom: 1px solid var(--line);
  }
  .site-header .wrap { display: flex; align-items: center; gap: 36px; height: 84px; }
  .brand { display: flex; align-items: center; text-decoration: none; }
  .logo { display: block; height: 64px; width: 221px; }
  .nav { display: flex; gap: 30px; margin-left: auto; }
  .nav a { text-decoration: none; font-weight: 500; }
  .nav a:hover {
    text-decoration: underline; text-decoration-color: var(--safety);
    text-decoration-thickness: 3px; text-underline-offset: 7px;
  }
  .header-call { min-height: 46px; padding: 0 18px; }

  /* Hero */
  .hero { background: var(--ink); color: var(--white); padding: 72px 0 60px; overflow: hidden; }
  .hero .wrap {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px; align-items: center;
  }
  .hero h1 { font-size: clamp(2.9rem, 6.2vw, 5rem); max-width: 10ch; }
  .hero-lede { font-size: 1.2rem; color: #C6D1D8; max-width: 32em; margin: 24px 0 32px; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .hero .btn-outline { color: var(--white); }

  .diagram { margin: 0; }
  .diagram svg { display: block; width: 100%; height: auto; }
  .diagram .label { font-family: var(--body); font-size: 17px; font-weight: 600; fill: var(--white); }
  .diagram a:hover .label, .diagram a:focus .label { fill: var(--safety); text-decoration: underline; }
  .diagram a:focus { outline: none; }
  .diagram figcaption { font-size: .95rem; color: var(--mist); margin-top: 10px; }
  .flow { animation: flow 1.1s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -20; } }

  /* Credentials strip */
  .creds { background: var(--safety); }
  .creds ul {
    list-style: none; margin: 0 auto; padding-top: 18px; padding-bottom: 18px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .creds li {
    font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.2;
    padding: 2px 20px; border-left: 2px solid rgba(27, 40, 51, .3);
  }
  .creds li:first-child { border-left: 0; padding-left: 0; }

  /* Sections */
  .section { padding: 92px 0; }
  .section-intro { max-width: 40em; margin-bottom: 52px; }
  .section-intro p { color: var(--steel); font-size: 1.15rem; margin: 14px 0 0; }

  /* Services */
  .services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 72px; }
  .service { border-top: 6px solid var(--ink); padding-top: 22px; }
  .service h3 { margin-bottom: 12px; }
  .service p { color: var(--steel); max-width: 34em; }
  .service ul { list-style: none; margin: 18px 0 0; padding: 0; }
  .service li { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .services-note { margin: 56px 0 0; font-size: 1.15rem; }
  .services-note a { font-weight: 600; text-decoration-color: var(--safety); text-decoration-thickness: 3px; text-underline-offset: 5px; }

  /* About */
  .about { background: var(--paper); }
  .about .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .about-copy p { font-size: 1.15rem; color: var(--steel); margin-top: 18px; max-width: 32em; }
  .promise { margin: 0; padding: 28px 30px; background: var(--white); border-left: 6px solid var(--safety); }
  .promise blockquote { margin: 0; }
  .promise blockquote p {
    font-family: var(--display); font-weight: 600; font-size: 1.65rem; line-height: 1.2;
    color: var(--ink); margin: 0; max-width: none;
  }
  .promise figcaption { margin-top: 12px; color: var(--steel); font-weight: 500; }


  /* Service area */
  .area-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
  .area-grid h3 { padding-bottom: 12px; border-bottom: 3px solid var(--ink); margin-bottom: 14px; }
  .area-grid ul { list-style: none; margin: 0; padding: 0; }
  .area-grid li { padding: 5px 0; }
  .area-grid .fl ul { columns: 2; column-gap: 32px; }

  /* Contact */
  .contact { border-top: 1px solid var(--line); }
  .contact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .contact-copy > p { font-size: 1.15rem; color: var(--steel); margin-top: 14px; }
  .big-phone {
    display: inline-block; margin: 12px 0 20px;
    font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3rem);
    line-height: 1; text-decoration: none;
    border-bottom: 5px solid var(--safety);
  }
  .contact-details { font-style: normal; margin-bottom: 28px; }
  .contact-details a { text-decoration-color: var(--mist); text-underline-offset: 4px; }
  .map { display: block; width: 100%; height: 260px; border: 0; border-radius: 4px; background: var(--paper); }

  .form { background: var(--paper); padding: 36px; border-radius: 4px; }
  .form h3 { margin-bottom: 22px; }
  .field { margin-bottom: 18px; }
  .field label { display: block; font-weight: 600; margin-bottom: 6px; }
  .field label .opt { font-weight: 400; color: var(--steel); }
  .field input, .field select, .field textarea {
    width: 100%; font: inherit; color: var(--ink);
    padding: 12px 14px; background: var(--white);
    border: 1.5px solid #93A4B0; border-radius: 4px;
  }
  .field textarea { min-height: 130px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--safety); outline-offset: 0; border-color: var(--ink); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .hp { position: absolute; left: -9999px; }
  .form .btn { width: 100%; margin-top: 6px; }

  /* Footer */
  .site-footer { background: var(--ink); color: #C6D1D8; padding: 48px 0 40px; }
  .site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; align-items: flex-start; }
  .footer-logo { display: block; height: 72px; width: 249px; margin: -8px 0 0 -10px; }
  .site-footer address { font-style: normal; line-height: 1.7; }
  .site-footer a { color: var(--white); text-decoration-color: var(--mist); text-underline-offset: 4px; }
  .copyright { flex-basis: 100%; margin: 12px 0 0; padding-top: 20px; border-top: 1px solid #34495A; font-size: .9rem; color: var(--mist); }

  /* Mobile call bar */
  .callbar { display: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .flow { animation: none; }
  }

  @media (max-width: 980px) {
    .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
    .hero h1 { max-width: 13ch; }
    .creds ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
    .creds li, .creds li:first-child { border-left: 0; padding-left: 0; }
    .about .wrap, .contact .wrap { gap: 56px; }
  }

  @media (max-width: 880px) {
    .nav { display: none; }
    .header-call { margin-left: auto; }
  }

  @media (max-width: 760px) {
    body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
    .section { padding: 68px 0; }
    .hero { padding: 48px 0 44px; }
    .services-grid, .about .wrap, .contact .wrap { grid-template-columns: 1fr; }
    .area-grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
    .area-grid .fl { grid-column: 1 / -1; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form { padding: 26px 20px; }
    .header-call { display: none; }
    .callbar {
      display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
      background: var(--ink);
    }
    .callbar .btn { width: 100%; }
  }

  @media (max-width: 420px) {
    .wrap { padding: 0 18px; }
    .logo { height: 52px; width: 180px; }
    .creds li { font-size: 1.15rem; }
    .area-grid .fl ul { columns: 1; }
  }

/* Navy and white finishing styles */
.btn-safety { color: #fff; }
.hero .btn-safety, .callbar .btn-safety { background:#fff; color:var(--ink); }
.hero .btn-safety:hover, .callbar .btn-safety:hover { background:#dfe7ef; }
.hero h1 { font-family: var(--body); font-weight:800; letter-spacing:-.045em; font-size:clamp(2.8rem,4.9vw,4.5rem); max-width:12ch; }
h2,h3 { font-family:var(--body); letter-spacing:-.025em; }
.hero-photo { margin:0; }
.hero-photo img { display:block; width:100%; height:510px; object-fit:cover; border-radius:4px; }
.hero-photo figcaption { margin-top:14px; color:#c6d1d8; font-size:.9rem; }
.creds { background:#edf1f6; }
.creds li { font-family:var(--body); font-size:1rem; }
.gallery { background:var(--ink); color:white; }
.gallery .section-intro p { color:#c6d1d8; }
.gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.gallery-grid figure { margin:0; }
.gallery-grid img { display:block; width:100%; aspect-ratio:3/2; height:auto; object-fit:cover; border-radius:4px; }
.gallery-grid figcaption { padding-top:16px; font-weight:600; }
.image-note { font-size:.875rem; color:#c6d1d8; margin:28px 0 0; }
.privacy-note { font-size:.875rem; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; background:white; padding:12px; }
.skip-link:focus { top:12px; }
.menu-toggle { display:none; background:var(--ink); color:white; border:0; border-radius:4px; padding:12px 16px; font:inherit; cursor:pointer; }
.site-header .wrap { gap:22px; }
.nav { gap:20px; }
#form-status { margin:16px 0 0; }
@media(max-width:1100px) { .header-call {display:none;} }
@media(max-width:880px) {
 .site-header .wrap { flex-wrap:wrap; height:auto; min-height:84px; padding-top:10px; padding-bottom:10px; }
 .menu-toggle:not([hidden]) { display:block; margin-left:auto; }
 .nav { display:flex; width:100%; flex-wrap:wrap; margin:0; padding:12px 0; }
 .js .nav { display:none; }
 .js .nav.is-open { display:flex; }
 .hero-photo img { height:auto; aspect-ratio:3/2; }
}
@media(max-width:600px) {
 .gallery-grid { grid-template-columns:1fr; }
 .hero-actions { flex-direction:column; align-items:stretch; }
 .btn { white-space:normal; text-align:center; }
 .hero h1 { max-width:13ch; }
 .big-phone { font-size:2rem; }
 .contact-details a { overflow-wrap:anywhere; }
}

.hero :focus-visible, .gallery :focus-visible, .site-footer :focus-visible, .callbar :focus-visible { outline-color:white; }

/* Compliance follows the existing service typography and ruled list. */
.service-compliance { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 72px; }
.service-compliance ul { margin-top:0; }
@media (max-width:760px) {
  .service-compliance { grid-template-columns:1fr; }
  .service-compliance ul { margin-top:18px; }
}

/* Supplied Petro Flow nozzle mark and accessible wordmark. */
.brand-lockup { display:inline-flex; align-items:center; gap:10px; color:var(--ink); flex-shrink:0; }
.brand-mark { width:70px; height:56px; display:block; object-fit:contain; }
.brand-name { display:block; font-family:var(--body); font-weight:800; font-size:1.6rem; letter-spacing:-.04em; line-height:1.02; white-space:nowrap; }
.brand-inc { display:block; margin-top:5px; font-size:.75rem; line-height:1; letter-spacing:.2em; font-weight:600; }
.footer-brand { color:white; }
.footer-brand .brand-mark { filter:invert(1); }
@media (max-width:420px) { .brand-mark { width:56px; height:44px; } .brand-name { font-size:1.4rem; } .brand-lockup { gap:8px; } }

/* Supplied equipment image and photographs. */
.product-stage { background:white; border-radius:4px; padding:18px; }
.hero-product .product-stage img { display:block; width:100%; height:470px; object-fit:contain; border-radius:0; }
.gallery-grid a { display:block; border-radius:4px; }
.gallery-grid a:focus-visible { outline-color:white; }
.gallery-grid .gallery-wide { grid-column:1 / -1; }
.gallery-grid .gallery-wide img { aspect-ratio:2.06; }
.gallery-grid .gallery-portrait img { aspect-ratio:3 / 4; }
@media(max-width:980px) { .product-stage { max-width:540px; margin:auto; } .hero-product figcaption { text-align:center; } }
@media(max-width:600px) { .hero-product .product-stage img { height:auto; aspect-ratio:1; } .gallery-grid .gallery-wide { grid-column:auto; } }

/* The final service spans the desktop grid. */
.service-wide { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 72px; }
.service-wide ul { margin-top:0; }
@media (max-width:760px) {
  .service-wide { grid-template-columns:1fr; }
  .service-wide ul { margin-top:18px; }
}

/* Manufacturer names are replaced by supplied logos when available. */
.brands { background:#edf1f6; border-top:1px solid var(--line); }
.brand-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.brand-grid li { min-height:120px; background:white; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; font-weight:700; font-size:1.2rem; }
.brand-grid img { max-width:100%; max-height:70px; width:auto; height:auto; object-fit:contain; }
.contact-copy h2 { line-height:1.12; }
.hero-actions .btn { white-space:normal; text-align:center; }
@media(max-width:600px) { .brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .brand-grid li { padding:16px; font-size:1rem; } }

/* Manufacturer artwork keeps its original proportions and colors. */
.brand-grid li { min-height:150px; padding:28px; }
.brand-grid img { display:block; max-width:100%; max-height:82px; width:auto; height:auto; object-fit:contain; }
.brand-grid li[data-brand="dover"] img, .brand-grid li[data-brand="franklin"] img { max-height:90px; }
@media(max-width:600px) { .brand-grid li { min-height:116px; padding:16px; } .brand-grid img { max-height:64px; } .brand-grid li[data-brand="dover"] img, .brand-grid li[data-brand="franklin"] img { max-height:68px; } }

/* Careers and employment application. */
.careers-callout { background:#edf1f6; border-top:1px solid var(--line); }
.careers-row { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.careers-row p { max-width:42em; margin:18px 0 0; color:var(--steel); }
.careers-row .btn { flex-shrink:0; }
.application-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:60px; align-items:start; }
.application-intro h1 { font-family:var(--body); font-size:clamp(2.6rem,4.5vw,4rem); font-weight:800; letter-spacing:-.04em; margin:16px 0 28px; }
.application-intro p { color:var(--steel); }
.application-intro .eyebrow { color:var(--ink); font-weight:700; }
.application-layout .form h2 { font-size:1.75rem; }
.form-intro, .field-help { font-size:.875rem; color:var(--steel); margin-top:10px; }
.field-help { margin-bottom:0; }
.careers-page { padding-bottom:0; }
.nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:7px; }
.form button:disabled { opacity:.65; cursor:wait; }
@media(max-width:1100px) { .site-header .nav { gap:16px; } }
@media(max-width:880px) { .application-layout { grid-template-columns:1fr; gap:32px; } }
@media(max-width:600px) { .careers-row { flex-direction:column; align-items:flex-start; gap:24px; } .careers-row .btn { width:100%; } }

/* Main station photograph keeps its full portrait composition. */
.hero-site-photo { width:100%; max-width:465px; justify-self:center; }
.hero-site-photo img { height:auto; aspect-ratio:auto; object-fit:contain; }