/* WSH Shipping - page layout. Values from tokens.css only. */

.skip { position: absolute; left: var(--space-4); top: -4rem; z-index: 10; background: var(--color-text);
  color: var(--color-text-inverse); padding: var(--space-2) var(--space-4); }
.skip:focus { top: var(--space-4); }

/* ---------- Header and navigation */
.site-header { border-bottom: var(--hairline) solid var(--color-rule-strong); position: relative; z-index: 20; background: var(--color-bg); }
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-top: var(--space-3); padding-bottom: var(--space-3); }
.brand img { height: 2.75rem; width: auto; }
.nav { position: static; }
.navbox > summary { list-style: none; }
.navbox > summary::-webkit-details-marker, .menu > summary::-webkit-details-marker { display: none; }
.navbox__toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: 0 var(--space-4);
  border: var(--hairline) solid var(--color-text); font-weight: var(--weight-text-strong); cursor: pointer; }
.navbox__toggle::after { content: ""; width: 0.9rem; height: 7px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.navbox[open] > .navbox__toggle::after { height: 0; border-bottom: 0; }
.nav__list { list-style: none; margin: 0; padding: 0; }
.menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); min-height: 2.75rem; font-weight: var(--weight-text-strong); }
.menu > summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.menu[open] > summary::after { transform: translateY(15%) rotate(-135deg); }
.menu > summary.is-current { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.menu__intro .caps { color: var(--color-text-muted); margin-bottom: var(--space-2); }
.menu__intro p { font-size: var(--step--1); }
.menu__all { font-weight: var(--weight-text-strong); }
.menu__no { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-1); line-height: 1; margin: 0 0 var(--space-1); }
.menu__head { display: inline-block; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-1);
  line-height: 1.2; text-decoration: none; margin-bottom: var(--space-2); }
.menu__head:hover { color: var(--color-accent); }
.menu__col ul, .menu__list { list-style: none; margin: 0; padding: 0; }
.menu__col li a { display: block; padding: var(--space-1) 0; font-size: var(--step--1); text-decoration: none; min-height: 1.75rem; }
.menu__col li a:hover, .menu__list a:hover strong { color: var(--color-accent); text-decoration: underline; }
.menu__list a { display: grid; gap: 2px; padding: var(--space-3) 0; text-decoration: none; border-bottom: var(--hairline) solid var(--color-rule); }
.menu__list span { font-size: var(--step--1); color: var(--color-text-muted); }
.btn--sm { min-height: 2.75rem; padding: var(--space-2) var(--space-4); font-size: var(--step--1); }

/* phone and tablet: one collapsible panel, menus as accordions */
@media (max-width: 959px) {
  .navbox[open] > .nav__list { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-bg);
    border-bottom: var(--rule-heavy) solid var(--color-rule-strong); padding: var(--space-2) var(--gutter) var(--space-6);
    max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - 4.5rem); overflow-y: auto; }
  .nav__item { border-bottom: var(--hairline) solid var(--color-rule); }
  .menu > summary { font-size: var(--step-1); font-family: var(--font-display); padding: var(--space-2) 0; }
  .menu__panel { padding: 0 0 var(--space-5); display: grid; gap: var(--space-4); }
  .menu__intro p:not(.caps) { margin: 0; }
  .menu__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
  .nav__item--cta { border: 0; padding-top: var(--space-5); }
  .menu__col li a, .menu__all { display: flex; align-items: center; min-height: 2.75rem; padding: 0; }
}
/* desktop: inline bar, menus drop as ruled panels */
@media (min-width: 960px) {
  .brand img { height: 3.25rem; }
  .navbox > .navbox__toggle { display: none; }
  .nav__list { display: flex; align-items: center; gap: var(--space-6); }
  .menu > summary::after { width: 0.35rem; height: 0.35rem; }
  .menu__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-bg);
    border-top: var(--hairline) solid var(--color-rule-strong); border-bottom: var(--rule-heavy) solid var(--color-rule-strong);
    padding: var(--space-6) max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
    display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-7); }
  .menu__panel--narrow { grid-template-columns: minmax(0, 40rem); }
  .menu__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-5); }
  .menu__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .menu__panel--narrow .menu__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Hero (home) */
