/* ==========================================================================
   site-03-pages.css — vslSafety page pieces on top of the shared primitives.
   Home (statement, sentence quote form, stats line), entry rows, column lists,
   the quote aside, notes, articles, galleries, the quote form, lightbox.
   Loaded last, so these rules win ties with site-02-components.css.
   ========================================================================== */

/* ---------- Home: statement + sentence quote form ---------------------- */
.hero { padding-block: clamp(48px, 7vw, 120px) clamp(48px, 5vw, 80px); }
.statement { grid-column: 1 / span 9; font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }

/* "I need ___ in ___ → Get a quote" */
.ask { grid-column: 1 / -1; margin-block-start: clamp(40px, 5vw, 80px); display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 14px; row-gap: var(--s-4); font-size: var(--t-l); line-height: 1.2; font-weight: 500; letter-spacing: var(--track-head); }
.ask__word { color: var(--grey); padding-bottom: 10px; }
.ask__field { position: relative; display: flex; flex-direction: column; }
.ask__field--what { flex: 1 1 340px; }
.ask__field--where { flex: 0 1 330px; }
.ask__field select {
  width: 100%; min-height: 56px; padding: 0 32px 8px 0;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none; outline: none;
  color: var(--ink); font: inherit; font-weight: 500; letter-spacing: var(--track-head);
  appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis;
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) right 6px top 45% / 7px 7px no-repeat,
    linear-gradient(-45deg, transparent 50%, currentColor 50%) right 0 top 45% / 7px 7px no-repeat;
}
.ask__field select:invalid, .ask__field select.is-empty { color: var(--grey); }
.ask__field select option { font-size: var(--t-body); color: #1a1a1a; background: #fff; }
.ask__field select:focus-visible { outline: none; }
.ask__field select:focus { border-bottom-width: 2px; padding-bottom: 7px; }
.ask__submit { font-size: var(--t-body); margin-inline-start: var(--s-3); }
.popular { grid-column: 1 / span 10; margin-block-start: var(--s-6); color: var(--grey-text); }
.popular a { color: var(--ink); }
@media (max-width: 63.99rem) { .statement { grid-column: 1 / -1; } }
@media (max-width: 47.99rem) {
  .ask { font-size: 1.375rem; row-gap: 0; }
  .ask__word { padding: 0; margin-block-start: var(--s-4); }
  .ask__word:first-child { margin-block-start: 0; }
  .ask__field--what, .ask__field--where { flex: 1 1 100%; }
  .ask__submit { margin: var(--s-5) 0 0; width: 100%; }
  .popular { grid-column: 1 / -1; }
}

/* Stats bar: four figures under hairlines */
.stats { padding-block: var(--s-8) var(--s-7); }
.stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--col-gap); }
.stats__list > div { display: flex; flex-direction: column-reverse; gap: 4px; padding-block-start: var(--s-4); border-top: 1px solid var(--ink); }
.stats__list dt { color: var(--grey-text); }
.stats__list dd { font-size: var(--t-xl); line-height: 1.1; font-weight: 500; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.stats__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 47.99rem) { .stats__list, .stats__list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); } }

