.services { padding-bottom: clamp(4rem, 7vw, 7rem); }
.services-column { width: min(35ch, 72vw); margin-left: 18vw; padding-top: 2.5rem; }
.service-entry { position: relative; margin-bottom: 2.75rem; }
.service-icon-frame { position: relative; width: 6rem; height: 4.5rem; margin-bottom: 1rem; overflow: clip; }
.service-icon-frame img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.service-icon-cover { position: absolute; inset: 0; background: var(--ground); transform: translateX(105%); transition: transform var(--dur-panel, 650ms) var(--ease-out, ease-out); }
.motion-ready .service-entry:not(.in-view) .service-icon-cover { transform: translateX(0); }
.service-label { font-size: var(--t-4); line-height: 1.2; margin-bottom: .8rem; }
.service-copy { color: var(--soft-ink); max-width: 62ch; }
.services-outro { padding-top: .5rem; }
.motion-ready .service-copy { transition: clip-path var(--dur-panel, 650ms) var(--ease-out, ease-out), translate var(--dur-panel, 650ms) var(--ease-out, ease-out); }
.motion-ready .service-entry:not(.in-view) .service-copy { clip-path: inset(0 100% 0 0); translate: -1rem 0; }
.motion-ready .service-entry.in-view .service-copy { clip-path: inset(0 -2% 0 0); translate: 0 0; }