.hero { padding: var(--space-5) 0 var(--space-6); }
.hero__caps { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: end; }
.hero .statement { margin: 0; max-width: 11em; font-size: min(var(--step-5), 15vh); }
.doc { width: 4.25rem; height: auto; overflow: visible; }
.doc__back { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1; }
.doc__paper { fill: #FBF8F2; stroke: var(--ink); stroke-width: 1; }
.doc__ink, .doc__rule { fill: var(--ink); }
.doc__rule { fill: var(--rule); }
.doc__t { font: 600 11px var(--font-text); letter-spacing: 0.14em; fill: var(--ink); }
.doc__f text { font: 600 6.5px var(--font-text); letter-spacing: 0.12em; fill: var(--ink-soft); }
.doc__f rect { fill: var(--rule); }
.doc__f rect[height="0.8"] { fill: var(--ink-soft); }
.doc__sheet { transform: rotate(-1.5deg); transform-origin: 50% 50%; transform-box: fill-box; }
.doc__chop { transform: rotate(-5deg); transform-origin: center; transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .doc__chop { animation: chop var(--dur-seal) var(--ease-press) 0.45s both; }
  @keyframes chop {
    from { opacity: 0; transform: rotate(-5deg) scale(1.35); }
    to { opacity: 1; transform: rotate(-5deg) scale(1); }
  }
}
.hero__where { margin: var(--space-5) 0 0; color: var(--color-text-muted); max-width: none; }
.hero .rule-double { margin: var(--space-5) 0 var(--space-4); }
@media (min-width: 960px) { .hero .rule-double { margin: var(--space-6) 0 var(--space-5); } }
.hero__foot { display: grid; gap: var(--space-5); }
.hero__foot .lead { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; max-width: none; }
@media (min-width: 640px) { .doc { width: 10rem; } }
@media (min-width: 960px) {
  .hero { padding: var(--space-9) 0 var(--space-8); }
  .doc { width: 15rem; margin-bottom: calc(-1 * var(--space-6)); }
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-7); }
}

/* ---------- Page head (inner pages) */
.page-head { padding: var(--space-7) 0 0; }
.page-head h1 { max-width: 16em; }
.page-head .lead { color: var(--color-text-muted); }
.page-head .rule-double { margin: var(--space-6) 0 0; }
.page-head > .wrap > .caps:first-child { color: var(--color-text-muted); margin-bottom: var(--space-3); }
@media (min-width: 960px) { .page-head { padding-top: var(--space-8); } }

.clause__body > :last-child { margin-bottom: 0; }

/* ---------- Home: entries as links */
.entry--link { display: block; text-decoration: none; color: inherit; }
.entry--link h3 { transition: color var(--dur-fast) var(--ease-out); }
.entry--link:hover h3 { color: var(--color-accent); }
.entry--link .caps { color: var(--color-text-muted); margin-bottom: var(--space-2); }

/* ---------- Steps */
.steps { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--color-rule-strong); counter-reset: none; }
.steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3);
  padding: var(--space-4) 0; border-bottom: var(--hairline) solid var(--color-rule); }
.steps__no { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-2); line-height: 1.1; }
.steps li div { max-width: var(--measure); }

/* ---------- Office block */
.office address { font-style: normal; font-size: var(--step-1); line-height: 1.45; margin: var(--space-2) 0 var(--space-4); }
.office__links { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.office__links a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; }
.band-ink .office .caps { color: var(--rule); }

/* ---------- CTA strip and closing band */
.cta-strip__in { display: grid; gap: var(--space-5); align-items: center; }
.cta-strip h2 { margin-bottom: var(--space-2); }
.cta-strip__act, .sign { display: flex; align-items: center; gap: var(--space-5); }
.sign { margin-top: var(--space-6); }
@media (min-width: 960px) { .cta-strip__in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); } }
.closing__in { text-align: left; }
.closing h2 { font-size: var(--step-4); line-height: var(--leading-tight); max-width: 14em; }

/* ---------- Services hub */
.hub-cat { padding: var(--space-7) 0 var(--space-5); }
.hub-cat + .hub-cat { padding-top: 0; }
.hub-cat h2 a { text-decoration: none; }
.hub-cat h2 a:hover { color: var(--color-accent); }
.ledger--svc li { display: grid; gap: var(--space-1); }
.ledger--svc a { text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.ledger--svc a:hover strong { color: var(--color-accent); }
.ledger--svc span { color: var(--color-text-muted); }
@media (min-width: 960px) { .ledger--svc li { grid-template-columns: 22rem minmax(0, 1fr); gap: var(--space-6); align-items: center; } }

/* ---------- Category pages */
.on-page { margin-top: var(--space-6); }
.on-page .caps { color: var(--color-text-muted); margin-bottom: var(--space-2); }
.on-page .ledger { margin: 0; }
@media (min-width: 640px) { .on-page .ledger { columns: 2; column-gap: var(--space-6); }
  .on-page .ledger li { break-inside: avoid; } }
.svc { padding: var(--space-7) 0; scroll-margin-top: var(--space-4); }
.svc + .svc { border-top: var(--hairline) solid var(--color-rule); }
.svc .lead { margin-bottom: var(--space-6); }
.svc__grid { display: grid; gap: var(--space-5); margin-bottom: var(--space-5); }
.svc__grid h3 { color: var(--color-text-muted); margin-bottom: var(--space-2); }
.svc__grid .ledger { margin: 0; }
.svc__note { margin-bottom: var(--space-4); }
@media (min-width: 960px) { .svc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.other-cats .caps { color: var(--color-text-muted); }

/* ---------- Company facts */
.facts { width: 100%; border-collapse: collapse; border-top: var(--rule-heavy) solid var(--color-rule-strong);
  font-variant-numeric: tabular-nums lining-nums; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--color-rule); }
.facts th { font-size: var(--step--2); font-weight: var(--weight-text-strong); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--color-text-muted); padding-right: var(--space-5); width: 34%; }
@media (max-width: 639px) { .facts th, .facts td { display: block; width: auto; }
  .facts th { border-bottom: 0; padding-bottom: 0; } }