/* Customer logos: grey, even, quiet */
.logos { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--s-6) var(--s-5); align-items: center; justify-items: start; }
.logos img { width: 112px; height: 36px; object-fit: contain; object-position: left center; filter: grayscale(1); opacity: 0.6; transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease); }
.logos img:hover { opacity: 1; filter: none; }
@media (max-width: 63.99rem) { .logos { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.row__big + .row__text, .row__head + .row__text { margin-block-start: var(--s-5); }
.row__actions { margin-block-start: var(--s-7); }

/* ---------- Page body: sections on the left, a sticky quote aside ---- */
/* <div class="wrap grid page-body"><div class="page-body__main"><section class="section">…</section>…</div><aside class="quote-aside">…</aside></div> */
.page-body { align-items: start; padding-block-end: var(--row-end); }
.page-body__main { grid-column: 1 / span 8; min-width: 0; }
.page-body--full .page-body__main { grid-column: 1 / -1; }
.section { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: var(--s-7) var(--s-8); border-top: 1px solid var(--rule); }
.page-body--full .section { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.section__label { grid-column: 1 / span 2; padding-top: 0.4em; font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); letter-spacing: var(--track-body); }
.section__label small { display: block; font-size: var(--t-body); color: var(--grey-text); }
.section__body { grid-column: 3 / -1; min-width: 0; }
.section__head { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); text-wrap: balance; }
.section__intro { max-width: 36em; margin-block: var(--s-4) 0; color: var(--grey-text); }
.section__head + *, .section__intro + * { margin-block-start: var(--s-6); }
.section__head + .section__intro { margin-block-start: var(--s-4); }
@media (max-width: 63.99rem) {
  .page-body__main { grid-column: 1 / -1; }
  .section, .page-body--full .section { grid-template-columns: minmax(0, 1fr); }
  .section__label { grid-column: 1; margin-block-end: var(--s-4); padding: 0; color: var(--grey-text); }
  .section__body { grid-column: 1; }
}

/* ---------- Entry rows: numbered hairline links (services, scopes, ports) */
.entries { border-top: 1px solid var(--rule); }
.row > .entries, .grid > .entries { grid-column: 3 / -1; }
.entry { display: grid; grid-template-columns: 2.5rem minmax(0, 5fr) minmax(0, 4fr) 24px; column-gap: var(--col-gap); align-items: baseline; padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.entry__n { font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.entry__title { grid-column: 2; font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); transition: color 200ms var(--ease); }
.entry__text { grid-column: 3; max-width: 30em; color: var(--grey-text); }
.entry__text small { display: block; margin-block-start: 6px; font-size: var(--t-s); }
.entry__text .mark { margin-block-start: 6px; }
.entry > .arrow { grid-column: 4; justify-self: end; align-self: center; }
a.entry:hover .entry__title { color: var(--grey-text); }
.entries--compact .entry__title { font-size: var(--t-m); line-height: 1.3; }
.entries--stacked .entry { grid-template-columns: 2.5rem minmax(0, 1fr) 24px; row-gap: 6px; }
.entries--stacked .entry__title, .entries--stacked .entry__text { grid-column: 2; }
.entries--stacked .entry > .arrow { grid-column: 3; grid-row: 1; }
@media (max-width: 63.99rem) {
  .row > .entries, .grid > .entries { grid-column: 1 / -1; }
  .entry { grid-template-columns: 2.5rem minmax(0, 1fr) 24px; row-gap: 6px; }
  .entry__title, .entry__text { grid-column: 2; }
  .entry > .arrow { grid-column: 3; grid-row: 1; }
  .entry__title { font-size: var(--t-m); line-height: 1.3; }
}

/* Column list: many short links (countries, ports, equipment) */
.row > .col-list { grid-column: 3 / -1; }
.col-list { columns: 4 13rem; column-gap: var(--col-gap); border-top: 1px solid var(--rule); }
.col-list li { break-inside: avoid; }
.col-list a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); min-height: 44px; padding-block: 10px; border-bottom: 1px solid var(--rule); transition: color 200ms var(--ease); }
.col-list a:hover { color: var(--grey-text); }
.col-list small { font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-list--2 { columns: 2 18rem; }
@media (max-width: 63.99rem) { .row > .col-list { grid-column: 1 / -1; } }

/* Status words next to an entry: "Verified coverage" gets the dot */
.mark--on { color: var(--ink); }
.mark--on::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--ink); }

