/* Layout/components — fonts are defined in fonts.css (enqueued first). */
:root {
--bg: #ffffff;
--bg2: #f6f8fa;
--accent: #002856;
--accent-dim: #1e3a5f;
--accent-faint: #eef2f8;
/* swoosh-isolated.svg fill — callout box outlines */
--swoosh-fill: #123866;
/* Shared callout shell (history page + homepage about block) */
--callout-radius: 12px;
--callout-padding: 1.25rem 1.35rem;
/* Opaque stops — same blues as translucent history treatment, without white bleeding through on light sections */
--callout-bg: linear-gradient(135deg, #0d2847 0%, #032658 45%, #001a3a 100%);
--callout-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
--text: #1a2d4a;
--text-bright: #001428;
--text-dim: var(--accent);
--border: rgba(0,40,86,0.2);
--border-bright: rgba(0,40,86,0.35);
--card-stroke: #ebebeb;
--card-stroke-width: 3px;
/* Single channel between grid cells (gap only; no borders on card children or gutters double). */
--card-gutter-width: var(--card-stroke-width);
--blue: var(--accent);
--blue-dim: var(--text-dim);
/* Bold Condensed for headlines + inline emphasis (TradeGothic-Bold.woff2 as “Trade Gothic Bold” often hits fallback sans). Gotham for buttons/eyebrow; Trade Gothic LT Std for body */
--font-headline: 'NYSMH-TradeGothicLTPro-Bold', 'Trade Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
--font-subhead: var(--font-headline);
--font-eyebrow: 'Gotham Book', 'Gotham', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Trade Gothic LT Std', 'Trade Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
--font-btn: 'Gotham Book', 'Gotham', -apple-system, BlinkMacSystemFont, sans-serif;
--font: var(--font-body);
--proto-badge-h: 29px;
/* Nav row height (desktop) — used for homepage hero underlap */
--nav-bar-h: 100px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
/* Reserve space for the vertical scrollbar so nav width does not shift between pages. */
html {
scrollbar-gutter: stable;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 18px;
min-height: 100vh;
overflow-x: hidden;
position: relative;
/* Fewer runt lines in paragraphs; titles override with balance below */
text-wrap: pretty;
}
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.2s;
}
body.is-navigating nav {
opacity: 0.9;
}
@media (max-width: 768px) {
/* Opaque bar on mobile; 0.9 + blur reads as “see-through” while scrolling. */
body.is-navigating nav {
opacity: 1;
}
}
/* Skip link — first focusable in document; clipped until :focus */
.skip-link {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.skip-link:focus {
background: var(--accent);
clip: auto;
clip-path: none;
color: #fff;
height: auto;
margin: 0;
overflow: visible;
padding: 0.75rem 1.25rem;
position: fixed;
left: 0.75rem;
top: 0.75rem;
width: auto;
z-index: 100001;
text-decoration: none;
font-family: var(--font-btn);
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
border-radius: 4px;
outline: 2px solid #fff;
outline-offset: 2px;
}
#main {
scroll-margin-top: calc(var(--proto-badge-h) + var(--nav-bar-h));
}
/* Text links: underline animates left-to-right on hover/focus. */
a,
a:visited {
color: inherit;
text-decoration: none;
text-decoration-skip-ink: auto;
text-underline-offset: 0.16em;
text-decoration-thickness: from-font;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 1px;
transition: color 0.15s ease, background-size 0.24s ease;
}
/* Real hyperlinks: hand cursor (:any-link = href anchors + areas; covers :visited; beats most plugin resets). */
:any-link {
cursor: pointer;
}
a:hover,
a:focus-visible {
background-size: 100% 1px;
}
/* Opt-out for non-text UI links. */
.btn,
.nav-link,
.nav-logo-link,
.footer-logo-link,
.nav-external a,
.proto-badge-dispatch,
.proto-badge-inquiry,
.skip-link,
.footer-social-link,
.route-item,
.service-card,
.gallery-section .gallery-item,
.fleet-card,
.article-archive-item a {
background-image: none;
background-size: 0 0;
}
/* Multi-line titles: even line lengths. Headline-face leads (.page-intro-lead, .content-overview-lead) stay pretty. */
h1, h2, h3, h4, h5, h6,
.page-title,
.map-section-heading,
.hero-headline,
.page-hero-title,
.modal-title,
.dispatch-modal-title,
.section-label,
.page-placeholder .page-title,
.content-heading,
.content-heading-lg,
.content-subhead,
.content-body > .content-inset-h2,
.content-card .card-title,
.vessel-page-title,
.timeline-callout-headline,
.service-title,
.gallery-heading,
.about-heading,
.fleet-name,
.news-title,
.cta-heading,
.footer-heading,
.stat-num {
text-wrap: balance;
}
@media print {
p, li {
orphans: 2;
widows: 2;
}
}
h2 {
font-family: var(--font-headline);
font-weight: 700;
color: #1c1f26;
text-transform: none;
letter-spacing: 0.02em;
font-kerning: normal;
font-feature-settings: "kern" 1;
}
h3 {
color: var(--accent);
}
.wrapper { position: relative; z-index: 1; }
/* SKELETON BADGE — navy bar, Wireframe left, 24/7 Dispatch centered */
.proto-badge { position: fixed; top: 0; left: 0; right: 0; height: var(--proto-badge-h); box-sizing: border-box; background: #002856; border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; font-size: 12.75px; color: rgba(255,255,255,0.9); letter-spacing: 0.12em; z-index: 1000; }
.proto-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #bbbbbb; animation: proto-badge-label-dot 1.5s ease-in-out infinite; flex-shrink: 0; position: absolute; left: 20px; top: calc(50% - 2px); transform: translateY(-50%); }
.proto-badge span.label { color: rgba(255,255,255,0.7); font-weight: 600; letter-spacing: 0.2em; position: absolute; left: 36px; top: 50%; transform: translateY(-50%); }
.proto-badge-dispatch { color: #bbbbbb; font-size: 0.855em; text-decoration: none; letter-spacing: 0.08em; white-space: nowrap; transition: color 0.15s; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; line-height: 1; padding-top: 2px; }
.proto-badge-dispatch::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; animation: dispatch-dot-lamp 0.88s ease-in-out infinite; align-self: center; margin-top: -3px; }
.proto-badge-dispatch:hover { color: #aaaaaa; }
.proto-badge-phones { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.proto-badge-sep { color: rgba(255,255,255,0.35); user-select: none; }
.proto-badge-inquiry { color: #bbbbbb; font-size: 0.855em; text-decoration: none; letter-spacing: 0.08em; white-space: nowrap; transition: color 0.15s; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; line-height: 1; padding-top: 2px; }
.proto-badge-inquiry:hover { color: #aaaaaa; }
@keyframes proto-badge-label-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* Dispatch row: blink reads on link text; lamp uses background + soft shadow (not opacity). */
@keyframes dispatch-dot-lamp {
0%, 100% {
background: #e4e8ee;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 7px rgba(195, 208, 228, 0.18);
}
50% {
background: #5a6578;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.12);
}
}
/* NAV — white → #b8b8b8 via --nav-scroll-blend (0–1, dispatch-modal.js) */
nav { --nav-scroll-blend: 0; width: 100%; max-width: none; box-sizing: border-box; margin-top: var(--proto-badge-h); border-bottom: none; background: color-mix(in srgb, #b8b8b8 calc(var(--nav-scroll-blend) * 100%), #ffffff); position: sticky; top: var(--proto-badge-h); z-index: 900; backdrop-filter: blur(4px); transition: border-color 0.25s ease; box-shadow: none; }
/* Homepage (body.page-home): fixed full-width nav over hero; bar turns gray on scroll */
@media (min-width: 1025px) {
body.page-home nav {
position: fixed;
left: 0;
right: 0;
width: 100%;
max-width: none;
margin-top: 0;
top: var(--proto-badge-h);
}
body.page-home > .wrapper {
padding-top: calc(var(--proto-badge-h) + var(--nav-bar-h));
}
body.page-home main > .hero-full:first-child {
margin-top: calc(-1 * var(--nav-bar-h));
/* Keep hero copy below fixed proto bar + nav on short viewports (e.g. MacBook Air with browser chrome). */
padding-top: calc(var(--proto-badge-h) + var(--nav-bar-h));
min-height: calc(70vh + var(--proto-badge-h) + var(--nav-bar-h));
}
}
.nav-inner { max-width: none; width: 100%; margin: 0 auto; display: flex; align-items: stretch; padding: 0 clamp(20px, 3vw, 48px); min-height: 100px; column-gap: clamp(16px, 2.5vw, 36px); }
.nav-logo { display: flex; align-items: center; padding: 0 20px 0 0; margin-right: 12px; flex-shrink: 0; overflow: visible; }
.nav-logo-link { display: flex; align-items: center; text-decoration: none; overflow: visible; }
.nav-logo-img { height: 98px; width: auto; display: block; object-fit: contain; object-position: center left; min-width: 80px; }
/* Header: horizontal wordmark everywhere; core lockup hidden when horizontal asset is present */
.nav-logo-link .nav-logo-img--horizontal { display: none; }
.nav-logo-link:has(.nav-logo-img--horizontal) .nav-logo-img--full { display: none; }
.nav-logo-link:has(.nav-logo-img--horizontal) .nav-logo-img--horizontal { display: block; height: 72px; width: auto; max-width: min(420px, 38vw); min-width: 0; object-position: center left; }
.logo-icon { width: 36px; height: 36px; border: 1px solid var(--border-bright); display: flex; align-items: center; justify-content: center; background: var(--accent-faint); color: var(--text-bright); font-size: 13px; letter-spacing: 0.1em; }
.logo-icon svg { width: 20px; height: 20px; stroke: var(--text-bright); fill: none; stroke-width: 1.5; }
.logo-text { font-family: var(--font-eyebrow); font-size: 16px; font-weight: 400; color: var(--text-bright); line-height: 1.3; letter-spacing: 0.04em; }
.logo-text span { display: block; font-size: 13px; color: var(--text-dim); font-weight: 400; letter-spacing: 0.12em; }
/* Middle strip grows between logo and Careers; single row keeps top-level items from reflowing at mid-widths. */
.nav-links { display: flex; align-items: stretch; list-style: none; flex: 1; min-width: 0; justify-content: flex-start; flex-wrap: nowrap; row-gap: 0; column-gap: 0; }
.nav-mobile-contact { display: none; }
.nav-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; padding-left: clamp(20px, 3vw, 44px); flex-shrink: 0; align-self: stretch; }
.nav-item { position: relative; flex: 1 1 0; min-width: max-content; max-width: 100%; }
.nav-links > .nav-item:last-child { flex-grow: 0; flex-shrink: 1; flex-basis: auto; }
.nav-item::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: #012856; transform: scaleX(0); transition: transform 0.2s ease; }
.nav-item:hover::after, .nav-item:has(.nav-link.active)::after { transform: scaleX(1); }
.nav-item + .nav-item { border-left: none; }
/* Transparent so nav’s single color-mix paints behind logo + links (avoids .nav-link background transition fighting scroll) */
.nav-link { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 clamp(10px, 0.9vw, 18px); width: 100%; min-width: 0; height: 100%; box-sizing: border-box; color: #012856; text-decoration: none; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, background 0.2s ease; white-space: nowrap; background: transparent; font-family: 'Gotham Bold', 'Gotham', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; }
.nav-link:hover, .nav-item:hover .nav-link { color: #012856; background: #ebebeb; }
.nav-link .chevron { font-size: 10px; opacity: 0.6; transition: transform 0.2s; color: inherit; }
.nav-item:hover .chevron { transform: rotate(180deg); opacity: 1; }
.nav-link.active { color: #012856; }
.dropdown { position: absolute; top: 100%; left: 0; min-width: 220px; background: #ebebeb; border: 1px solid rgba(0,0,0,0.15); border-top: 2px solid var(--accent); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.15s, transform 0.15s; z-index: 999; }
.nav-item:hover .dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }
.dropdown li { list-style: none; }
.dropdown a { display: flex; align-items: center; padding: 10px 16px; min-height: 40px; box-sizing: border-box; color: #012856; text-decoration: none; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid rgba(0,0,0,0.1); transition: background 0.1s, color 0.1s; white-space: nowrap; font-family: 'Gotham Book', 'Gotham', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; }
.dropdown a:hover { background: #d4d4d4; color: #012856; }
.dropdown li:last-child a { border-bottom: none; }
/* Contact dropdown — Request Quote: gold diamond, vertical bar */
.dropdown .dropdown-item--quote a { border-left: 3px solid #e1ab00; padding-left: 13px; }
.dropdown .dropdown-item--quote a::before { content: '◆'; color: #e1ab00; font-size: 9px; margin-right: 10px; }
.nav-external { display: flex; align-items: center; }
.nav-external a { font-family: var(--font-btn); font-size: 12px; font-weight: 600; letter-spacing: 0.11em; line-height: 1.15; color: #fff; text-transform: uppercase; text-decoration: none; padding: 14px 22px; min-height: 46px; border: 3px solid #b8b8b8; border-radius: 5px; transition: background 0.3s ease, background-position 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; display: inline-flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, #001a3a 0%, #002856 50%, #001428 100%); background-size: 200% 200%; background-position: 0% 50%; box-shadow: 0 2px 8px rgba(0, 20, 40, 0.2); }
.nav-external a::before { content: '◆'; color: #e1ab00; font-size: 9px; margin-right: 10px; }
.nav-external a::after { content: '◆'; color: #e1ab00; font-size: 9px; margin-left: 10px; }
.nav-external a:hover { background: linear-gradient(135deg, #002856 0%, #003366 50%, #002856 100%); background-position: 100% 50%; color: #fff; border: 3px solid #b8b8b8; box-shadow: 0 0 12px rgba(225,171,0,0.25); }
/* Saved menus / WP: hide injected external-link SVGs; theme uses plain text ↗ in markup where needed. */
nav .nav-links a[target="_blank"] svg,
nav .dropdown a[target="_blank"] svg,
footer .footer-links a[target="_blank"] svg {
display: none !important;
}
nav .nav-links a[target="_blank"] + span:has(svg),
nav .dropdown a[target="_blank"] + span:has(svg),
footer .footer-links a[target="_blank"] + span:has(svg) {
display: none !important;
}
nav .nav-links a[target="_blank"]::after,
nav .dropdown a[target="_blank"]::after,
footer .footer-links a[target="_blank"]::after,
nav .nav-links a[target="_blank"]::before,
nav .dropdown a[target="_blank"]::before,
footer .footer-links a[target="_blank"]::before {
content: none !important;
display: none !important;
}
/* Sitewide (inside .wrapper): WP / hosts often inject SVG, Dashicons, or sibling spans on target=_blank.
Exclude real icons: footer social + award links use SVG on purpose. */
.wrapper a[target="_blank"]:not(.footer-social-link):not(.footer-award-link) > svg,
.wrapper a[target="_blank"]:not(.footer-social-link):not(.footer-award-link) .dashicons,
.wrapper a[target="_blank"]:not(.footer-social-link):not(.footer-award-link) [class*="dashicons-"] {
display: none !important;
}
.wrapper a[target="_blank"]:not(.footer-social-link):not(.footer-award-link) + span:has(svg),
.wrapper a[target="_blank"]:not(.footer-social-link):not(.footer-award-link) + span:has(.dashicons) {
display: none !important;
}
.wrapper a[target="_blank"]:not(.footer-social-link):not(.footer-award-link)::before,
.wrapper a[target="_blank"]:not(.footer-social-link):not(.footer-award-link)::after {
content: none !important;
display: none !important;
}
/* WP Twemoji: literal ↗ (U+2197) becomes 
— hide so it matches static wireframe typography. */
.wrapper a[target="_blank"]:not(.footer-social-link):not(.footer-award-link) img.emoji[src*="2197"],
.wrapper a[target="_blank"]:not(.footer-social-link):not(.footer-award-link) img.emoji[alt="↗"] {
display: none !important;
}
/* DISPATCH MODAL */
.modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.modal.modal-open { pointer-events: all; opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); cursor: pointer; }
.modal-content { position: relative; background: var(--bg); border: var(--card-stroke-width) solid var(--card-stroke); max-width: 420px; width: 100%; padding: 24px; }
.modal-title { font-family: var(--font-headline); font-size: 19px; font-weight: 700; color: #1c1f26; letter-spacing: 0.02em; text-transform: none; margin-bottom: 12px; font-kerning: normal; font-feature-settings: "kern" 1; }
.modal-body { font-family: var(--font-body); font-size: 17px; color: var(--text-dim); line-height: 1.6; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-actions .btn { font-size: 16px; padding: 8px 14px; }
/* DISPATCH MODAL — small popup (30% larger) */
.dispatch-modal-content { max-width: 442px; padding: 31px; }
.dispatch-modal-title { font-family: var(--font-headline); font-size: 25px; font-weight: 700; color: #1c1f26; text-transform: none; letter-spacing: 0.02em; margin-bottom: 16px; font-kerning: normal; font-feature-settings: "kern" 1; text-align: center; }
.dispatch-modal-body { font-family: var(--font-body); font-size: 18px; color: var(--text-dim); line-height: 1.5; margin-bottom: 21px; text-align: center; }
.dispatch-modal-img { aspect-ratio: 16/10; margin-bottom: 16px; width: 100%; height: auto; object-fit: cover; display: block; }
.dispatch-modal-actions { flex-direction: column; }
.dispatch-call-btn { width: 100%; justify-content: center; font-weight: 600; }
/* 24/7 Dispatch popup treatment */
#dispatch-modal .dispatch-modal-content { background: #0f1115; border-color: #252934; color: #fff; }
#dispatch-modal .dispatch-modal-title,
#dispatch-modal .dispatch-modal-body { color: #fff; }
#dispatch-modal .dispatch-modal-body { color: #d3d6dc; }
#dispatch-modal .dispatch-call-btn { background: #e1ab00; border-color: #e1ab00; color: #1c1f26; }
#dispatch-modal .dispatch-call-btn:hover { background: #b7931f; border-color: #b7931f; color: #1c1f26; }
#dispatch-modal .dispatch-call-btn:focus,
#dispatch-modal .dispatch-call-btn:focus-visible,
#dispatch-modal .dispatch-call-btn:active {
background: #e1ab00;
border-color: #e1ab00;
color: #1c1f26;
}
#dispatch-modal .dispatch-call-btn:hover:focus-visible {
background: #b7931f;
border-color: #b7931f;
color: #1c1f26;
}
#dispatch-modal a.dispatch-call-btn:link,
#dispatch-modal a.dispatch-call-btn:visited {
color: #1c1f26;
}
#inquiry-modal .dispatch-modal-title { color: #002856; }
#inquiry-modal .dispatch-modal-body { color: #111; }
#inquiry-modal .modal-backdrop { background: rgba(255, 255, 255, 0.72); }
#dispatch-modal .dispatch-modal-close {
border: 1px solid #fff;
color: #fff;
text-transform: uppercase;
}
#dispatch-modal .dispatch-modal-close:hover {
border-color: #fff;
color: #fff;
background: rgba(211, 211, 211, 0.18);
}
/* MAIN */
main { max-width: 1280px; margin: 0 auto; padding: 0 64px 64px; }
.section-label { font-family: var(--font-headline); font-weight: 700; font-size: 12px; letter-spacing: 0.25em; color: #b8b8b8; text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.section-label::before { content: attr(data-index); color: #b8b8b8; font-family: var(--font-headline); font-weight: 700; font-size: 12px; text-transform: uppercase; }
.section-label::after { content: ''; flex: 1; height: 3px; background: var(--card-stroke); }
.placeholder { border: var(--card-stroke-width) solid var(--card-stroke); background: rgba(0,40,86,0.04); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; color: var(--text-dim); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; position: relative; overflow: hidden; }
.placeholder.img { background-image: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--card-stroke) calc(50% - 1.5px), var(--card-stroke) calc(50% + 1.5px), transparent calc(50% + 1.5px)), linear-gradient(to bottom left, transparent calc(50% - 1.5px), var(--card-stroke) calc(50% - 1.5px), var(--card-stroke) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
.coord { position: absolute; font-size: 13px; color: var(--text-dim); letter-spacing: 0.1em; pointer-events: none; }
.coord-tl { top: 4px; left: 4px; }
.coord-br { bottom: 4px; right: 4px; }
.rel { position: relative; }
.page-placeholder { padding: 27px 0; border-bottom: none; position: relative; }
.page-placeholder::after { display: none; }
.page-placeholder .page-title { font-family: var(--font-headline); font-size: 33px; font-weight: 700; color: var(--text-bright); letter-spacing: 0.02em; margin-bottom: 20px; font-kerning: normal; font-feature-settings: "kern" 1; }
.page-placeholder .page-intro { font-family: var(--font-body); color: var(--text-dim); line-height: 1.45; max-width: 736px; margin-bottom: 32px; font-size: 20px; }
.page-placeholder .page-intro-lead { font-family: 'NYSMH-TradeGothicLTPro-Bold', var(--font-headline); font-size: 23px; line-height: 1.42; max-width: 83ch; margin-bottom: 32px; color: var(--text-dim); text-transform: uppercase; font-kerning: normal; font-feature-settings: "kern" 1; }
.page-placeholder > .page-intro-lead:has(+ .content-section) { margin-bottom: 20px; }
.page-placeholder > .page-intro-lead + .content-section { padding-top: 8px; }
/* Projects tagline under “About”: uses .content-overview-lead (not .page-intro-lead) so base/mobile .page-intro-lead rules cannot override. */
.projects-page-tagline { margin-bottom: 20px; }
.page-placeholder > .projects-page-tagline + .content-section { padding-top: 8px; }
.page-placeholder--careers > .page-intro-lead { margin-bottom: 28px; }
.page-placeholder--careers > .page-intro-lead:has(+ .content-section) { margin-bottom: 40px !important; }
.page-placeholder--careers > .page-intro-lead + .content-section { padding-top: 0; }
@media (min-width: 769px) {
.page-placeholder.page-placeholder--employment-apply > .page-intro-lead {
margin-bottom: 14px;
}
.page-placeholder.page-placeholder--employment-apply > .page-intro-lead + .content-section {
padding-top: 18px;
}
}
.page-intro-lead--vessel .vessel-intro__line { display: block; text-align: center; }
.page-intro-lead--vessel .vessel-intro__line + .vessel-intro__line { margin-top: 0.35em; }
.page-intro-lead--vessel { margin-inline: auto; }
/* SERVICE PAGE — no Services label, centered intro, overview with image */
.service-page .section-label:first-child { display: none; }
.service-page.page-placeholder { padding-top: 0; padding-bottom: 16px; }
.service-page .content-section:last-child { padding-bottom: 16px; }
section.service-page + section { padding-top: 16px; }
/* Text + image rows: favor copy column slightly over strict 50/50 */
.service-page .content-section .two-col { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
.service-intro { width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-top: -1px; padding: 36px 55px 32px; text-align: center; background-color: #002856; background-image: linear-gradient(180deg, rgba(0, 40, 86, 0.92) 0%, rgba(0, 32, 72, 0.88) 40%, rgba(0, 26, 58, 0.9) 100%), url('../assets/hudson-river-waves.png'); background-size: cover; background-position: center; background-repeat: no-repeat; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.service-intro-icon { flex-shrink: 0; display: block; line-height: 0; align-self: center; }
.service-intro-icon img { width: 120px; height: 120px; object-fit: contain; display: block; }
/* Service intro icon: subtle left-to-right drift and fade on page load */
.service-page .service-intro-icon {
--service-icon-drift-duration: 1.25s;
--service-intro-icon-from-x: -25px;
--service-intro-icon-from-y: 0px;
transform: translate(var(--service-intro-icon-from-x), var(--service-intro-icon-from-y));
animation: serviceIntroIconDriftIn var(--service-icon-drift-duration) ease-out forwards;
will-change: transform;
}
/* Service cards on service pages: use same timing for icon drift */
.service-page .service-icon {
transform: translateX(-25px);
animation: serviceIntroIconDriftIn var(--service-icon-drift-duration, 1.25s) ease-out forwards;
will-change: transform;
}
/* Keep default left -> right drift for these service pages */
.service-page .service-intro-icon:has(> img[src*="icon-bulk-cargo"]) {
--service-intro-icon-from-x: -25px;
--service-intro-icon-from-y: 0px;
}
.service-page .service-intro-icon:has(> img[src*="icon-general-towing"]) {
--service-intro-icon-from-x: -25px;
--service-intro-icon-from-y: 0px;
}
.service-page .service-intro-icon:has(> img[src*="icon-project-cargo"]) {
--service-intro-icon-from-x: -25px;
--service-intro-icon-from-y: 0px;
}
/* Ship Assist: bottom -> top */
.service-page .service-intro-icon:has(> img[src*="icon-ship-assist"]) {
--service-intro-icon-from-x: 0px;
--service-intro-icon-from-y: 25px;
}
/* Mooring Service: top -> bottom */
.service-page .service-intro-icon:has(> img[src*="icon-mooring-service"]) {
--service-intro-icon-from-x: 0px;
--service-intro-icon-from-y: -25px;
}
@keyframes serviceIntroIconDriftIn {
from {
transform: translate(var(--service-intro-icon-from-x), var(--service-intro-icon-from-y));
}
to {
transform: translate(0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.service-page .service-intro-icon {
transform: none;
animation: none;
}
.service-page .service-icon {
transform: none;
animation: none;
}
}
/* First sentence: Gotham Bold all-caps; remainder: Trade Gothic body */
.service-intro .page-intro-lead { font-family: var(--font-body); font-size: clamp(17px, 1.65vw, 20px); font-weight: 400; line-height: 1.65; max-width: 56rem; margin: 0; color: rgba(255,255,255,0.92); text-transform: none; letter-spacing: 0.02em; text-align: center; font-kerning: normal; font-feature-settings: "kern" 1; }
.service-intro .page-intro-lead__head { display: block; font-family: 'NYSMH-TradeGothicLTPro-Bold', var(--font-headline); font-weight: 700; font-size: clamp(calc(18px + 0.25rem), calc(2.65vw + 0.25rem), calc(26px + 0.25rem)); line-height: calc(1.22em + 5px); letter-spacing: 0.050em; text-transform: uppercase; color: #b8b8b8; margin: 0 auto 1.35rem; max-width: 48ch; font-kerning: normal; font-feature-settings: "kern" 1; }
.service-intro .page-intro-lead__head:has(+ .page-intro-lead__rest) { margin-bottom: 0.55rem; }
.service-intro .page-intro-lead__rest { display: block; margin: 0 auto; max-width: 65ch; padding-bottom: 1.25rem; font-size: 20px; }
/* Bulk Cargo: icon center on hero / blue seam; no top padding; tight gap to intro copy */
.service-intro.service-intro--overlap-hero { padding: 0 55px 22px; gap: 8px; position: relative; z-index: 1; overflow: visible; }
.service-intro.service-intro--overlap-hero::before {
content: '';
position: absolute;
left: 50%;
width: 100vw;
margin-left: -50vw;
top: 0;
transform: translateY(-50%);
height: 4px;
background: #b8b8b8;
z-index: 1;
pointer-events: none;
}
/* Full-bleed gray line at bottom of blue intro band (same bar as top seam) */
.service-intro.service-intro--overlap-hero::after {
content: '';
position: absolute;
left: 50%;
width: 100vw;
margin-left: -50vw;
bottom: 0;
height: 4px;
background: #b8b8b8;
z-index: 1;
pointer-events: none;
}
.service-intro.service-intro--overlap-hero .service-intro-icon { margin-top: -60px; position: relative; z-index: 2; }
.service-intro.service-intro--overlap-hero .service-intro-icon img { width: 120px; height: 120px; }
.service-intro.service-intro--overlap-hero .page-intro-lead { margin-top: 0; }
.content-section--overview .two-col { gap: 48px; align-items: start; }
.content-section--overview .two-col .content-body { max-width: none; }
.content-section .overview-image { width: 100%; }
.content-section .overview-image img { width: 100%; height: auto; display: block; object-fit: cover; }
.content-overview-lead { font-family: 'NYSMH-TradeGothic', 'Trade Gothic LT Std', var(--font-body); font-weight: 400; font-size: 20px; line-height: calc(1.65em - 4px); font-kerning: normal; font-feature-settings: "kern" 1; color: var(--accent); max-width: 83ch; margin: 0; }
.content-overview-lead + .content-overview-lead { margin-top: 1.25em; }
/* Overview block (lead paragraph) followed by a major section head — e.g. Mooring Service */
.content-overview-lead + .content-heading-lg,
.content-overview-lead + .content-heading { margin-top: 2.5em; }
.content-overview-lead strong { color: inherit; }
.content-section { padding: 27px 0; border-bottom: none; position: relative; }
.content-section::after { display: none; }
.content-section:last-child::after { display: none; }
.content-section--quote-details::after { display: none; }
.content-section--quote-form { padding-top: 24px; }
.content-section.content-section--quote-form > .quote-form-layout:first-child { margin-top: -50px; }
.content-section--quote-form .form-placeholder { margin-top: 12px; }
.content-section--cta { display: flex; justify-content: center; align-items: center; min-height: 100px; }
.content-heading,
.content-heading-lg,
.content-body > .content-inset-h2 {
font-family: var(--font-headline);
font-size: 23px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.02em;
text-transform: uppercase;
text-wrap: pretty;
line-height: 1.2;
display: block;
background: none;
border-radius: 0;
padding: 0 0.7em 0.35em;
margin: 1.25em 0 0.65em;
margin-left: -0.7em;
margin-right: -0.7em;
border-bottom: 3px solid var(--card-stroke);
font-kerning: normal;
font-feature-settings: "kern" 1;
}
/* Navy subheads within prose (e.g. service page location labels) */
.content-subhead { font-family: var(--font-headline); font-size: clamp(17px, 1.45vw, 19px); font-weight: 700; letter-spacing: 0.02em; line-height: 1.25; margin: 1.25em 0 0.5em; color: #1c1f26; font-kerning: normal; font-feature-settings: "kern" 1; }
.content-body > .content-subhead:first-child { margin-top: 0; }
.content-body > .content-heading-lg:first-child { margin-top: 0; }
.content-body > .content-heading:first-child { margin-top: 0; }
/* Split layouts: keep H2 in the prose column with body copy — avoid extra gap above the grid */
.content-section > .two-col:first-child { margin-top: 0; }
.content-section--how-we-do-it > .how-we-do-it-layout:first-child { margin-top: 0; }
.content-section > .quote-form-layout:first-child { margin-top: 0; }
.content-section > .form-placeholder:first-child { margin-top: 0; }
.form-placeholder > .content-heading-lg:first-child { margin-top: 0; }
/* Lists use reset margins; extra space before a prose subhead avoids crowding the last bullet */
.content-body ul + .content-subhead,
.content-body ol + .content-subhead { margin-top: 2em; }
.content-body > .content-inset-h2:first-child { margin-top: 0; }
.content-body {
font-family: var(--font-body);
color: #1c1f26;
line-height: 1.8;
font-size: 17px;
max-width: 72ch;
}
/* Bold Condensed (same webfont as H1–H3) — avoids synthesis on Book + failed “Trade Gothic Bold” file */
.page-placeholder .page-intro strong,
.page-placeholder .page-intro b,
.service-intro .page-intro-lead strong,
.service-intro .page-intro-lead b,
.service-intro .page-intro-lead__rest strong,
.service-intro .page-intro-lead__rest b,
.content-body strong,
.content-body b,
.modal-body strong,
.modal-body b,
.dispatch-modal-body strong,
.dispatch-modal-body b,
.about-body strong,
.about-body b,
.hero-sub strong,
.hero-sub b,
.news-excerpt strong,
.news-excerpt b,
.content-card .card-text strong,
.content-card .card-text b,
.gallery-intro strong,
.gallery-intro b,
.service-desc strong,
.service-desc b,
.file-drop-text strong,
.cta-body strong,
.cta-body b {
font-family: var(--font-headline);
font-weight: 700;
letter-spacing: 0.02em;
font-kerning: normal;
font-feature-settings: "kern" 1;
}
.page-placeholder .page-intro-lead strong,
.page-placeholder .page-intro-lead b {
font-family: var(--font-headline);
font-weight: 700;
}
.content-body p { margin-bottom: 1em; }
.content-body p:not(.content-overview-lead) { line-height: calc(1.8em - 4px); }
/* Lead-in sentence + list (e.g. “…transportation:”) — avoid a full paragraph break before bullets */
.content-body .content-run-in > p { margin-bottom: 0.2em; }
.content-body .content-run-in > .list-plain { margin-top: 0; margin-bottom: 1em; }
/* Mooring Service — two-column locations; PDF actions under each column */
.service-page .content-section--mooring-locations .mooring-locations-two-col {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: start;
margin-top: 0;
}
.service-page .mooring-location-image {
width: 100%;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.service-page .mooring-location-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.service-page .mooring-location-actions {
margin-top: 1.25rem;
margin-bottom: 0.25rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.service-page .mooring-location-actions .btn {
margin-bottom: 0.5rem;
}
.img-placeholder { aspect-ratio: 16/10; background: rgba(0,40,86,0.05); border: var(--card-stroke-width) solid var(--card-stroke); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; }
.img-placeholder.square { aspect-ratio: 1; }
/* Locations — contact grid */
.locations-contact-section > .content-heading:first-child { margin-top: 0; }
.locations-contact-grid { align-items: stretch; }
.locations-contact-card .card-title { margin-bottom: 2px; }
.locations-contact-card .card-text p { margin: 0 0 0.35em; }
.locations-contact-card .card-text p:last-child { margin-bottom: 0; }
.locations-contact-card .locations-company {
color: #8a909b;
font-family: var(--font-body);
font-weight: 400;
letter-spacing: 0;
line-height: 1.17;
}
/* Static panels — not links; suppress global .content-card hover affordance */
.locations-contact-grid .locations-contact-card {
transition: none;
}
.locations-contact-grid .locations-contact-card:hover {
background: #fff;
}
/* Sitewide framed photos (exclude galleries/media popups/decorative UI images) */
main img {
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
background: linear-gradient(165deg, var(--accent-faint) 0%, #fff 42%);
}
/* History page images use the same framed treatment as other content images. */
.gallery-page .gallery-img-wrap img,
.gallery-section .gallery-item img,
.media-gallery-grid img,
.content-card .card-img > img,
.content-card img,
.fleet-grid img,
.fleet-img img,
.media-popup-img,
.media-popup-photo-wrap img,
.page-hero-bg img,
.service-icon img,
.service-intro-icon img,
.nav-logo-img,
.footer-logo-img,
.footer-social-icon,
.about-callout-swoosh,
.history-callout-swoosh,
.cta-band-swoosh,
.footer-award-logo,
.dispatch-modal-img {
border-radius: 0;
border: 0;
box-shadow: none;
background: transparent;
}
.card-grid { display: grid; gap: 24px; margin-top: 20px; }
.card-grid.col-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid > .content-card { min-width: 0; }
/* Photo gallery page — tagged images, masonry (3 columns), tag selector */
.gallery-page.reveal { opacity: 1; transform: none; }
.gallery-page .page-intro { margin-bottom: 16px; }
.gallery-page-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 16px;
}
.gallery-page-intro > .page-intro-lead {
margin-bottom: 0;
}
.gallery-tag-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 0; }
.gallery-filter-left { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gallery-selector-label { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin: 0; }
.gallery-selector-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gallery-sort { margin-left: auto; }
.gallery-sort-btn { appearance: none; display: flex; align-items: center; gap: 6px; background: var(--bg); border: var(--card-stroke-width) solid var(--card-stroke); color: var(--text-dim); font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.gallery-sort-btn:hover { color: var(--text); border-color: var(--border-bright); }
.gallery-sort-arrow { font-size: 10px; transition: transform 0.2s; }
.gallery-sort-btn[data-order="asc"] .gallery-sort-arrow { transform: rotate(180deg); }
/* Gallery tags mirror hero-tag: navy bg, white text, white stroke — keep size same */
.gallery-selector-tag { appearance: none; background: rgba(0,40,86,0.15); border: 1px solid rgba(0,40,86,0.35); color: var(--accent); font-family: var(--font-eyebrow); font-size: 14px; font-weight: 400; letter-spacing: 0.225em; text-transform: uppercase; padding: 5px 12px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.gallery-selector-tag:hover { color: var(--text-bright); border-color: rgba(0,40,86,0.5); background: rgba(0,40,86,0.25); }
.gallery-selector-tag.active { background: #002856; border-color: #002856; color: #fff; }
.gallery-masonry { column-count: 3; column-gap: 12px; margin-top: 0; }
.gallery-item { break-inside: avoid; margin-bottom: 12px; }
.gallery-item.hidden { display: none; }
.gallery-img-wrap { position: relative; width: 100%; display: block; aspect-ratio: 4/3; overflow: hidden; }
.gallery-page .gallery-img-wrap:has(.gallery-img.tall) { aspect-ratio: 3/4; }
.gallery-page .gallery-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.gallery-page .gallery-img { aspect-ratio: 4/3; min-height: 120px; background: rgba(0,40,86,0.05); border: 1px solid #ebebeb; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; width: 100%; }
.gallery-page .gallery-img.tall { aspect-ratio: 3/4; }
.gallery-page .gallery-tags { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: rgba(0,0,0,0.45); }
.gallery-page .gallery-tag { font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: 0.225em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,0.5); padding: 4px 4px; background: #002856; }
.gallery-item.media-gallery-item { cursor: pointer; }
.content-card {
background: #fff;
border: var(--card-stroke-width) solid var(--card-stroke);
overflow: hidden;
transition: background 0.15s;
display: flex;
flex-direction: column;
height: 100%;
}
.content-card:hover { background: #ebebeb; }
.content-card .card-img { flex-shrink: 0; aspect-ratio: 16/10; }
.content-card .card-img:has(> img) { position: relative; overflow: hidden; }
.content-card .card-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.content-card .card-body {
padding: 18px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.content-card .card-date {
font-family: var(--font-headline);
font-size: 9px;
font-weight: 700;
color: var(--blue);
margin-bottom: 4px;
letter-spacing: 0.06em;
}
.content-card .card-title { font-family: var(--font-headline); font-size: 16px; font-weight: 700; color: var(--text-bright); letter-spacing: 0.04em; margin-bottom: 8px; font-kerning: normal; font-feature-settings: "kern" 1; }
.content-card .card-text {
font-family: var(--font-body);
font-size: 15px;
color: var(--text-dim);
line-height: 1.6;
flex: 1 1 auto;
}
.content-card .service-link {
margin-top: auto;
align-self: flex-start;
flex-shrink: 0;
}
.content-card:hover .service-link { color: var(--text-bright); }
.content-card.content-card--link {
text-decoration: none;
color: inherit;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s, background 0.15s;
}
.content-card.content-card--link:hover {
border-color: var(--card-stroke);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.content-card.content-card--link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 24px; }
.two-col .content-body { max-width: none; }
/* Grid + prose on one element (fleet Horsepower / Safety); descendant rule above does not match self */
.content-body.two-col { max-width: none; }
/* Tug Fleet — Fleet Capabilities + Vessels (2 columns from tablet up) */
.fleet-capabilities-vessels-grid {
display: grid;
gap: 32px;
align-items: start;
}
/* Let each track use the full half-width (minmax(0,1fr) + min-width:0 avoids premature wrapping) */
.fleet-capabilities-vessels-col {
min-width: 0;
}
.fleet-capabilities-vessels-section .content-body {
max-width: none;
width: 100%;
min-width: 0;
}
.fleet-capabilities-vessels-section .content-body p {
max-width: none;
text-wrap: pretty;
}
.fleet-col-lead {
margin: 0.85em 0 0;
font-family: var(--font-headline);
font-weight: 700;
letter-spacing: 0.02em;
font-kerning: normal;
font-feature-settings: "kern" 1;
color: var(--text-bright);
}
.fleet-capabilities-vessels-section .content-body p.fleet-col-lead {
margin-bottom: 0.2em;
}
.fleet-capabilities-vessels-section .content-body p.fleet-col-lead + .list-plain {
margin-top: 0;
}
/* Same treatment as .fleet-col-lead — sentence before a list inside .content-run-in */
.content-body .content-run-in > p:has(+ :is(ul, ol)) {
font-family: var(--font-headline);
font-weight: 700;
letter-spacing: 0.02em;
font-kerning: normal;
font-feature-settings: "kern" 1;
color: var(--text-bright);
}
.fleet-capabilities-vessels-section .fleet-versatility-callout {
margin-top: 2rem;
margin-left: auto;
margin-right: auto;
max-width: 36rem;
width: 100%;
text-align: center;
box-sizing: border-box;
padding: 1.2rem;
border: 3px solid #b8b8b8;
}
.fleet-capabilities-vessels-section .fleet-versatility-callout__text {
position: relative;
z-index: 1;
margin: 0;
color: #fff;
font-family: 'Gotham Bold', 'Gotham', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700;
font-size: clamp(19px, 1.1vw + 0.95rem, 24px);
line-height: calc(1.3em + 3px);
font-kerning: normal;
font-feature-settings: "kern" 1;
}
.fleet-capabilities-vessels-section .list-plain li:not(:has(a)) {
hyphens: none;
-webkit-hyphens: none;
/* Prefer line breaks that fill the measure (fewer “short first lines” with empty margin) */
text-wrap: pretty;
}
@media (min-width: 769px) {
.fleet-capabilities-vessels-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 40px 48px;
}
}
/* Project Cargo — How We Do It: copy + 3-image mosaic; thumbs open lightbox */
.content-section--how-we-do-it .how-we-do-it-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 1.15fr);
gap: 40px 48px;
align-items: start;
margin-top: 24px;
}
.content-section--how-we-do-it .how-we-do-it-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 0;
}
.content-section--how-we-do-it .how-do-it-thumb {
display: block;
width: 100%;
padding: 0;
margin: 0;
border: none;
border-radius: 12px;
cursor: default;
overflow: hidden;
background: transparent;
font: inherit;
text-align: left;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}
.content-section--how-we-do-it .how-do-it-thumb:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.content-section--how-we-do-it .how-do-it-thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
aspect-ratio: 4 / 3;
border-radius: inherit;
}
.content-section--how-we-do-it .how-do-it-thumb--feature {
grid-column: 1 / -1;
}
.content-section--how-we-do-it .how-do-it-thumb--feature img {
aspect-ratio: 16 / 10;
max-height: min(340px, 42vw);
}
@media (max-width: 480px) {
.content-section--how-we-do-it .how-we-do-it-gallery {
grid-template-columns: 1fr;
}
.content-section--how-we-do-it .how-do-it-thumb--feature {
grid-column: 1;
}
.content-section--how-we-do-it .how-do-it-thumb--feature img {
max-height: 220px;
}
}
/* Project Cargo — Key Capabilities: copy + photo (lightbox, matches How We Do It thumb treatment) */
.content-section--key-capabilities .two-col {
gap: 48px;
align-items: start;
margin-top: 8px;
}
.content-section--key-capabilities .key-capabilities-photo {
display: block;
width: 100%;
padding: 0;
margin: 0;
border: none;
border-radius: 12px;
cursor: default;
overflow: hidden;
background: transparent;
font: inherit;
text-align: left;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}
.content-section--key-capabilities .key-capabilities-photo:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.content-section--key-capabilities .key-capabilities-photo img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: inherit;
}
/* ARTICLE / VESSEL PAGE LAYOUT — main content + archive sidebar (like news) */
.article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: start; }
.article-layout--no-sidebar { grid-template-columns: 1fr; }
.article-main { max-width: 72ch; }
.article-main.vessel-page-spec { max-width: none; }
.article-archive { position: sticky; top: calc(29px + 80px); border: var(--card-stroke-width) solid var(--card-stroke); padding: 20px; background: var(--bg2); }
.article-archive .content-heading,
.article-archive .content-heading-lg { margin-bottom: 8px; }
.article-archive-intro { font-size: 12px; color: var(--text-dim); letter-spacing: 0.1em; margin-bottom: 16px; }
.article-archive-list { list-style: none; }
.article-archive-item { padding: 12px 0; border-bottom: var(--card-stroke-width) solid var(--card-stroke); }
.article-archive-item:last-child { border-bottom: none; }
.article-archive-item a { text-decoration: none; display: block; }
.article-archive-item a:hover .archive-title { color: var(--accent); }
.article-archive-item.current { opacity: 0.85; }
.article-archive-viewall { border-top: var(--card-stroke-width) solid var(--card-stroke); margin-top: 4px; padding-top: 12px !important; }
.article-archive-viewall a { font-size: 13px; color: var(--accent) !important; letter-spacing: 0.12em; }
.article-archive-viewall a:hover { color: var(--text-bright) !important; }
.archive-title { display: block; font-size: 14px; color: var(--text); line-height: 1.4; }
.archive-meta { display: block; font-size: 12px; color: var(--text-dim); margin-top: 4px; letter-spacing: 0.06em; }
/* Tug Fleet vessel list — matches fleet card name treatment */
.article-archive--fleet { background: #002856; border-color: rgba(255, 255, 255, 0.28); }
/* Navy-band section title — strip .content-heading pill; gold, centered, even vertical rhythm */
.article-archive--fleet .content-heading,
.article-archive--fleet .content-heading-lg {
background: transparent !important;
border-radius: 0 !important;
border-bottom: 0 !important;
padding: 0 !important;
margin: 1.25rem 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: block;
color: #e1ab00;
text-align: center;
box-shadow: none !important;
}
.article-archive--fleet .article-archive-intro {
color: rgba(255, 255, 255, 0.88);
background: transparent;
}
/* Full-width fleet page: vessel names in 3 columns (sidebar stays single column) */
.fleet-page .article-archive--fleet .article-archive-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 20px;
row-gap: 0;
}
.fleet-page .article-archive--fleet .article-archive-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 12px 0;
}
.fleet-page .article-archive--fleet .article-archive-item:nth-last-child(-n + 3) {
border-bottom-color: transparent;
}
@media (max-width: 768px) {
.fleet-page .article-archive--fleet .article-archive-list {
grid-template-columns: 1fr;
}
.fleet-page .article-archive--fleet .article-archive-item:nth-last-child(-n + 3) {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.fleet-page .article-archive--fleet .article-archive-item:last-child {
border-bottom-color: transparent;
}
}
.article-archive--fleet .article-archive-item { border-bottom-color: rgba(255, 255, 255, 0.22); }
.article-archive--fleet .article-archive-static { display: block; cursor: default; }
.article-archive--fleet .article-archive-item a:hover .archive-title { color: #e1ab00; }
.article-archive--fleet .article-archive-item.current { opacity: 1; }
.article-archive--fleet .article-archive-item.current .archive-title { color: #fff; }
.article-archive--fleet .archive-title {
font-family: var(--font-headline);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
line-height: 1.4;
}
.article-archive--fleet .archive-meta {
color: rgba(255, 255, 255, 0.78);
font-family: var(--font-eyebrow);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.article-archive--fleet .article-archive-viewall { border-top-color: rgba(255, 255, 255, 0.28); }
.article-archive--fleet .article-archive-viewall a { color: #fff !important; }
.article-archive--fleet .article-archive-viewall a:hover { color: #e1ab00 !important; }
/* Locations — Service areas & ports: fleet archive look, full width, 3 columns (not a sidebar) */
.locations-service-areas.article-archive--fleet {
position: static;
top: auto;
max-width: none;
width: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 28px;
}
.content-section--locations-hq::after {
display: none;
}
.content-section--locations-hq {
padding-top: 8px;
padding-bottom: 6px;
}
.content-section--locations-hq .content-body p {
margin-bottom: 0;
}
.locations-intro-lead {
margin-top: 10px;
margin-bottom: 28px;
}
.page-placeholder .locations-intro-wrap > p {
margin: 0 0 0.65em;
}
.page-placeholder .locations-intro-wrap > p:last-child {
margin-bottom: 0;
}
.page-placeholder > .locations-intro-wrap:has(+ .content-section) {
margin-bottom: 12px;
}
.page-placeholder > .locations-intro-wrap + .content-section {
padding-top: 8px;
}
.page-placeholder .locations-intro-body {
font-family: var(--font-body);
font-size: 20px;
line-height: 1.45;
max-width: 736px;
color: var(--text-dim);
text-transform: none;
letter-spacing: normal;
font-weight: 400;
font-kerning: normal;
font-feature-settings: "kern" 1;
}
.content-section--locations-service-areas {
padding-top: 20px;
margin-top: 0;
}
/* Column-major: 5 + 5 + 3 items (same source order: col1, then col2, then col3) */
.locations-service-areas.article-archive--fleet .article-archive-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(5, auto);
grid-auto-flow: column;
column-gap: 20px;
row-gap: 0;
}
.locations-service-areas.article-archive--fleet .article-archive-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 12px 0;
}
.locations-service-areas.article-archive--fleet .article-archive-item:nth-child(5),
.locations-service-areas.article-archive--fleet .article-archive-item:nth-child(10),
.locations-service-areas.article-archive--fleet .article-archive-item:nth-child(13) {
border-bottom-color: transparent;
}
@media (max-width: 768px) {
.locations-service-areas.article-archive--fleet .article-archive-list {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-flow: row;
}
.locations-service-areas.article-archive--fleet .article-archive-item:nth-child(5),
.locations-service-areas.article-archive--fleet .article-archive-item:nth-child(10),
.locations-service-areas.article-archive--fleet .article-archive-item:nth-child(13) {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.locations-service-areas.article-archive--fleet .article-archive-item:last-child {
border-bottom-color: transparent;
}
}
.vessel-page-title { font-family: var(--font-headline); font-size: clamp(28px, 3.5vw, 38px); font-weight: 700; color: var(--text-bright); letter-spacing: 0.02em; margin-bottom: 24px; font-kerning: normal; font-feature-settings: "kern" 1; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.spec-table th, .spec-table td { padding: 12px 16px; border-bottom: var(--card-stroke-width) solid var(--card-stroke); text-align: left; }
.spec-table th { color: var(--text-dim); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; width: 40%; }
.spec-table td { color: var(--text-bright); }
.spec-table--vessel-full { font-size: 14px; }
.spec-table--vessel-full th,
.spec-table--vessel-full td {
padding: 0;
vertical-align: middle;
height: 1px;
}
.spec-table--vessel-full th .spec-table__cell,
.spec-table--vessel-full td .spec-table__cell {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
width: 100%;
box-sizing: border-box;
min-height: 100%;
min-width: 0;
line-height: 21px;
font-size: 14px;
}
.spec-table--vessel-full th .spec-table__cell {
padding: 11px 6px 11px 14px;
}
.spec-table--vessel-full td .spec-table__cell {
padding: 11px 14px 11px 6px;
word-break: break-word;
}
.spec-table--vessel-full tr th,
.spec-table--vessel-full tr td {
transition: background-color 0.18s ease;
}
.spec-table--vessel-full tr:hover th,
.spec-table--vessel-full tr:hover td,
.spec-table--vessel-full tr:focus-within th,
.spec-table--vessel-full tr:focus-within td {
background-color: rgba(0, 40, 86, 0.08);
}
.vessel-page-spec--split-hero .spec-table--vessel-full {
table-layout: fixed;
}
.vessel-page-spec--split-hero .spec-table--vessel-full th,
.vessel-page-spec--split-hero .spec-table--vessel-full td {
width: 50%;
}
@media (max-width: 768px) {
.article-layout { grid-template-columns: 1fr; }
.article-archive { position: static; }
}
/* HISTORY TIMELINE — background grid (no rings) */
.history-timeline {
position: relative;
margin-top: 48px;
padding: 24px 0 48px;
overflow: hidden;
}
.content-section > .content-heading + .history-timeline { margin-top: 12px; }
.content-section > .content-heading + .card-grid { margin-top: 8px; }
.timeline-stadia {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.25;
}
.stadia-grid {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: calc(-1 * min(22vh, 180px));
background-image:
linear-gradient(90deg, var(--border) 1px, transparent 1px),
linear-gradient(0deg, var(--border) 1px, transparent 1px);
background-size: 60px 80px;
background-position: center top;
/* Taller soft fade so grid reads further above the first row */
mask-image: radial-gradient(ellipse 85% 72% at 50% 42%, black 18%, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse 85% 72% at 50% 42%, black 18%, transparent 72%);
}
.timeline-spine {
position: absolute;
left: 50%;
top: calc(-1 * min(22vh, 180px));
bottom: 0;
width: 2px;
transform: translateX(-50%);
background: linear-gradient(180deg, transparent, var(--accent) 5%, var(--accent) 95%, transparent);
box-shadow: 0 0 12px rgba(0, 40, 86, 0.25);
}
.timeline-items {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0;
}
.timeline-item {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto;
gap: 0;
align-items: start;
min-height: 180px;
padding: 24px 0;
/* Space so copy/images do not sit under the date chip */
--timeline-spine-x: 50%;
--timeline-date-gap: 11px;
--timeline-content-inset: clamp(76px, 14vw, 124px);
}
/* Date left of spine → media on the right; date right of spine → media on the left */
.timeline-item:nth-child(odd) .timeline-content {
grid-column: 2;
grid-row: 1;
justify-self: start;
margin-left: var(--timeline-content-inset);
margin-right: 0;
}
.timeline-item:nth-child(even) .timeline-content {
grid-column: 1;
grid-row: 1;
justify-self: end;
margin-right: var(--timeline-content-inset);
margin-left: 0;
}
/* Diamond always centered on the vertical spine */
.timeline-dot {
position: absolute;
left: var(--timeline-spine-x);
top: 26px;
transform: translateX(-50%);
z-index: 3;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent);
border: 3px solid var(--bg2);
box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(0, 40, 86, 0.25);
flex-shrink: 0;
pointer-events: none;
}
/* Odd: date left of spine · media in right column */
.timeline-item:nth-child(odd) .timeline-date {
position: absolute;
left: var(--timeline-spine-x);
top: 23px;
z-index: 2;
transform: translateX(calc(-100% - var(--timeline-date-gap)));
}
/* Even: date right of spine · media in left column */
.timeline-item:nth-child(even) .timeline-date {
position: absolute;
left: var(--timeline-spine-x);
top: 23px;
z-index: 2;
transform: translateX(var(--timeline-date-gap));
}
.timeline-date {
display: inline-block;
margin: 0;
font-family: var(--font-eyebrow);
font-size: 12px;
font-weight: 400;
font-style: normal;
color: var(--accent);
letter-spacing: 0.2em;
padding: 4px 9px;
border: var(--card-stroke-width) solid var(--card-stroke);
background: var(--bg2);
white-space: nowrap;
}
.timeline-content {
max-width: 400px;
width: 100%;
display: grid;
grid-template-rows: auto auto 1fr;
row-gap: 10px;
align-content: start;
justify-items: stretch;
text-align: center;
}
.timeline-img {
position: relative;
grid-row: 1;
aspect-ratio: 16/10;
width: 100%;
margin: 0;
border: var(--card-stroke-width) solid var(--card-stroke);
box-shadow: inset 0 0 0 1px rgba(0, 40, 86, 0.1);
}
.timeline-img::after {
content: '';
position: absolute;
bottom: 4px;
right: 4px;
width: 20px;
height: 2px;
background: var(--card-stroke);
opacity: 0.6;
}
.timeline-caption {
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.15em;
text-transform: uppercase;
line-height: 1.5;
}
.timeline-img--blank {
background: var(--bg2);
box-shadow: inset 0 0 0 var(--card-stroke-width) var(--card-stroke);
}
.timeline-img--blank::after {
display: none;
}
.timeline-img--photo {
overflow: hidden;
padding: 0;
}
.timeline-img--photo::after {
display: none;
}
.timeline-img--photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 42%;
display: block;
pointer-events: none;
}
button.timeline-img {
appearance: none;
font: inherit;
color: inherit;
display: block;
cursor: zoom-in;
text-align: center;
box-sizing: border-box;
}
button.timeline-img:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
button.timeline-img:hover {
border-color: var(--border-bright);
}
.timeline-callout-headline {
grid-row: 2;
font-family: var(--font-headline);
font-size: 15px;
font-weight: 700;
color: var(--text-bright);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.35;
margin: 0;
}
.timeline-callout-body {
grid-row: 3;
font-size: 14px;
line-height: 1.55;
color: var(--text-dim);
letter-spacing: 0.02em;
text-transform: none;
margin: 0;
}
@media (max-width: 768px) {
.history-timeline { padding-left: 0; padding-right: 0; }
.timeline-spine { left: 20px; top: calc(-1 * min(14vh, 96px)); }
.timeline-item {
display: block;
--timeline-spine-x: 20px;
padding-top: 56px;
padding-left: 0;
}
.timeline-dot {
left: var(--timeline-spine-x);
transform: translateX(-50%);
top: 22px;
}
.timeline-item .timeline-content {
margin-right: 0;
margin-left: 0;
max-width: none;
width: 100%;
}
/* Date to the right of the diamond toward the copy (rail matches spine) */
.timeline-item .timeline-date {
left: var(--timeline-spine-x);
top: 19px;
transform: translateX(calc(var(--timeline-date-gap) + 9px));
}
.stadia-grid { opacity: 0.5; top: calc(-1 * min(14vh, 96px)); }
}
/* HISTORY TIMELINE — horizontal scroll-scene (pinned viewport + vertical scroll drives translateX) */
.content-section--history-timeline > .content-heading {
margin-bottom: 8px;
text-align: center;
}
.content-section--history-timeline {
padding-bottom: 0;
}
.content-section--history-timeline + .content-section {
padding-top: 8px;
}
.timeline-section-intro {
margin: 4px auto 16px;
max-width: 52rem;
font-size: 16px;
line-height: 1.55;
color: var(--text-dim);
text-align: center;
}
.history-timeline-pullquote {
margin: 0 0 20px;
padding: 16px 20px;
border-left: 3px solid var(--accent);
background: var(--bg2);
max-width: 44rem;
box-sizing: border-box;
}
.history-timeline-pullquote p {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--text-bright);
font-style: italic;
}
.content-section--history-timeline > .history-timeline-pullquote + .history-timeline-scrollgate {
margin-top: 0;
}
.history-timeline-scrollgate {
position: relative;
}
.history-timeline-pinned {
position: sticky;
top: calc(var(--proto-badge-h) + var(--nav-bar-h));
min-height: clamp(360px, 58vh, calc(100vh - (var(--proto-badge-h) + var(--nav-bar-h))));
min-height: clamp(360px, 58dvh, calc(100dvh - (var(--proto-badge-h) + var(--nav-bar-h))));
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
padding: 8px 0 0;
overflow: hidden;
}
.history-timeline-scroll-hint {
margin: 0 0 10px;
padding: 0 clamp(16px, 5vw, 72px);
font-family: var(--font-eyebrow);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-dim);
text-align: center;
}
.history-timeline-viewport {
width: 100%;
overflow: hidden;
box-sizing: border-box;
}
.history-timeline-track {
will-change: transform;
}
.history-timeline-scrollgate .history-timeline {
margin-top: 0;
padding: 8px 0 0;
width: max-content;
min-width: 100%;
box-sizing: border-box;
}
.history-timeline-scrollgate .timeline-spine {
display: none;
}
.history-timeline-scrollgate .timeline-items {
flex-direction: row;
align-items: stretch;
gap: clamp(20px, 3vw, 40px);
}
.history-timeline-scrollgate .timeline-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: min(420px, 86vw);
max-width: 420px;
flex-shrink: 0;
padding: 0 8px 0;
box-sizing: border-box;
min-height: 0;
}
.history-timeline-scrollgate .timeline-item .timeline-date {
position: static;
transform: none;
order: -1;
margin-bottom: 12px;
}
.history-timeline-scrollgate .timeline-item .timeline-dot {
position: static;
transform: none;
margin-top: 10px;
order: 1;
}
.history-timeline-scrollgate .timeline-item .timeline-content {
margin: 0 !important;
max-width: none;
width: 100%;
order: 0;
}
.history-timeline-scrollgate .timeline-stadia {
border-radius: 0;
}
.history-timeline-scrollgate .history-timeline-track {
padding: 0 clamp(16px, 5vw, 72px);
box-sizing: border-box;
}
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
.history-timeline-scrollgate {
height: auto !important;
}
.history-timeline-pinned {
position: static;
min-height: 0;
height: auto;
padding: 0;
overflow: visible;
}
.history-timeline-scroll-hint {
display: none;
}
.history-timeline-viewport {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: 8px;
}
.history-timeline-track {
transform: none !important;
}
.history-timeline-scrollgate .history-timeline {
width: max-content;
min-width: min(100%, max-content);
padding-bottom: 12px;
}
}
/* HISTORY TIMELINE — vertical stack (normal page scroll) */
.history-timeline.history-timeline--vertical {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 24px;
padding: 0 0 40px;
overflow: visible;
}
.history-timeline-vertical-item {
padding: 36px 0 44px;
border-top: 1px solid var(--card-stroke);
max-width: min(52rem, 100%);
margin-left: auto;
margin-right: auto;
text-align: center;
}
.history-timeline-vertical-item:first-child {
border-top: none;
padding-top: 4px;
}
.history-timeline-vertical-period {
margin: 0 0 18px;
font-family: var(--font-headline);
font-size: clamp(1.2rem, 2.2vw, 1.65rem);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-bright);
line-height: 1.25;
}
.history-timeline-vertical-period time {
font: inherit;
color: inherit;
}
.history-timeline.history-timeline--vertical .timeline-img--photo {
aspect-ratio: auto;
max-width: 640px;
width: 100%;
margin: 0 auto 20px;
border-width: 1px;
border-style: solid;
border-color: var(--card-stroke);
box-shadow: none;
background: transparent;
}
.history-timeline.history-timeline--vertical .timeline-img--photo img {
width: 100%;
height: auto;
object-fit: initial;
object-position: 50% 50%;
}
.history-timeline.history-timeline--vertical button.timeline-img {
cursor: zoom-in;
}
.history-timeline.history-timeline--vertical button.timeline-img:hover {
border-color: var(--card-stroke);
}
.history-timeline-vertical-body {
font-size: 16px;
line-height: 1.62;
color: var(--text-dim);
max-width: 44rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.history-timeline-vertical-body p {
margin: 0 0 14px;
}
.history-timeline-vertical-body p:last-child {
margin-bottom: 0;
}
.history-timeline-vertical-body strong {
color: var(--text-bright);
font-weight: 700;
}
.form-placeholder { border: var(--card-stroke-width) solid var(--card-stroke); background: #f7f8fa; padding: 40px; margin-top: 24px; }
.form-placeholder .form-row { margin-bottom: 16px; }
.form-placeholder .form-row.reveal-stagger-item { letter-spacing: 0.06em; }
.form-placeholder label { display: block; font-size: 15px; letter-spacing: 0; color: var(--text-dim); margin-bottom: 4px; }
.form-placeholder input, .form-placeholder textarea, .form-placeholder select { width: 100%; max-width: 400px; padding: 10px 12px; background: var(--bg2); border: var(--card-stroke-width) solid var(--card-stroke); color: #1c1f26; font-family: 'NYSMH-TradeGothicLTPro-Bold', var(--font-headline); font-size: 17px; letter-spacing: 0.03em; }
.form-placeholder input::placeholder,
.form-placeholder textarea::placeholder { color: #b8b8b8; font-family: 'NYSMH-TradeGothicLTPro-Bold', var(--font-headline); opacity: 1; letter-spacing: 0.03em; }
.form-placeholder input:focus,
.form-placeholder textarea:focus,
.form-placeholder select:focus {
outline: none;
border-color: #002856;
box-shadow: 0 0 0 3px rgba(0, 40, 86, 0.22);
}
.form-placeholder textarea { min-height: 120px; resize: vertical; }
.form-placeholder .btn { margin-top: 8px; }
.form-row--recaptcha { margin: 16px 0 8px; }
.form-recaptcha { min-height: 78px; }
.form-recaptcha-error { margin: 0.5rem 0 0; font-size: 0.875rem; color: #b42318; }
.form-recaptcha-error[hidden] { display: none !important; }
.quote-form-layout { display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; margin-top: 24px; justify-items: center; }
.quote-form-layout .form-placeholder { width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; background: #fff; text-align: center; --quote-field-width: min(700px, 100%); }
.quote-form-layout .form-placeholder .content-heading-lg { display: inline-block; text-align: center; margin-left: auto; margin-right: auto; }
.quote-form-layout .form-placeholder .form-row { width: var(--quote-field-width); margin-left: auto; margin-right: auto; text-align: left; }
.quote-form-layout .form-placeholder .form-row--quote-contact-lead { margin-top: 8px; margin-bottom: 4px; }
.quote-form-layout .form-placeholder .quote-form-contact-heading { margin: 0 0 4px; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text); }
.quote-form-layout .form-placeholder .quote-form-contact-sub { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.quote-form-layout .form-placeholder .form-row--quote-contact-lead .quote-form-contact-heading:only-child { margin-bottom: 12px; }
.quote-form-layout .form-placeholder .quote-form-dimension-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 16px;
margin-top: 4px;
text-align: left;
}
@media (min-width: 520px) {
.quote-form-layout .form-placeholder .quote-form-dimension-grid { grid-template-columns: repeat(4, 1fr); }
}
.quote-form-layout .form-placeholder .quote-form-dimension-grid label {
display: block;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 6px;
}
.quote-form-layout .form-placeholder .quote-form-dimension-grid input { width: 100%; }
.quote-form-layout .form-placeholder .quote-form-attachment-intro {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.55;
color: var(--text);
text-align: left;
}
.quote-form-layout .form-placeholder .form-row--quote-attachments .upload-section { margin-bottom: 0; }
.quote-form-layout .form-placeholder .quote-form-submit-note {
margin: 20px auto 0;
max-width: var(--quote-field-width);
font-size: 14px;
line-height: 1.45;
color: var(--text);
text-align: center;
cursor: default;
user-select: text;
}
.quote-form-layout .form-placeholder .quote-form-success {
display: none;
max-width: var(--quote-field-width);
margin: 24px auto 0;
padding: 24px 22px;
text-align: center;
font-size: 18px;
line-height: 1.5;
color: var(--text);
border: var(--card-stroke-width) solid var(--card-stroke);
background: rgba(0, 40, 86, 0.05);
outline: none;
}
.quote-form-layout .form-placeholder .quote-form-success:not([hidden]) {
display: block;
}
.quote-form-layout .form-placeholder .quote-form-success p {
margin: 0;
}
.quote-form-layout .form-placeholder input,
.quote-form-layout .form-placeholder textarea,
.quote-form-layout .form-placeholder select {
display: block ;
width: 100% ;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.quote-form-layout .form-placeholder .form-row--recaptcha { display: block; width: fit-content; margin: 16px auto 10px; }
.quote-form-layout .form-placeholder .btn.btn-primary { display: flex; width: fit-content; margin-left: auto; margin-right: auto; padding-top: 16px; padding-bottom: 16px; padding-left: 44px; padding-right: 44px; }
.quote-form-layout .form-placeholder input:focus,
.quote-form-layout .form-placeholder textarea:focus,
.quote-form-layout .form-placeholder select:focus { outline: none !important; box-shadow: inset 0 0 0 2px rgba(0, 40, 86, 0.22) !important; }
.quote-form-layout .form-placeholder select {
display: block;
-webkit-appearance: none;
appearance: none;
width: 100% !important;
max-width: 100% !important;
padding-right: 36px;
overflow: hidden;
text-overflow: ellipsis;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23002856' fill-opacity='0.6' d='M1.4 3.2h7.2L5 7.1z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px 10px;
}
.quote-form-layout .form-placeholder select:required:invalid { color: #b8b8b8; }
.quote-form-layout .form-placeholder select option { color: #1c1f26; }
/* Employment application — file uploads use same column width as quote form fields */
.quote-form-layout .form-placeholder .upload-section {
width: var(--quote-field-width);
margin-left: auto;
margin-right: auto;
text-align: left;
}
.quote-form-layout .form-placeholder .file-drop-zone {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* File drop zones — choose file + drag-and-drop */
.file-drop-zone { border: var(--card-stroke-width) dashed var(--card-stroke); background: rgba(0,40,86,0.04); padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; position: relative; }
.file-drop-zone:hover, .file-drop-zone.drag-over { border-color: var(--accent); background: rgba(0,40,86,0.08); }
.file-drop-zone.has-file { border-style: solid; border-color: var(--accent); background: rgba(0,40,86,0.06); }
.file-drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-drop-label { display: block; font-size: 14px; letter-spacing: 0; color: var(--text-dim); margin-bottom: 8px; text-align: left; }
.file-drop-label .required { color: var(--accent); }
.file-drop-label .optional { color: var(--text-dim); opacity: 0.8; }
.employment-app-step--1 {
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(184, 184, 184, 0.85);
}
.quote-form-layout .form-placeholder .employment-app-step--1 {
width: var(--quote-field-width);
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 28px;
padding: 20px;
box-sizing: border-box;
border: var(--card-stroke-width) solid var(--card-stroke);
background: #f7f8fa;
text-align: center;
}
.quote-form-layout .form-placeholder .employment-app-step--1 .employment-app-download-title {
display: block;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
text-align: center;
box-sizing: border-box;
background: transparent;
border-radius: 0;
padding: 0;
}
.employment-app-step--1 .employment-app-download-title { margin-bottom: 16px; }
.employment-app-download-row {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: 24px;
margin: 0 auto;
text-align: left;
}
.employment-app-download-aside {
flex: 0 0 auto;
width: min(220px, 34%);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.employment-app-download-caption {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--text-dim);
}
.quote-form-layout .form-placeholder .employment-app-step--1 .employment-app-download-btn {
margin-top: 0;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
justify-content: center;
box-sizing: border-box;
}
.quote-form-layout .form-placeholder .employment-app-download-row {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
justify-content: flex-start;
}
.quote-form-layout .form-placeholder .employment-app-pdf-preview-shell {
flex: 1 1 0;
min-width: 0;
width: auto;
max-width: none;
align-self: stretch;
}
.quote-form-layout .form-placeholder .employment-app-pdf-preview {
max-width: none;
width: 100%;
}
.employment-app-pdf-preview-shell {
flex: 0 0 auto;
min-width: 0;
width: min(325px, 100%);
max-width: 325px;
}
.employment-app-pdf-preview {
position: relative;
margin: 0;
width: 100%;
max-width: 325px;
border: var(--card-stroke-width) solid var(--card-stroke);
border-radius: 3px;
overflow: hidden;
background: #e8e8e8;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
height: 368px;
}
.employment-app-pdf-preview-hit {
position: absolute;
inset: 0;
z-index: 3;
cursor: pointer;
background: transparent;
text-decoration: none;
color: transparent;
}
.employment-app-pdf-preview-hit:focus-visible {
outline: 2px solid #002856;
outline-offset: 3px;
z-index: 5;
}
a.employment-app-pdf-preview-hit:link,
a.employment-app-pdf-preview-hit:visited,
a.employment-app-pdf-preview-hit:hover,
a.employment-app-pdf-preview-hit:active {
color: transparent;
}
.employment-app-pdf-preview-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 4;
font-family: var(--font-eyebrow);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 2px;
background: rgba(0, 40, 86, 0.92);
color: #fff;
pointer-events: none;
line-height: 1;
}
/* Single iframe preview (matches wireframe; avoids