/* ---------- Enquiry */
.enq-grid { display: grid; gap: var(--space-8); }
@media (min-width: 960px) { .enq-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); } }
.enq-aside .caps { color: var(--color-text-muted); }
.enq-aside h2 { font-size: var(--step-2); }
.enq fieldset { border: 0; margin: 0 0 var(--space-6); padding: 0; min-width: 0; }
.enq fieldset > legend.caps { display: block; width: 100%; padding-bottom: var(--space-2); margin-bottom: var(--space-5);
  border-bottom: var(--rule-heavy) solid var(--color-rule-strong); }
.radios { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.radios legend { font-weight: var(--weight-text-strong); font-size: var(--step--1); margin-bottom: var(--space-2); padding: 0; width: 100%; }
.radios .check { font-size: var(--step-0); align-items: center; min-height: 2.75rem; }
.enq__summary { margin-bottom: var(--space-6); }
.enq .field label.check { font-weight: var(--weight-text); font-size: var(--step--1); }
.enq button[type="submit"] + .small { margin-top: var(--space-3); }
.enq__summary ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.enq__summary-h, .enq__done h2 { font-size: var(--step-2); margin-bottom: var(--space-2); }
.enq-off .btn { margin: var(--space-2) 0; }

/* ---------- Glossary */
.gloss { display: grid; gap: var(--space-6); }
.gloss__index .caps { color: var(--color-text-muted); }
.gloss__index .flat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); font-size: var(--step--1); }
.gloss__index .flat a { line-height: 1.3; }
.gloss__index li { break-inside: avoid; }
.gloss__index a { min-width: 2.75rem; }
.gloss__list { margin: 0; border-top: var(--rule-heavy) solid var(--color-rule-strong); }
.term { padding: var(--space-4) 0; border-bottom: var(--hairline) solid var(--color-rule); scroll-margin-top: var(--space-4); }
.term dt { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-2); line-height: var(--leading-heading); margin-bottom: var(--space-2); }
.term dd { margin: 0; max-width: var(--measure); }
.term:target dt { color: var(--color-accent); }
.gloss__close { margin-top: var(--space-6); }
@media (min-width: 960px) { .gloss { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-8); }
  .gloss__index { position: sticky; top: var(--space-5); align-self: start; }
  .gloss__index .flat { grid-template-columns: 1fr; } }

/* ---------- Prose (privacy) */
.prose h2 { font-size: var(--step-2); margin-top: var(--space-6); }
.prose h2:first-child { margin-top: 0; }

/* ---------- Footer */
.site-footer { padding: var(--space-8) 0 var(--space-6); font-size: var(--step--1); }
.site-footer__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6); }
.site-footer__top .site-footer__line { margin: 0; flex: 1 1 14rem; }
.site-footer__grid { display: grid; gap: var(--space-6); margin-bottom: var(--space-7); }
.site-footer .caps a { color: inherit; text-decoration: none; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: center;
  border-top: var(--hairline) solid var(--rule); padding-top: var(--space-4); }
.site-footer__legal p { margin: 0; }
.site-footer__logo { height: 3rem; width: auto; }
.site-footer__line { font-family: var(--font-display); font-size: var(--step-1); }
.site-footer .caps { color: var(--rule); margin-bottom: var(--space-3); }
.site-footer .office address { font-size: var(--step--1); }
.flat { list-style: none; margin: 0; padding: 0; }
.flat a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.flat li { padding: 0; }
.flat--row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 0.8fr 1.1fr; } }

/* ---------- 404 */
.page-404 { padding-bottom: var(--space-9); }
.page-404 .flat--row { margin-top: var(--space-5); }

.entry--all h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.hero__where a { display: inline-block; padding: var(--space-2) 0; }

/* ---------- Document tables (guides, register) */
.doc-table { width: 100%; border-collapse: collapse; border-top: var(--rule-heavy) solid var(--color-rule-strong); margin: 0 0 var(--space-5);
  font-size: var(--step--1); font-variant-numeric: tabular-nums lining-nums; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--color-rule); }
.doc-table thead th { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted);
  border-bottom: var(--hairline) solid var(--color-rule-strong); }
