/* Shared reading sizes, loaded after the component styles. */
:root {
  --reading-size: 1.125rem;
  --control-size: 1rem;
  --label-size: .875rem;
  --muted: #59675e;
}
body { font-size: var(--reading-size); line-height: 1.7; }
h1, h2, h3 { letter-spacing: -.04em; }

.hero-content > p, .section-heading > p, .service-card p,
.infra-section p, .process-grid p, .tank-copy p,
.cta-bottom p, .page-hero > p, .service-hero > div > p,
.service-details .muted, .operation-list li, .need-grid > div > p,
.need-grid ul, .company-story p, .client-options p,
.feature-grid p, .legal-copy p, .dialog-intro p, .request-result > p {
  font-size: var(--reading-size);
  line-height: 1.75;
}
.section-heading > p, .service-card p, .process-grid p,
.tank-copy p, .page-hero > p, .service-hero > div > p,
.need-grid > div > p, .company-story p, .client-options p,
.feature-grid p, .legal-copy p, .dialog-intro p, .request-result > p,
.cta-bottom p { color: #536158; }
.hero-content > p { font-size: 1.25rem; color: #edf1ed; max-width: 780px; }
.infra-section p { color: #d0d9d2; max-width: 450px; }
.section-heading > p { max-width: 400px; }
.process-grid p, .tank-copy p { max-width: none; }
.company-story .large-copy { font-size: 1.625rem; line-height: 1.6; }

.button, .text-link, .text-button, .header-cta, .header-phone,
.nav > a, .hero-secondary, .hero-strip a, .card-link,
.section-end .text-link, .cargo-filter button, .infra-links a,
.tank-copy .text-link, .footer-middle nav, .footer-middle > .text-button,
.back-link, .client-options .button, .service-hero .button,
.need-grid .button, .infra-grid .button, .cta-bottom .button,
.contact-cta .button, .hero .button, .dialog-body .button,
.form-tabs button, .result-actions .text-button, .dialog-intro > a {
  font-size: var(--control-size);
  line-height: 1.5;
}
.button { min-height: 60px; gap: 24px; padding: 17px 24px; }
.text-link, .text-button { gap: 22px; }
.header-inner { gap: 24px; margin-inline: 32px; }
.brand { font-size: 21px; letter-spacing: -.035em; }
.brand small { font-size: 11px; letter-spacing: .065em; line-height: 1.4; }
.nav { gap: 22px; }
.header-cta { min-height: 48px; padding: 12px 18px; gap: 18px; }
.header-phone { font-size: .9375rem; }
.menu-toggle { width: 48px; height: 48px; }

.overline, .eyebrow, .eyebrow > span, .hero-eyebrow,
.hero-caption, .hero-strip a > span, .service-tag,
.card-num, .section-end, .step-number, .pill-list span,
.tank-copy .eyebrow, .tank-image > span, .cta-inner .overline,
.footer-middle .overline, .footer-bottom, .footer-bottom > span:last-child,
.page-hero .overline, .service-hero .overline, .contact-card .overline,
.service-hero-art > span, .operation-list li > span,
.company-image span, .client-options .overline, .dialog-intro .overline,
.diagram-heading, .diagram-legend, .terminal-wordmark,
.faq-grid summary .faq-number {
  font-size: var(--label-size);
  line-height: 1.55;
  letter-spacing: .05em;
}
.eyebrow > span, .card-num, .step-number, .operation-list li > span,
.faq-grid summary .faq-number { letter-spacing: 0; }
.service-tag { color: #566459; }
.card-num { color: #65736a; }
.eyebrow > span { opacity: .8; }
.breadcrumbs { font-size: var(--label-size); line-height: 1.6; flex-wrap: wrap; }
.breadcrumbs span:last-child { white-space: normal; overflow: visible; }
.cargo-filter button { min-height: 48px; padding: 10px 18px; }

/* Content growth must not collide with the hero's bottom navigation. */
.hero {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: clamp(740px, calc(100svh - 86px), 920px);
  max-height: none;
}
.hero-content { height: auto; flex: 1; padding-top: 70px; padding-bottom: 95px; }
.hero-strip { position: relative; margin-top: auto; flex-shrink: 0; }
.hero-strip a { height: auto; min-height: 82px; padding-block: 18px; }
.hero-caption { bottom: 30px; }
.hero-eyebrow { flex-wrap: wrap; }
.hero h1 { letter-spacing: -.055em; }
.hero-actions { flex-wrap: wrap; }

.service-card, .home-services-grid .service-card {
  min-height: 430px;
  padding: 32px;
}
.service-card h3 { font-size: 1.875rem; line-height: 1.2; }
.service-card-top { margin-bottom: 28px; }
.home-services-grid { grid-auto-rows: 1fr; }
.card-link { gap: 14px; }
.section-end { gap: 24px; flex-wrap: wrap; }
.process-grid h3 { font-size: 1.625rem; line-height: 1.25; }
.process-grid article, .feature-grid article, .client-options article,
.contact-card, .form-row > label { min-width: 0; }
.infra-links a { gap: 18px; }
.tank-image > span { max-width: calc(100% - 36px); left: 18px; bottom: 18px; }
.tank-copy { padding: 45px 38px; }
.contact-card strong { overflow-wrap: anywhere; }
.footer-middle p, .footer-top > p { font-size: 1rem; line-height: 1.7; }
.footer-middle .overline, .footer-bottom { color: #b9c5bc; }
.footer-bottom { flex-wrap: wrap; }
.footer-bottom > span:last-child { font-size: .8125rem; }

.network-node strong { font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.network-node > span:last-child { font-size: .875rem; line-height: 1.6; }
.node-terminal strong { font-size: 1.875rem; }
.node-terminal > span:last-child { font-size: .875rem; }
.terminal-network { grid-template-columns: 1fr 1.2fr 1fr; min-height: 530px; }
.diagram-heading { flex-wrap: wrap; font-size: .8125rem; }
.faq-grid summary { font-size: 1.25rem; line-height: 1.55; gap: 18px; }
.faq-grid details > p { font-size: var(--reading-size); line-height: 1.8; }
.faq-grid summary .faq-question { font-weight: 600; }

/* Keep labels and controls legible throughout the request form. */
dialog { width: min(1100px, calc(100% - 48px)); }
.dialog-intro, .dialog-body { min-width: 0; }
.dialog-intro { padding: 55px 32px 36px; }
.dialog-intro h2 { font-size: 2.75rem; }
.dialog-drawing { display: none; }
.dialog-body { padding: 52px 36px 32px; }
.form-tabs { gap: 22px; }
.form-tabs button { text-align: left; }
label { font-size: .9375rem; line-height: 1.6; }
input, textarea { font-size: 1.0625rem; line-height: 1.6; padding-block: 12px; }
.form-note, .request-result > .form-note { font-size: .875rem; line-height: 1.7; color: #5c695f; }
.request-result textarea { font-size: 1rem; }
.dialog-close { width: 44px; height: 44px; }
.result-actions { flex-wrap: wrap; }

@media (max-width: 1200px) {
  .header-phone { display: none; }
  .header { height: 82px; }
  .header-inner { margin-inline: 28px; gap: 20px; }
  .nav { display: none; position: absolute; top: 81px; left: 0; right: 0; margin: 0; padding: 20px 32px 28px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 35px #0001; }
  .nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav > a { font-size: 1.125rem; padding: 12px 0; }
  .nav > a:after { bottom: 7px; width: 30px; }
  .header-cta { margin-left: auto; }
  .menu-toggle { display: flex; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .service-card, .home-services-grid .service-card { padding: 28px 24px; }
  .service-card h3 { font-size: 1.625rem; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .process-grid article { padding-right: 0; }
  .step-line { margin-right: 0; }
  .infra-grid { grid-template-columns: 1fr; gap: 40px; }
  .infra-visual { max-width: 780px; width: 100%; margin: auto; }
  .infra-section p { max-width: 650px; }
  .infra-section h2 br { display: none; }
  .infra-section h2 { max-width: 900px; }
  .footer-middle { flex-wrap: wrap; gap: 30px 40px; }
  .footer-bottom > span:last-child { display: none; }
}

@media (max-width: 850px) {
  .hero-content { padding-top: 64px; padding-bottom: 65px; }
  .hero-content > p { font-size: 1.125rem; }
  .hero-strip a { font-size: .9375rem; gap: 12px; }
  .hero-caption { display: none; }
  .section-heading > p { max-width: 600px; }
  .service-card h3 { font-size: 1.75rem; }
  .faq-grid { grid-template-columns: 1fr; }
  .client-options { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; gap: 28px; }
  .feature-grid article { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
  .footer-top { flex-wrap: wrap; }
  dialog[open] { grid-template-columns: 1fr; }
  .dialog-intro { padding: 32px; }
  .dialog-intro h2 { font-size: 2.125rem; }
  .dialog-intro p { max-width: 580px; }
  .dialog-body { padding: 28px 32px 32px; }
  .form-tabs button { font-size: 1rem; }
}

@media (max-width: 600px) {
  :root { --reading-size: 1.0625rem; }
  html { scroll-padding-top: 100px; }
  .wrap { width: calc(100% - 40px); }
  .header { height: 78px; }
  .header-inner { margin-inline: 14px; gap: 8px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand small { font-size: 10px; letter-spacing: .035em; }
  .brand-mark { width: 35px; height: 37px; background-size: 125px auto; }
  .header-cta { font-size: 0; width: 44px; height: 44px; min-height: 44px; padding: 11px; gap: 0; }
  .header-cta svg { width: 22px; height: 22px; }
  .menu-toggle { width: 44px; height: 44px; flex-shrink: 0; }
  .nav { top: 77px; padding-inline: 20px; }
  .hero { min-height: 0; }
  .hero-content { padding-top: 50px; padding-bottom: 48px; }
  .hero-eyebrow { font-size: .8125rem; letter-spacing: .035em; gap: 10px; margin-bottom: 28px; }
  .status-dot { flex-shrink: 0; }
  .hero h1 { font-size: clamp(38px, 10.4vw, 58px); line-height: 1.13; }
  .hero-content > p { font-size: 1.125rem; line-height: 1.65; max-width: none; margin-top: 28px; }
  .hero-actions { gap: 24px; margin-top: 30px; }
  .hero .button { font-size: 1rem; min-height: 58px; min-width: 250px; }
  .hero-strip .wrap { grid-template-columns: 1fr; }
  .hero-strip a { min-height: 56px; padding: 12px 0 !important; border-right: 0; border-bottom: 1px solid #ffffff24; font-size: 1rem; }
  .hero-strip a > span { font-size: .8125rem; }
  .hero-strip a > svg { width: 20px; }
  .hero-secondary { font-size: 1rem; }
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .home-services-grid { grid-auto-rows: auto; }
  .service-card, .home-services-grid .service-card { min-height: 0; padding: 28px 24px; }
  .service-card h3 { font-size: 1.875rem; line-height: 1.2; }
  .service-card p { margin-bottom: 30px; }
  .card-link { font-size: 1rem; }
  .service-tag { font-size: .875rem; }
  .eyebrow { font-size: .875rem; letter-spacing: .05em; gap: 14px; }
  .section-end { align-items: flex-start; }
  .process-grid { grid-template-columns: 1fr; gap: 34px; }
  .process-grid h3 { font-size: 1.75rem; }
  .process-grid p { max-width: none; }
  .infra-links { grid-template-columns: 1fr; }
  .infra-links a { font-size: 1rem; padding: 19px 0 !important; border-right: 0; }
  .pill-list span { font-size: .875rem; }
  .terminal-network { grid-template-columns: 1fr 1fr; min-height: 560px; gap: 28px 14px; }
  .node-rail { grid-area: 1/1; }.node-road { grid-area: 1/2; }
  .node-terminal { grid-area: 2/1/3/3; width: 88%; justify-self: center; }
  .node-tank { grid-area: 3/1; }.node-warehouse { grid-area: 3/2; }
  .network-node { padding: 18px 8px; }
  .network-node strong { font-size: 1rem; }
  .node-terminal strong { font-size: 1.875rem; }
  .node-terminal > span:last-child { max-width: none; }
  .desktop-connections { display: none; }.mobile-connections { display: block; }
  .diagram-heading span:last-child { display: none; }
  .diagram-legend { font-size: .875rem; }
  .tank-copy { padding: 32px 24px; }
  .tank-copy .text-link { font-size: 1rem; gap: 14px; }
  .tank-image > span { font-size: .8125rem; letter-spacing: .025em; }
  .faq-grid summary { font-size: 1.125rem; grid-template-columns: 22px minmax(0,1fr) 20px; gap: 10px; }
  .faq-grid details > p { font-size: 1.0625rem; padding-left: 0; }
  .cta-bottom p { max-width: none; }
  .footer-mail { font-size: 1.5rem; gap: 16px; }
  .footer-middle nav { font-size: 1rem; gap: 14px 18px; }
  .footer-bottom { font-size: .8125rem; gap: 12px; }
  .company-story .large-copy { font-size: 1.375rem; }
  .contact-card { padding: 30px 24px; }
  .contact-card strong { font-size: clamp(27px, 7.4vw, 36px); }
  .contact-cta h2 { font-size: 2.125rem; }
  .service-hero .overline { font-size: .875rem; }
  .service-hero-art > span { font-size: .8125rem; right: 20px; letter-spacing: .04em; }
  .operation-list li { align-items: flex-start; gap: 14px; }
  .operation-list li > span, .operation-list li > svg { margin-top: 4px; }
  dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .dialog-intro { padding: 30px 24px 24px; }
  .dialog-intro .overline { font-size: .8125rem; max-width: 82%; }
  .dialog-intro h2 { font-size: 2rem; max-width: 85%; }
  .dialog-intro p { font-size: 1rem; max-width: none; }
  .dialog-body { padding: 24px; }
  .form-tabs { gap: 20px; }
  .form-tabs button { font-size: .9375rem; }
  .form-row, .form-row.quote-fields { grid-template-columns: 1fr; gap: 0; }
  .result-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 380px) {
  .header-inner { margin-inline: 10px; gap: 6px; }
  .brand { font-size: 16px; gap: 6px; }
  .brand small { display: none; }
  .header-cta { flex-shrink: 0; }
}