.sustainability { --chapter-ground: var(--panel); background: var(--panel); padding-bottom: clamp(3rem, 6vw, 6rem); }
.sustainability .gate-wall { color: #A8BDAE; }
.sustainability-intro { padding: 1.5rem var(--edge) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.sustainability-intro p { grid-column: 2; max-width: 62ch; }
.freight-sequence { margin: 3rem var(--edge) 0; }
.freight-marks { position: relative; width: 100%; aspect-ratio: 4.5; min-height: 11rem; overflow: clip; }
.freight-mark { position: absolute; top: 0; left: 0; width: .65rem; height: .65rem; border-radius: 2px; background: var(--accent); opacity: .75; }
.freight-mark:nth-child(3n) { background: var(--soft-ink); opacity: .5; }
.freight-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; list-style: none; padding: 1.5rem 0 0; margin: 0; }
.freight-steps li { min-width: 0; padding-top: 1rem; border-top: 1px solid #94AD9C; }
.freight-steps h3 { font-size: var(--t-4); line-height: 1.2; margin-bottom: .75rem; }
.freight-steps p { max-width: 27ch; }

.warehouse { --chapter-ground: #CEDCD1; background: var(--chapter-ground); }
.warehouse .gate-wall { color: #A4BAAB; }
.warehouse-card-stage { padding: 2rem var(--edge) 0; overflow: clip; }
.warehouse-card { width: min(64vw, 50rem); margin: 0 auto -3rem; padding: clamp(1.75rem, 3.5vw, 3.5rem); padding-bottom: 0; background: var(--paper); transform: rotate(-1deg); color: var(--ink); transform-origin: center 70%; }
.warehouse-card-heading { font-size: var(--t-5); text-align: center; line-height: 1.2; margin-bottom: 1.75rem; }
.warehouse-figure { margin: 0; }
.warehouse-photo-frame { aspect-ratio: 16 / 9; overflow: clip; background: #B4AC90; border: 1px solid #BDB9A8; }
.warehouse-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; scale: 1.07; }
.warehouse-figure figcaption { font-size: var(--t-2); line-height: 1.5; text-align: left; margin-top: .9rem; max-width: 62ch; }
.warehouse-promise { font-family: var(--display); font-size: var(--t-4); font-weight: 500; text-align: center; line-height: 1.3; margin: 2rem auto 1rem; max-width: 30ch; }
.warehouse-copy { text-align: left; max-width: 58ch; margin-inline: auto; }
.warehouse-paper-tail { min-height: 7rem; }
.motion-ready .warehouse-card:not(.in-view) { transform: translateY(6rem) rotate(-2deg) scale(1.025); }
.motion-ready .warehouse-card.in-view { transform: rotate(-1deg); }

.about { padding-bottom: 4rem; background: var(--ground); }
.about-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: 'statement copy' 'image copy'; gap: 3rem clamp(2rem, 5vw, 5rem); position: relative; margin-inline: var(--edge); padding: clamp(1.75rem, 4vw, 4rem); padding-bottom: 0; overflow: clip; border-radius: var(--radius); background: var(--deep); color: var(--ground); }
.about-statement { grid-area: statement; font-family: var(--display); font-size: clamp(2.4375rem, 1rem + 3.5vw, 4.5rem); font-weight: 200; line-height: 1.05; letter-spacing: -.035em; max-width: 11ch; text-wrap: balance; position: relative; z-index: 2; }
.about-copy { grid-area: copy; align-self: start; position: relative; z-index: 2; padding-block: .5rem 3.5rem; min-width: 0; }
.about-text-block + .about-text-block { margin-top: 3rem; }
.about-text-block h3 { font-size: var(--t-4); line-height: 1.2; margin-bottom: .85rem; }
.about-text-block p { max-width: 36ch; }
.about-copy .button { margin-top: 2.5rem; width: 100%; max-width: 25rem; }
.about-figure { grid-area: image; min-width: 0; margin: 0; align-self: end; }
.about-mask { position: relative; overflow: clip; aspect-ratio: 1.05; background: #6D7869; clip-path: polygon(13% 0, 100% 0, 100% 87%, 87% 100%, 0 100%, 0 13%); transform-origin: 50% 60%; transition: clip-path var(--dur-panel, 650ms) var(--ease-out, ease-out); }
.about-mask img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 39%; scale: 1.07; transition: scale var(--dur-panel, 650ms) var(--ease-out, ease-out); }
.motion-ready .about-panel:not(.in-view) .about-mask { clip-path: polygon(30% 20%, 80% 20%, 80% 65%, 65% 80%, 20% 80%, 20% 35%); }
.motion-ready .about-panel:not(.in-view) .about-mask img { scale: 1.16; }
.about-figure figcaption { font-size: var(--t-2); line-height: 1.4; padding-block: 1rem 1.5rem; max-width: 36ch; color: var(--ground); }

.faq { padding: 3rem var(--edge) 5rem; overflow-x: clip; }
.faq-title { font-size: clamp(2.4375rem, 1rem + 4.7vw, 5.5rem); line-height: 1; max-width: 15ch; }
.faq-list { list-style: none; margin: 4rem 0 0 33.333%; padding: 0; }
.faq-item { position: relative; isolation: isolate; min-height: 9.25rem; padding: 1rem 1.5rem; margin-bottom: .75rem; }
.faq-item::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--panel); border-radius: var(--radius); transform: scaleY(0); transform-origin: center top; transition: transform var(--dur-panel, 650ms) var(--ease-out, ease-out); }
.faq-item.is-open::before { transform: scaleY(1); }
.faq-item h3 { font-size: var(--t-4); font-weight: 500; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; min-height: 3rem; padding: .25rem 0; color: var(--ink); background: transparent; text-align: left; font-family: var(--display); font-size: var(--t-4); font-weight: 500; line-height: 1.25; }
.faq-chevron { position: relative; flex: 0 0 1rem; width: 1rem; height: 1rem; margin-right: .2rem; }
.faq-chevron::before, .faq-chevron::after { content: ''; position: absolute; top: .45rem; left: .1rem; width: .6rem; height: 2px; background: currentColor; transform: rotate(45deg); transform-origin: center; transition: transform var(--dur-small, 240ms) var(--ease-out, ease-out); }
.faq-chevron::after { left: .5rem; transform: rotate(-45deg); }
.faq-question[aria-expanded='true'] .faq-chevron::before { transform: rotate(-45deg); }
.faq-question[aria-expanded='true'] .faq-chevron::after { transform: rotate(45deg); }
.faq-answer { padding-top: .65rem; max-width: 48ch; font-size: var(--body-size); line-height: 1.55; }
.faq-answer:not([hidden]) { animation: answer-register var(--dur-small, 240ms) var(--ease-out, ease-out) both; }
.motion-ready .faq-item { transition: translate var(--dur-panel, 650ms) var(--ease-out, ease-out); }
.motion-ready .faq-item:not(.in-view) { translate: 2rem 0; }
@keyframes answer-register { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.quote { padding-bottom: 6rem; }
.quote .chapter-title { max-width: 82%; }
.quote-coupon { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); width: 80%; margin: 3rem auto 0; border-radius: var(--radius); background: var(--accent); color: var(--field); isolation: isolate; }
.quote-coupon::before, .quote-coupon::after { content: ''; position: absolute; z-index: 1; left: 40%; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ground); transform: translateX(-50%); pointer-events: none; }
.quote-coupon::before { top: -.875rem; }
.quote-coupon::after { bottom: -.875rem; }
.quote-stub { position: relative; min-width: 0; display: flex; flex-direction: column; padding: clamp(1.5rem, 3.4vw, 3.5rem); transition: transform var(--dur-panel, 650ms) var(--ease-out, ease-out); }
.quote-stub h3 { font-family: var(--display); font-size: clamp(1.9375rem, 1rem + 2.4vw, 3.5rem); font-weight: 500; line-height: 1.05; max-width: 10ch; }
.quote-stub p { font-size: var(--body-size); max-width: 24ch; margin-top: auto; padding-top: 2rem; }
.quote-stub-rule { display: block; width: 3rem; height: 1px; background: rgb(245 247 243 / .55); margin-top: 2rem; }
.quote-perforation { position: absolute; z-index: 0; top: 1.5rem; bottom: 1.5rem; left: calc(40% - 1px); width: 2px; background: repeating-linear-gradient(to bottom, rgb(232 238 234 / .6) 0 4px, transparent 4px 12px); transform-origin: top; }
.quote-workspace { min-width: 0; padding: clamp(1.5rem, 3.2vw, 3.5rem); position: relative; z-index: 2; }
.quote-form { display: grid; gap: .9rem; }
.quote-field { position: relative; min-width: 0; background: var(--field); color: var(--ink); border: 2px solid transparent; border-radius: .5rem; padding: .65rem .85rem .55rem; transition: border-color var(--dur-small, 240ms) var(--ease-out, ease-out), transform var(--dur-small, 240ms) var(--ease-out, ease-out); }
.quote-field:focus-within { border-color: var(--ink); }
.quote-field label { display: block; font-family: var(--font-text); font-size: var(--t-2); font-weight: 600; line-height: 1.3; margin-bottom: .3rem; }
.quote-field input, .quote-field select, .quote-field textarea { display: block; width: 100%; min-width: 0; min-height: 2rem; padding: .15rem 0; border: 0; border-radius: .15rem; background: var(--field); color: var(--ink); font-family: var(--font-text); font-size: var(--t-2); line-height: 1.5; }
.quote-field textarea { min-height: 7rem; resize: vertical; scrollbar-width: thin; scrollbar-color: var(--accent) var(--field); }
.quote-field textarea::-webkit-scrollbar { width: 6px; }
.quote-field textarea::-webkit-scrollbar-track { background: var(--field); }
.quote-field textarea::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; }
.quote-field select { appearance: none; padding-right: 1.8rem; min-height: 2.5rem; }
.quote-select-field::after { content: ''; position: absolute; width: .55rem; height: .55rem; right: 1.1rem; top: 3rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); pointer-events: none; }
.quote-field.has-error { border-color: var(--ink); }
.quote-field.has-error label::after { content: ' — check this field'; font-weight: 400; }
.field-error { display: block; font-size: var(--t-2); line-height: 1.4; color: var(--ink); }
.field-error:empty { display: none; }
.field-error:not(:empty) { padding-top: .35rem; }
.quote-submit { width: 100%; background: var(--ink); color: var(--field); margin-top: .25rem; }
.quote-submit:hover { background: #102019; }
.quote-status { font-size: var(--t-2); line-height: 1.5; min-height: 3rem; margin-top: 1rem; overflow-wrap: anywhere; }
.quote-summary h3 { font-size: var(--t-5); line-height: 1.15; margin-bottom: 1.5rem; }
.summary-values { margin: 0; }
.summary-values > div { margin-bottom: 1.4rem; }
.summary-values dt { font-size: var(--t-2); font-weight: 600; margin-bottom: .3rem; }
.summary-values dd { margin: 0; font-size: var(--body-size); overflow-wrap: anywhere; white-space: pre-wrap; }
.summary-cargo dd { position: relative; font-family: var(--font-data); font-size: var(--t-4); font-weight: 500; font-feature-settings: 'tnum' 1, 'zero' 1; font-variant-numeric: tabular-nums; line-height: 1.4; }
.summary-note { font-size: var(--t-2); line-height: 1.5; padding-block: .5rem 1.5rem; }
.quote-summary .button { width: 100%; }
.quote-coupon.is-saved .quote-stub { transform: translateY(8px) rotate(-.5deg); }
.quote-coupon.is-saved .quote-summary { animation: summary-settle var(--dur-panel, 650ms) var(--ease-out, ease-out) both; }
.cargo-reels { display: inline-flex; max-width: 100%; overflow: clip; vertical-align: bottom; font-family: var(--font-data); font-size: var(--t-4); font-variant-numeric: tabular-nums; }
.cargo-reels:empty { display: none; }
.cargo-reels .cargo-digit { display: inline-block; width: 1ch; height: 1.4em; overflow: clip; }
.cargo-reels .cargo-strip { display: flex; flex-direction: column; line-height: 1.4em; }
.cargo-reels .cargo-strip span { display: block; height: 1.4em; flex: 0 0 1.4em; }
.cargo-reels.is-rolling + span { visibility: hidden; }
@keyframes summary-settle { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.foot { padding: 4.5rem var(--edge) 2rem; background: var(--deep); color: var(--ground); overflow: clip; }
.foot-mark { font-family: var(--display); font-size: 4rem; font-weight: 200; line-height: .95; letter-spacing: -.045em; white-space: nowrap; padding-block: .1em .2em; min-width: 0; }
.foot-mark-inner { display: inline-block; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #52685A; }
.foot-cols nav { min-width: 0; }
.foot-cols h2 { font-family: var(--font-text); font-size: var(--t-2); font-weight: 600; letter-spacing: 0; margin-bottom: .8rem; }
.foot-cols a { display: flex; align-items: center; width: fit-content; min-height: 2.75rem; text-decoration: none; font-size: var(--t-2); line-height: 1.5; padding-block: .4rem; }
.foot-cols a:hover { text-decoration: underline; }
.foot-storage { font-size: var(--t-2); line-height: 1.5; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #52685A; }
.motion-ready .foot-mark-inner, .motion-ready .foot-cols { transition: transform var(--dur-panel, 650ms) var(--ease-out, ease-out); }
.motion-ready .foot:not(.in-view) .foot-mark-inner { transform: translateY(-1rem); }
.motion-ready .foot:not(.in-view) .foot-cols { transform: translateY(-.5rem); }

@media (min-width: 1001px) {
  .service-icon-frame { position: absolute; right: calc(100% + 2rem); top: 0; width: 7rem; height: 5rem; margin: 0; }
}
@media (max-width: 1000px) {
  .quote-coupon { width: 90%; }
  .warehouse-card { width: 78vw; }
  .faq-list { margin-left: 20%; }
  .about-panel { gap: 2rem; }
}
@media (max-width: 700px) {
  .services { padding-bottom: 4rem; }
  .services-column { margin-left: var(--edge); width: 78%; padding-top: 1.5rem; }
  .service-entry { margin-bottom: 2.5rem; }
  .service-icon-frame { width: 5.5rem; height: 4rem; margin-bottom: .8rem; }
  .service-label { font-size: var(--t-4); }
  .sustainability-intro { display: block; padding-top: 1rem; }
  .freight-sequence { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; margin-top: 2.5rem; }
  .freight-marks { aspect-ratio: auto; min-height: 29rem; height: 100%; }
  .freight-mark { width: .45rem; height: .45rem; border-radius: 1px; }
  .freight-steps { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 0; }
  .freight-steps li { padding-top: .65rem; }
  .freight-steps h3 { font-size: var(--t-3); }
  .freight-steps p { max-width: 22ch; }
  .warehouse-card-stage { padding-top: 1.5rem; }
  .warehouse-card { width: 100%; margin-bottom: -2rem; padding: 1.5rem 1.5rem 0; transform: rotate(-.7deg); }
  .warehouse-card-heading { font-size: var(--t-4); margin-bottom: 1.25rem; }
  .warehouse-figure figcaption { font-size: var(--t-2); }
  .warehouse-promise { font-size: var(--t-4); margin-top: 1.5rem; }
  .warehouse-paper-tail { min-height: 5rem; }
  .motion-ready .warehouse-card:not(.in-view) { transform: translateY(3rem) scale(1.01); }
  .motion-ready .warehouse-card.in-view { transform: rotate(-.7deg); }
  .about { padding-bottom: 3rem; }
  .about-panel { display: flex; flex-direction: column; gap: 2rem; padding: 1.75rem 1.5rem 0; }
  .about-statement { font-size: var(--t-6); max-width: 12ch; }
  .about-copy { padding: 0; width: 100%; }
  .about-text-block + .about-text-block { margin-top: 2rem; }
  .about-text-block h3 { font-size: var(--t-4); margin-bottom: .65rem; }
  .about-copy .button { margin-top: 1.75rem; max-width: none; }
  .about-figure { width: 100%; }
  .about-mask { aspect-ratio: 1; }
  .about-figure figcaption { padding-bottom: 1.5rem; }
  .faq { padding-top: 1.5rem; padding-bottom: 3rem; }
  .faq-title { font-size: var(--t-6); max-width: 14ch; }
  .faq-list { margin: 2.5rem 0 0; }
  .faq-item { padding: .85rem 0; min-height: 10.5rem; margin-bottom: .5rem; }
  .faq-item::before { inset-inline: calc(-1 * var(--edge)); border-radius: 0; }
  .faq-question { font-size: var(--t-3); gap: 1rem; min-height: 3rem; }
  .faq-answer { max-width: 44ch; padding-top: .8rem; }
  .motion-ready .faq-item:not(.in-view) { translate: 1rem 0; }
  .quote { padding-bottom: 4rem; }
  .quote .chapter-title { font-size: var(--t-5); max-width: 88%; }
  .quote-coupon { width: 90%; grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; }
  .quote-stub { padding: 1.75rem 1.5rem 2rem; }
  .quote-stub h3 { font-size: var(--t-5); max-width: 12ch; }
  .quote-stub p { padding-top: 1.25rem; max-width: 28ch; }
  .quote-stub-rule { margin-top: 1.25rem; }
  .quote-perforation { position: relative; left: auto; top: auto; bottom: auto; width: calc(100% - 3rem); height: 2px; margin-inline: 1.5rem; background: repeating-linear-gradient(to right, rgb(232 238 234 / .6) 0 4px, transparent 4px 12px); }
  .quote-coupon::before, .quote-coupon::after { display: none; }
  .quote-workspace { padding: 1.75rem 1.5rem; }
  .quote-workspace::before, .quote-workspace::after { content: ''; position: absolute; width: 1.5rem; height: 1.5rem; background: var(--ground); border-radius: 50%; top: -.75rem; pointer-events: none; }
  .quote-workspace::before { left: -.75rem; }
  .quote-workspace::after { right: -.75rem; }
  .quote-field { padding: .65rem .7rem .55rem; }
  .quote-field label { font-size: var(--t-2); }
  .quote-submit { min-height: 3.5rem; }
  .quote-coupon.is-saved .quote-stub { transform: translateY(4px); }
  .quote-summary h3 { font-size: var(--t-4); }
  .foot { padding-top: 3rem; }
  .foot-mark { white-space: normal; font-size: 3rem; line-height: .9; }
  .foot-mark-inner { display: block; }
  .foot-mark-inner > span { display: block; width: max-content; max-width: 100%; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; margin-top: 2rem; padding-top: 1.75rem; }
  .foot-cols h2 { margin-bottom: .4rem; }
  .foot-storage { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .service-icon-cover { transform: translateX(105%) !important; }
  .service-copy { clip-path: none !important; translate: 0 0 !important; }
  .warehouse-card, .motion-ready .warehouse-card, .motion-ready .warehouse-card:not(.in-view) { transform: rotate(-1deg) !important; }
  .about-mask { clip-path: polygon(13% 0, 100% 0, 100% 87%, 87% 100%, 0 100%, 0 13%) !important; }
  .about-mask img { scale: 1.07 !important; }
  .faq-item { translate: 0 0 !important; }
  .quote-coupon.is-saved .quote-stub, .quote-summary, .foot-mark-inner, .foot-cols { transform: none !important; }
}