.doc-table tbody th { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-0); white-space: nowrap; }
.doc-table tbody th span { font-family: var(--font-text); font-weight: var(--weight-text); font-size: var(--step--2); color: var(--color-text-muted); white-space: normal; }
@media (max-width: 639px) {
  .doc-table:not(.register__t) thead { display: none; }
  .doc-table:not(.register__t) tr { display: block; padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--color-rule); }
  .doc-table:not(.register__t) th, .doc-table:not(.register__t) td { display: block; border: 0; padding: var(--space-1) 0; white-space: normal; }
}
.prose > p, .prose li { max-width: var(--measure); }
.gsec { padding: var(--space-7) 0 var(--space-4); }
.gsec + .gsec { border-top: var(--hairline) solid var(--color-rule); }
.gsec h2 { font-size: var(--step-3); }
.steps--plain { margin-bottom: var(--space-5); }
.next-guide { margin-top: var(--space-5); font-weight: var(--weight-text-strong); }
.links-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

/* ---------- How we work */
.stages { list-style: none; margin: 0; padding: 0; border-top: var(--rule-heavy) solid var(--color-rule-strong); }
.stage { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0;
  border-bottom: var(--hairline) solid var(--color-rule); }
.stage__no { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-3); line-height: 1; }
.stage h2 { font-size: var(--step-2); margin-bottom: var(--space-2); }
.stage .caps { color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-2); }
.stage .ledger { margin: 0; max-width: 34rem; }
@media (min-width: 960px) { .stage { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-6); } .stage__no { font-size: var(--step-4); } }

/* ---------- FAQ */
.qas { border-top: var(--rule-heavy) solid var(--color-rule-strong); max-width: 52rem; }
.qa { border-bottom: var(--hairline) solid var(--color-rule); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0; min-height: 2.75rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h2 { font-size: var(--step-1); margin: 0; }
.qa summary::after { content: "+"; font-family: var(--font-display); font-size: var(--step-2); line-height: 1; flex: none; }
.qa[open] summary::after { content: "-"; }
.qa__a { padding: 0 0 var(--space-5); }
.qa__a p { margin: 0; }

/* ---------- Contact */
.contact-grid { display: grid; gap: var(--space-7); }
.contact-mail { font-family: var(--font-display); font-size: var(--step-2); overflow-wrap: anywhere; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.2fr 1fr 1fr; } }

/* ---------- Site index */
.register { margin-bottom: var(--space-7); }
.register h2 { font-size: var(--step-2); }
.register__t td:first-child { width: 3.5rem; color: var(--color-text-muted); }
.register__t th[scope="row"] { white-space: normal; }
@media (max-width: 639px) { .register__t thead th:last-child, .register__t td:last-child { display: none; } }

/* ---------- Calculators */
.calc { border-top: var(--rule-heavy) solid var(--color-rule-strong); padding-top: var(--space-5); margin: var(--space-5) 0; }
.calc__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
@media (min-width: 960px) { .calc__row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.calc .field { margin-bottom: var(--space-4); }
.calc__out { background: var(--color-bg-alt); border-left: var(--rule-heavy) solid var(--color-rule-strong); padding: var(--space-4);
  max-width: none; font-variant-numeric: tabular-nums lining-nums; }
.band .calc__out { background: var(--color-bg); }

/* ---------- Photography: full-bleed duotone bands */
.photo { margin: var(--space-7) 0 0; position: relative; }
.photo img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; background: var(--paper-2); }
@media (max-width: 639px) { .photo img { aspect-ratio: 4 / 3; } }
.photo__credit { font-size: var(--step--2); color: var(--color-text-muted); padding: var(--space-2) var(--gutter) 0;
  max-width: var(--page-max); margin: 0 auto; }
.photo__credit a { color: inherit; }

/* ---------- Plates: generated engraving-style illustrations, inset and labelled */
.plate { margin: var(--space-7) 0 0; max-width: 60rem; }
.plate img { width: 100%; height: auto; border: var(--hairline) solid var(--color-rule-strong); background: var(--paper); }
.plate figcaption { font-size: var(--step--2); color: var(--color-text-muted); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; padding-top: var(--space-2); }

/* ---------- Home photo strip */
.strip { padding-bottom: 0; }
.strip__head { max-width: none; color: var(--color-text-muted); border-top: var(--rule-heavy) solid var(--color-rule-strong); padding-top: var(--space-3); }
.strip__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .strip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.strip__tile { margin: 0; }
.strip__tile img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2); }
@media (max-width: 639px) { .strip__tile img { aspect-ratio: 3 / 2; } }
.strip__tile figcaption { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline;
  border-bottom: var(--hairline) solid var(--color-rule); padding: var(--space-2) 0; }
.strip__tile .photo__credit { padding: 0; margin: 0; }