/* Notes: 2, 3 or 4 short titled paragraphs under a hairline */
.row > .notes { grid-column: 3 / -1; }
.notes { display: grid; grid-template-columns: repeat(var(--notes, 3), minmax(0, 1fr)); gap: var(--s-7) var(--col-gap); }
.notes--2 { --notes: 2; }
.notes--4 { --notes: 4; }
.notes li, .notes > div { padding-block-start: var(--s-4); border-top: 1px solid var(--rule); }
.notes__n { display: block; margin-block-end: var(--s-5); font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.notes h3 { font-size: var(--t-m); line-height: 1.3; }
.notes p { max-width: 28em; margin-block-start: var(--s-3); color: var(--grey-text); }
.row > .notes--wide { grid-column: 1 / -1; }
@media (max-width: 63.99rem) { .row > .notes { grid-column: 1 / -1; } .notes, .notes--4 { --notes: 2; } }
@media (max-width: 47.99rem) { .notes, .notes--4 { --notes: 1; gap: var(--s-6); } }

/* ---------- Quote aside (sticky, cols 10–12) --------------------------- */
.quote-aside { grid-column: 10 / -1; position: sticky; top: calc(var(--header-h) + var(--s-6)); padding-block: var(--s-7) var(--s-6); border-top: 1px solid var(--ink); }
.quote-aside__label { margin-block-end: var(--s-3); color: var(--grey-text); }
.quote-aside__title { margin-block-end: var(--s-5); font-size: var(--t-m); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.quote-aside__title + .quote-aside__text { margin-block-start: calc(var(--s-3) - var(--s-5)); }
.quote-aside__text { margin-block: var(--s-3) var(--s-5); color: var(--grey-text); }
.quote-aside dl { margin-block: var(--s-5); border-top: 1px solid var(--rule); }
.quote-aside dl div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: 10px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); }
.quote-aside dt { color: var(--grey-text); }
.quote-aside dd { text-align: end; }
.quote-aside__links { margin-block-start: var(--s-7); }
.quote-aside__links h3 { margin-block-end: var(--s-3); font-size: var(--t-body); font-weight: 400; color: var(--grey-text); letter-spacing: var(--track-body); }
.quote-aside__links ul { border-top: 1px solid var(--rule); }
.quote-aside__links a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 44px; padding-block: 10px; border-bottom: 1px solid var(--rule); transition: color 200ms var(--ease); }
.quote-aside__links a:hover { color: var(--grey-text); }
@media (max-width: 63.99rem) { .quote-aside { grid-column: 1 / -1; position: static; } }

/* Long-form content from the CMS (service, country, port descriptions) */
.prose { max-width: 38em; }
.prose h2 { font-size: var(--t-l); line-height: var(--lh-head); letter-spacing: var(--track-head); }
.prose h3 { font-size: var(--t-m); line-height: 1.3; }
.prose h4 { font-size: var(--t-body); }
.prose strong, .prose b { font-weight: 500; }
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; font-size: var(--t-s); font-variant-numeric: tabular-nums; border-top: 1px solid var(--ink); }
.prose th { padding: 10px 16px 10px 0; text-align: start; font-weight: 400; color: var(--grey-text); border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.prose td { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose img { border-radius: var(--radius); }
.prose .attachment, .prose action-text-attachment { display: block; }
/* CMS bodies arrive wrapped (<div class="trix-content">…), so space descendants, not just children */
.prose :is(p, ul, ol, table, blockquote, figure, pre) { margin-block: 0 1em; }
.prose :is(h2, h3, h4) { margin-block: 1.8em 0.5em; }
.prose > :first-child, .prose > :first-child > :first-child { margin-block-start: 0; }
.prose :is(p, ul, ol):last-child { margin-block-end: 0; }
.prose > :first-child { margin-block-start: 0; }
.prose--lead > p:first-child { font-size: var(--t-m); line-height: 1.45; letter-spacing: 0; }

/* ---------- Continent tabs + filter (countries index) ------------------ */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-6); }
.filter-bar .tabs__list { flex: 1 1 auto; min-width: 0; }
.filter-bar__search { flex: 0 1 240px; }
.filter-bar__search input { width: 100%; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: none; outline: none; }
.filter-bar__search input:focus { border-color: var(--ink); }
.filter-bar__search input::placeholder { color: var(--grey-text); opacity: 1; }
.filter-empty { padding-block: var(--s-4); color: var(--grey-text); }
.continent { scroll-margin-top: calc(var(--header-h) + 72px); }
@media (max-width: 47.99rem) { .filter-bar__search { flex: 1 1 100%; padding-block-end: var(--s-3); } }

