/* Honest Global PLC — inner pages
   Builds on style.css: same tokens, grid and type scale. */

:root { --field: #0E1524; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.on-paper { --field: rgba(10, 15, 26, 0.06); }

/* ---------------------------------------------------------------- masthead: current page */
.masthead__nav > a[aria-current="page"],
.nav-businesses.is-current > button { color: var(--fg); }
.masthead__nav > a[aria-current="page"]::after,
.nav-businesses.is-current > button::after { transform: scaleX(1); }
.bp-item[aria-current="page"] .bp-name,
.mobile-menu a[aria-current="page"] { color: var(--accent); }

/* ---------------------------------------------------------------- opener (a chapter opening) */
.opener { padding: clamp(18px, 2.4vw, 30px) 0 clamp(88px, 10vw, 152px); }
.opener__meta { padding-bottom: clamp(32px, 4.5vw, 64px); font-size: 0.8125rem; color: var(--fg-3); }
.opener__meta p:first-child { grid-column: 1 / 8; }
.opener__meta p:last-child { grid-column: 8 / 13; text-align: right; }
.opener__meta a { color: var(--fg-2); transition: color 0.25s var(--ease); }
.opener__meta a:hover { color: var(--fg); }
.opener__meta .sep { margin: 0 0.6em; }

.opener__head { align-items: end; }
.opener__num {
    grid-column: 1 / 4;
    overflow: hidden;
    overflow: clip;
    padding: 0.06em 0.14em 0.16em 0;
    margin: -0.06em -0.14em -0.16em 0;
    font: 400 clamp(6rem, 16vw, 14.5rem)/0.8 var(--serif);
    letter-spacing: -0.02em;
    color: var(--accent);
}
.opener__num .ch { display: inline-block; }
.opener__titles { grid-column: 4 / 13; }
.opener--plain .opener__titles { grid-column: 1 / 12; }
.opener__kicker { margin-bottom: 18px; font: 400 1.375rem/1.2 var(--serif); color: var(--fg-2); }
.opener__title { max-width: 15ch; }
.opener .rule-double { margin-top: clamp(28px, 3.5vw, 48px); }

.opener__body { padding-top: clamp(40px, 5vw, 72px); align-items: start; }
.opener__deck { grid-column: 1 / 7; max-width: 24ch; }
.opener__aside { grid-column: 8 / 13; }
.opener__aside .standfirst { margin-bottom: 30px; }
.opener__links { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.opener__aside .note { margin-top: 28px; }

.opener__left { grid-column: 1 / 7; }
.opener__left .opener__aside { margin-top: clamp(32px, 4vw, 52px); }
.opener__figure { grid-column: 8 / 13; }
.opener__figure .seal { width: min(100%, 440px); margin-left: auto; }
.opener__figure .globe { width: min(100%, 520px); margin-left: auto; }
.opener__figure .caption { text-align: right; }
.opener__wide { margin-top: var(--sp-block); padding-inline: var(--margin); }
.opener__wide .caption { margin-top: 16px; }

/* ---------------------------------------------------------------- shared section parts */
.section-intro { align-items: end; margin-bottom: var(--sp-block); }
.section-intro__title { grid-column: 1 / 8; }
.section-intro__lead { grid-column: 9 / 13; }
.section-intro__lead .standfirst { margin-bottom: 24px; }
.section-intro__lead .note { margin-top: 18px; }

.plate-fig { position: relative; aspect-ratio: 5 / 6; background: var(--ink-raised); }
.plate-fig > svg { position: absolute; top: 8%; left: 10%; width: 80%; height: 84%; }

/* Engraved drawings */
.engraving { color: var(--paper); overflow: visible; }
.engraving .e-line { fill: none; stroke: currentColor; stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: round; }
.engraving .e-faint { fill: none; stroke: currentColor; stroke-opacity: 0.38; stroke-width: 0.6; stroke-linecap: round; }
.engraving .e-hatch { fill: none; stroke: var(--accent); stroke-opacity: 0.55; stroke-width: 0.55; }
.engraving .e-block { fill: none; stroke: currentColor; stroke-opacity: 0.5; stroke-width: 0.6; }
.engraving text { fill: currentColor; }
.engraving .e-num { font: 400 9px var(--serif); fill: var(--accent); }
.engraving .e-word { font: 400 12px var(--serif); letter-spacing: 2.5px; }
.engraving .e-word-it { font: 400 13px var(--serif); }
.engraving .e-big { font: 400 19px var(--serif); }

.engraving .e-label { font: 500 7.5px var(--sans); letter-spacing: 2.4px; text-transform: uppercase; fill: currentColor; fill-opacity: 0.6; }

/* Coffee sack stamp */
.sack .sack__weave { stroke: none; }
.sack .sack__stamp text { fill: var(--accent); }
.sack .s-big { font: 600 15px var(--sans); letter-spacing: 3px; }
.sack .s-it { font: 400 21px var(--serif); }
.sack .s-small { font: 500 6.5px var(--sans); letter-spacing: 1.6px; }

/* Plates holding a drawing */
.car-plate { position: relative; aspect-ratio: 640 / 250; overflow: hidden; background: var(--ink-raised); }
.car-plate > svg { position: absolute; top: 8%; left: 4%; width: 92%; height: 84%; }

.auto__plate { margin-bottom: var(--sp-block); }
.auto__plate .car-plate { grid-column: 1 / -1; }
.auto__text .note { margin-top: 22px; }

/* Paired drawings (imports and exports) */
.duo { row-gap: var(--gutter); }
.duo__item {
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3vw, 44px);
    background: var(--ink-raised);
    transition: background-color 0.45s var(--ease);
}
.duo__art { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 26px; }
.duo__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.duo__dir { font-size: 0.875rem; color: var(--fg-3); }
.duo__dir em { margin: 0 0.35em; font-family: var(--serif); color: var(--accent); }
.duo__title { margin-top: 10px; font: 400 clamp(2.75rem, 5.5vw, 5rem)/0.95 var(--serif); letter-spacing: -0.025em; color: var(--fg); }
.duo__line { margin-top: 14px; color: var(--fg-2); }
.duo__item:hover { background: #111A2B; }
.duo__item:hover .duo__title { color: var(--accent); }

/* Visual index of the three businesses */
.mini-index { row-gap: 32px; }
.mini-index li { grid-column: span 4; }
.mini { display: block; }
.mini__art { position: relative; display: block; aspect-ratio: 5 / 4; background: var(--ink-raised); transition: background-color 0.4s var(--ease); }
.mini__art img { position: absolute; top: 12%; left: 12%; width: 76%; height: 76%; object-fit: contain; transition: transform 0.8s var(--ease); }
.mini__num { display: inline-block; margin: 16px 0.6em 0 0; font: 400 0.9375rem var(--serif); color: var(--accent); }
.mini__name { font: 400 clamp(1.125rem, 1.5vw, 1.375rem)/1.2 var(--serif); color: var(--fg); }
.mini:hover .mini__art { background: #111A2B; }
.mini:hover .mini__art img { transform: scale(1.04); }
.mini:hover .mini__name { color: var(--accent); }

.legend-list { columns: 2; column-gap: var(--gutter); margin-top: 20px; }
.legend-list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    break-inside: avoid;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--fg-2);
}
.legend-list li span { min-width: 1.4em; font: 400 0.875rem var(--serif); color: var(--accent); }

/* ---------------------------------------------------------------- trading: two directions */
.doors { row-gap: var(--gutter); margin-bottom: var(--sp-section); }
.door {
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    min-height: clamp(320px, 34vw, 470px);
    padding: clamp(28px, 3.4vw, 52px);
    background: var(--ink-raised);
    transition: background-color 0.45s var(--ease);
}
.door__dir { font-size: 0.875rem; color: var(--fg-3); }
.door__dir em { margin: 0 0.35em; font-family: var(--serif); color: var(--accent); }
.door__title { margin-top: auto; font: 400 clamp(3.25rem, 7.5vw, 7rem)/0.95 var(--serif); letter-spacing: -0.025em; color: var(--fg); }
.door__line { min-height: 3.3em; margin-top: 18px; max-width: 34ch; color: var(--fg-2); }
.door__cta { margin-top: 28px; font-size: 0.9375rem; color: var(--fg); }
.door__cta .arr { display: inline-block; margin-left: 0.5em; transition: transform 0.35s var(--ease); }
.door:hover { background: #111A2B; }
.door:hover .door__title { color: var(--accent); }
.door:hover .door__cta .arr { transform: translateX(4px); }

/* ---------------------------------------------------------------- trading: coffee */
.coffee__body { align-items: start; margin-bottom: var(--sp-section); }
.coffee__figure { grid-column: 1 / 6; }
.coffee__plate { aspect-ratio: 4 / 5; }
.coffee__plate > svg { top: 9%; left: 13%; width: 74%; height: 82%; }
.coffee__sheet { grid-column: 7 / 13; }
.coffee__sheet .kicker { margin-bottom: 8px; }
.coffee__sheet .note { margin-top: 18px; }

/* ---------------------------------------------------------------- forms */
.request { align-items: start; }
.request__intro { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 40px); }
.request__intro .standfirst { margin: 26px 0 0; }
.request__intro .note { margin-top: 20px; }
.request__form { grid-column: 6 / 13; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gutter); }
.form__section { grid-column: 1 / -1; margin-top: 18px; font: 400 1.25rem/1.2 var(--serif); color: var(--fg-2); }
.form__section:first-child { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { padding: 0; font-size: 0.8125rem; color: var(--fg-3); }
.field legend { margin-bottom: 9px; }
.field .req { margin-left: 0.25em; color: var(--accent); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 0;
    background: var(--field);
    color: var(--fg);
    font: 400 1rem/1.4 var(--sans);
    transition: border-color 0.3s var(--ease);
    -webkit-appearance: none;
    appearance: none;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); opacity: 0.7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: #C9826F; }
.field select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F5F0E6' stroke-opacity='.65' stroke-width='1.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}
.field select option { background: #0E1524; color: #F5F0E6; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice span {
    display: inline-block;
    padding: 11px 18px;
    border: 1px solid transparent;
    background: var(--field);
    font-size: 0.9375rem;
    color: var(--fg-2);
    cursor: pointer;
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.choice input:checked + span { border-color: var(--accent); color: var(--fg); }
.choice input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 3px; }
.consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 12px; font-size: 0.875rem; line-height: 1.5; color: var(--fg-2); }
.consent input {
    flex: none;
    width: 18px; height: 18px;
    margin-top: 2px;
    border: 1px solid var(--rule-strong);
    background: var(--field);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.consent input:checked {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%230A0F1A' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.consent input[aria-invalid="true"] { border-color: #C9826F; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 8px; }
.form__note { max-width: 46ch; font-size: 0.8125rem; color: var(--fg-3); }
.form__status { grid-column: 1 / -1; font: 400 1.0625rem/1.5 var(--serif); color: var(--fg); }
.form__status:empty { display: none; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.btn-solid {
    display: inline-flex;
    align-items: baseline;
    gap: 0.7em;
    padding: 17px 28px;
    background: var(--paper);
    color: var(--ink);
    font: 500 0.9375rem/1 var(--sans);
    transition: background-color 0.3s var(--ease);
}
.btn-solid:hover { background: #FFFFFF; }
.btn-solid .arr { display: inline-block; transition: transform 0.35s var(--ease); }
.btn-solid:hover .arr { transform: translateX(4px); }
.btn-solid[disabled] { opacity: 0.6; cursor: progress; }

/* ---------------------------------------------------------------- automobiles: marque explorer */
.mx { align-items: start; margin-bottom: var(--sp-section); }
.mx__list { grid-column: 1 / 7; }
.mx-group + .mx-group { margin-top: 48px; }
.mx-group__name { margin-bottom: 12px; font-size: 0.8125rem; color: var(--fg-3); }
.mx-marque {
    display: block;
    width: 100%;
    padding: 5px 0;
    text-align: left;
    font: 400 clamp(1.5rem, 2.5vw, 2.375rem)/1.15 var(--serif);
    letter-spacing: -0.01em;
    color: var(--fg-3);
    transition: color 0.3s var(--ease);
}
.mx-marque:hover { color: var(--fg-2); }
.mx-marque.is-active { color: var(--fg); color: var(--accent); }
.mx__panel {
    grid-column: 8 / 13;
    position: sticky;
    top: calc(var(--header-h) + 40px);
    min-height: 460px;
    display: flex;
    padding: clamp(28px, 3vw, 44px);
    background: var(--ink-raised);
}
.mx-panel__inner { display: flex; flex-direction: column; width: 100%; }
.mx-panel__group { font-size: 0.8125rem; color: var(--fg-3); }
.mx-panel__name { margin: 20px 0 28px; font: 400 clamp(2.5rem, 4.6vw, 4.5rem)/1 var(--serif); letter-spacing: -0.02em; color: var(--fg); }
.mx-panel__label { margin-bottom: 10px; font-size: 0.8125rem; color: var(--fg-3); }
.mx-panel__models { font: 400 1.25rem/1.6 var(--serif); color: var(--fg-2); }
.mx-panel__models .sep { color: var(--fg-3); }
.mx-panel__note { margin-top: 18px; }
.mx-panel__cta { margin-top: auto; padding-top: 32px; }

/* ---------------------------------------------------------------- automobiles: process */
.process { row-gap: 40px; margin-bottom: var(--sp-section); }
.step { grid-column: span 4; }
.step__art { display: block; width: 112px; height: 112px; margin-bottom: 20px; }
.step__num { display: block; font: 400 clamp(2rem, 3vw, 2.75rem)/1 var(--serif); color: var(--accent); }
.step__title { margin: 18px 0 12px; font: 400 1.5rem/1.2 var(--serif); color: var(--fg); }
.step p { max-width: 34ch; color: var(--fg-2); }
.process__note { grid-column: 1 / 9; }

/* ---------------------------------------------------------------- oil */
.sheet { row-gap: 40px; margin-bottom: var(--sp-section); }
.sheet__fig { grid-column: span 6; }
.sheet__plan { aspect-ratio: 5 / 6; }
.sheet__plan > svg { top: 20%; height: 60%; }
.label-detail { align-items: start; margin-bottom: var(--sp-section); }
.label-detail__fig { grid-column: 1 / 7; }
.label-detail__text { grid-column: 8 / 13; }
.label-detail__text .note { margin-top: 24px; }

/* ---------------------------------------------------------------- about */
.principles { row-gap: 40px; margin-bottom: var(--sp-section); }
.principle { grid-column: span 4; }
.principle h3 { margin-bottom: 16px; font: 400 clamp(1.75rem, 2.6vw, 2.375rem)/1.1 var(--serif); color: var(--fg); }
.principle h3 em { color: var(--accent); }
.principle p { max-width: 32ch; color: var(--fg-2); }

.portfolio { row-gap: 40px; margin-bottom: var(--sp-section); }
.portfolio__item { grid-column: span 4; display: block; }
.portfolio__art { position: relative; display: block; aspect-ratio: 16 / 9; margin-bottom: 22px; background: var(--ink-raised); }
.portfolio__art img { position: absolute; top: 12%; left: 12%; width: 76%; height: 76%; object-fit: contain; transition: transform 0.8s var(--ease); }
.portfolio__item:hover .portfolio__art img { transform: scale(1.04); }
.portfolio__num { font: 400 1rem var(--serif); color: var(--accent); }
.portfolio__name { display: block; margin: 8px 0 10px; font: 400 clamp(2rem, 3.4vw, 3.25rem)/1.05 var(--serif); letter-spacing: -0.015em; color: var(--fg); }
.portfolio__line { display: block; max-width: 40ch; color: var(--fg-2); }
.portfolio__go { display: inline-block; margin-top: 16px; font-size: 0.9375rem; color: var(--fg); }
.portfolio__go .arr { display: inline-block; margin-left: 0.5em; transition: transform 0.35s var(--ease); }
.portfolio__item:hover .portfolio__name { color: var(--accent); }
.portfolio__item:hover .portfolio__go .arr { transform: translateX(4px); }

.letter { padding-top: 1px; padding-bottom: var(--sp-section); margin-bottom: var(--sp-section); }
.letter .chapter__head { margin-top: var(--sp-block); }

/* ---------------------------------------------------------------- contact */
.contact-grid { align-items: start; margin-bottom: var(--sp-section); }
.contact-details { grid-column: 1 / 5; display: grid; gap: 34px; }
.contact-details dt { margin-bottom: 8px; font-size: 0.8125rem; color: var(--fg-3); }
.contact-details dd { font: 400 1.125rem/1.45 var(--serif); color: var(--fg); }
.contact-details dd.tbc { color: var(--accent); color: var(--fg-2); }
.contact-details dd a { display: block; width: fit-content; margin-bottom: 6px; font: 400 1rem/1.45 var(--sans); color: var(--fg-2); transition: color 0.25s var(--ease); }
.contact-details dd a:hover { color: var(--fg); }
.contact-form { grid-column: 6 / 13; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
    .request__intro { grid-column: 1 / -1; position: static; margin-bottom: 56px; }
    .request__form { grid-column: 1 / -1; }
    .contact-details { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 56px; }
    .contact-form { grid-column: 1 / -1; }
    .mx__list { grid-column: 1 / 7; }
    .mx__panel { grid-column: 7 / 13; }
}

@media (max-width: 860px) {
    .opener__meta p:first-child, .opener__meta p:last-child { grid-column: 1 / -1; text-align: left; }
    .opener__meta p:last-child { margin-top: 4px; }
    .opener__num { grid-column: 1 / -1; margin-bottom: 14px; font-size: clamp(5rem, 26vw, 9rem); }
    .opener__titles, .opener--plain .opener__titles { grid-column: 1 / -1; }
    .opener__deck, .opener__aside, .opener__left { grid-column: 1 / -1; }
    .opener__aside, .opener__left .opener__aside { margin-top: 28px; }
    .opener__figure { grid-column: 1 / -1; margin-top: 44px; }
    .opener__figure .seal { margin-inline: auto; }

    .section-intro__title, .section-intro__lead { grid-column: 1 / -1; }
    .section-intro__lead { margin-top: 26px; }

    .door { grid-column: 1 / -1; min-height: 260px; }
    .duo__item { grid-column: 1 / -1; }
    .opener__figure .globe { margin-inline: auto; }
    .opener__figure .caption { text-align: left; }
    .coffee__figure, .coffee__sheet { grid-column: 1 / -1; }
    .coffee__sheet { margin-top: 48px; }
    .legend-list { columns: 1; }

    .form { grid-template-columns: minmax(0, 1fr); }
    .contact-details { grid-template-columns: minmax(0, 1fr); }

    .mx__list { grid-column: 1 / -1; }
    .mx__panel { grid-column: 1 / -1; position: static; min-height: 0; margin: 10px 0 22px; }
    .mx-marque { padding: 7px 0; }
    .step, .process__note { grid-column: 1 / -1; }

    .sheet__fig, .label-detail__fig, .label-detail__text { grid-column: 1 / -1; }
    .sheet__plan { aspect-ratio: 3 / 2; }
    .sheet__plan > svg { top: 8%; height: 84%; }
    .label-detail__text { margin-top: 48px; }

    .principle, .portfolio__item { grid-column: 1 / -1; }
}