/* ---------- Articles --------------------------------------------------- */
.article-head { row-gap: var(--s-5); padding-block: clamp(40px, 5.5vw, 96px) clamp(40px, 4vw, 64px); }
.article-head__kicker { grid-column: 1 / span 2; padding-top: 0.55em; color: var(--grey-text); }
.article-head__kicker span { display: block; }
.article-head__title { grid-column: 3 / span 9; font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }
.article-head__dek { grid-column: 3 / span 7; max-width: 40em; font-size: var(--t-m); line-height: 1.5; font-weight: 400; color: var(--grey-text); text-wrap: pretty; }
.article-figure { margin-block-end: var(--s-8); }
.article-figure figcaption a:hover { color: var(--ink); }
.article-body { row-gap: var(--s-7); align-items: start; padding-block-end: var(--row-end); }
.article-byline { grid-column: 1 / span 2; position: sticky; top: calc(var(--header-h) + var(--s-6)); font-size: var(--t-s); line-height: 20px; }
.article-byline > div { padding-block: 10px 12px; border-top: 1px solid var(--rule); }
.article-byline > div:last-child { border-bottom: 1px solid var(--rule); }
.article-byline dt { color: var(--grey-text); }
.article-main { grid-column: 3 / span 6; min-width: 0; }
.article-prose { max-width: 36em; font-size: 1.125rem; line-height: 1.6; letter-spacing: 0.005em; }
.article-prose > * + * { margin-block-start: 1.1em; }
.article-prose > p:first-child, .article-prose > div > p:first-child { font-size: 1.375rem; line-height: 1.45; letter-spacing: 0; }
.article-prose h2 { margin-block-start: 1.9em; font-size: var(--t-l); line-height: var(--lh-head); }
.article-prose h3 { margin-block-start: 1.6em; font-size: var(--t-m); }
.article-prose h2 + *, .article-prose h3 + * { margin-block-start: 0.6em; }
.article-prose a { text-underline-offset: 4px; }
.article-note { margin-block-start: var(--s-8); padding-block-start: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--t-s); line-height: 20px; color: var(--grey-text); }
.article-note strong { color: var(--ink); }
.article-tags { margin-block-start: var(--s-6); }
@media (max-width: 63.99rem) {
  .article-head__kicker { grid-column: 1 / -1; padding: 0; }
  .article-head__kicker span { display: inline; }
  .article-head__kicker span + span::before { content: " · "; }
  .article-head__title, .article-head__dek { grid-column: 1 / -1; }
  .article-byline { grid-column: 1 / -1; position: static; display: flex; flex-wrap: wrap; gap: 0 var(--s-6); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .article-byline > div, .article-byline > div:last-child { border: 0; }
  .article-main { grid-column: 1 / -1; }
  .article-prose { font-size: 1.0625rem; }
  .article-prose > p:first-child, .article-prose > div > p:first-child { font-size: 1.25rem; }
}

/* Journal rows: whole row clickable, gentle photo push on hover */
.journal-list .story, .home-journal .story { position: relative; }
.journal-list .story__title a::after, .home-journal .story__title a::after { content: ""; position: absolute; inset: 0; }
.story__media { grid-column: 10 / -1; overflow: hidden; border-radius: var(--radius); align-self: start; }
.story__media img, .story__media--empty { aspect-ratio: 3 / 2; }
@media (max-width: 63.99rem) { .story__media { grid-column: 1 / -1; } }
.story__media img { transition: transform 900ms var(--ease); }
.story:hover .story__media img { transform: scale(1.025); }
.story__media--empty { aspect-ratio: 4 / 3; background: var(--field); }
.journal-list { padding-block-end: var(--row-end); }

/* ---------- Galleries ---------------------------------------------------- */
.shots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--col-gap); }
.shots--in-row { grid-column: 3 / -1; }
.shot { position: relative; }
.shot__media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--field); }
.shot__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 900ms var(--ease); }
.shot:hover .shot__media img { transform: scale(1.025); }
.shot__title { margin-block-start: var(--s-3); font-size: var(--t-m); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.shot__title a::after { content: ""; position: absolute; inset: 0; }
.shot__placeholder { display: block; aspect-ratio: 4 / 3; }
.shot__meta { margin-block-start: 4px; font-size: var(--t-s); color: var(--grey-text); }
@media (max-width: 63.99rem) { .shots, .shots--in-row { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) {
  .shots, .shots--in-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); }
  .shot__title { font-size: var(--t-body); line-height: 1.3; }
}

/* Field photos: one large, four small, one-line captions keep the grid even */
.field-photos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--col-gap); }
.field-photos .figure { display: flex; flex-direction: column; min-width: 0; }
.field-photos .figure > a { display: block; flex: 1; min-height: 0; }
.field-photos .figure img { height: 100%; aspect-ratio: 4 / 3; }
.field-photos .figure:first-child { grid-column: span 2; grid-row: span 2; }
.field-photos .figure:first-child img { aspect-ratio: auto; min-height: 280px; }
.field-photos figcaption { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.field-photos figcaption span:last-child { display: none; }
.field-photos a:hover img { opacity: 0.9; }
@media (max-width: 47.99rem) { .field-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.photo-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--col-gap); }
.photo-grid a { display: block; cursor: zoom-in; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--field); }
.photo-grid .figure:first-child { grid-column: span 2; grid-row: span 2; }
.photo-grid .figure:first-child img { aspect-ratio: auto; height: 100%; min-height: 320px; }
.photo-grid figcaption { padding-block-start: 8px; font-size: var(--t-s); color: var(--grey-text); }
@media (max-width: 63.99rem) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lightbox (lightbox_controller) */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgb(17 17 17 / 0.96); color: #ececec; }
.lightbox__stage { display: flex; align-items: center; justify-content: center; max-width: 92vw; max-height: 86vh; }
.lightbox__stage img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: var(--radius); filter: none; }
.lightbox button { position: absolute; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; background: none; color: inherit; font-size: var(--t-body); }
.lightbox button:hover { color: #a3a3a3; }
.lightbox__close { top: 12px; right: var(--gutter); }
.lightbox__prev { left: var(--gutter); top: 50%; translate: 0 -50%; }
.lightbox__next { right: var(--gutter); top: 50%; translate: 0 -50%; }
.lightbox__count { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; font-size: var(--t-s); color: #a3a3a3; font-variant-numeric: tabular-nums; }
body.lightbox-open { overflow: hidden; }

/* ---------- Quote form ------------------------------------------------- */
.quote-form { grid-column: 1 / span 8; }
.form-section { display: grid; gap: var(--s-5); padding-block: var(--s-6) var(--s-7); border-top: 1px solid var(--rule); }
@media (min-width: 64rem) {
  .form-section { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--col-gap); row-gap: 0; align-items: start; }
  .form-section > :not(.form-section__intro) { grid-column: 2; }
  .form-section > :not(.form-section__intro) ~ :not(.form-section__intro) { margin-block-start: var(--s-6); }
  .form-section > .form-section__intro { grid-row: 1 / span 3; }
}
.form-section__intro .notes__n { margin-block-end: var(--s-2); }
.form-section__intro h2 { font-size: var(--t-m); line-height: 1.3; }
.form-section__intro p { margin-block-start: var(--s-2); max-width: 22rem; font-size: var(--t-s); color: var(--grey-text); }
.form-grid--3 { display: grid; gap: var(--s-5) var(--s-6); }
@media (min-width: 48rem) { .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice-row { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); border: 0; padding: 0; margin: 0; }
.choice-row legend { margin-block-end: 4px; padding: 0; font-size: var(--t-s); color: var(--grey-text); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-block: var(--s-5); border-top: 1px solid var(--ink); }
@media (min-width: 64rem) { .form-actions { padding-inline-start: calc((100% - var(--col-gap)) / 4 + var(--col-gap)); } }
.form-actions p { font-size: var(--t-s); color: var(--grey-text); }
.form-errors { margin-block-end: var(--s-5); }
.quote-steps { border-top: 1px solid var(--rule); counter-reset: step; }
.quote-steps li { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.quote-steps h3 { font-size: var(--t-body); }
.quote-steps p { margin-block-start: 4px; font-size: var(--t-s); color: var(--grey-text); }
@media (max-width: 63.99rem) { .quote-form { grid-column: 1 / -1; } }

/* Dropzone + upload rows (file_upload_controller) */
.dropzone { display: grid; justify-items: start; gap: 4px; padding: var(--s-6) var(--s-5); border: 1px dashed var(--grey); border-radius: var(--radius); cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.dropzone:hover, .dropzone.is-over { border-color: var(--ink); background: var(--field); }
.dropzone__title { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.dropzone__hint { font-size: var(--t-s); color: var(--grey-text); }
.upload-list { display: grid; margin-block-start: var(--s-3); }
.upload-row { display: flex; align-items: center; gap: var(--s-3); padding-block: 10px; border-bottom: 1px solid var(--rule); }
.upload-row__body { flex: 1; min-width: 0; }
.upload-row__head { display: flex; justify-content: space-between; gap: var(--s-3); }
.upload-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-row__size, .upload-row__status { font-size: var(--t-s); color: var(--grey-text); white-space: nowrap; }
.upload-row__bar { height: 2px; margin-block: 6px 2px; background: var(--rule); }
.upload-row__fill { height: 100%; background: var(--ink); transition: width 300ms var(--ease); }
.upload-row.is-done .upload-row__bar { display: none; }
.upload-row.is-done .upload-row__status { color: var(--ink); }
.upload-row.is-error .upload-row__status { color: var(--danger); }
.upload-row.is-error .upload-row__bar { display: none; }
.upload-row__remove { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px; border: 0; background: none; color: var(--grey-text); }
.upload-row__remove:hover { color: var(--danger); }

/* ---------- Thank-you / notice ---------------------------------------- */
.notice-actions { grid-column: 3 / -1; margin-block-start: var(--s-7); }
@media (max-width: 63.99rem) { .notice-actions { grid-column: 1 / -1; } }

/* ---------- Portal preview list (ship owners / providers) ------------- */
.points--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
@media (max-width: 47.99rem) { .points--grid { grid-template-columns: 1fr; } }

/* ---------- Spacing inside rows ---------------------------------------- */
.row > .entries, .row > .notes, .row > .col-list, .row > .logos { margin-block-start: var(--s-7); }
.row > .row__label + .entries, .row > .row__label + .notes, .row > .row__label + .col-list, .row > .row__label + .logos { margin-block-start: 0; }
.home-spaced { margin-block-start: var(--s-7); }
.row__full { grid-column: 1 / -1; }
.article-body--plain { padding-block-start: var(--s-7); background: linear-gradient(var(--rule), var(--rule)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }

/* Phones: the quote button sits under the masthead */
.mobile-quote { display: none; }
@media (max-width: 63.99rem) {
  .mobile-quote { display: block; padding-block-end: var(--s-7); }
}

/* Two-column entry lists for long indexes (services, country and port pages) */
.entries--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); border-top: 0; }
.entries--grid .entry { grid-template-columns: minmax(0, 1fr) 24px; border-top: 0; }
.entries--grid .entry:nth-child(-n + 2) { border-top: 1px solid var(--rule); }
.entries--grid .entry__n { display: none; }
.entries--grid .entry__title, .entries--grid .entry__text { grid-column: 1; }
.entries--grid .entry > .arrow { grid-column: 2; grid-row: 1; }
.entries--grid .entry__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 47.99rem) {
  .entries--grid { grid-template-columns: minmax(0, 1fr); }
  .entries--grid .entry:nth-child(2) { border-top: 0; }
}

/* Blog topics: a wrapped line of text tokens */
.row--topics { padding-block: var(--s-5); }
.row--topics .chip-row { column-gap: var(--s-5); }
.home-journal { padding-block-end: var(--s-8); }