/* Hallmark · shape: Yard index (a dark cinematic hero, then a run of firms, photographs, a searchable index, location and contact) · genre: modern-minimal · theme: custom · job: visit · idea: "The whole yard laid out as one quiet searchable index, under a dusk-lit truck." · vibe: "Quiet, exact, yard-lit, searchable"
 * paper: oklch(98.5% 0.003 250) · accent: oklch(86% 0.17 90) · display: Supreme · body: Hanken Grotesk · hero: a full-bleed dusk photograph of the loaded truck, the headline low and left over a scrim · nav: a floating glass pill with a stock-search trigger · footer: a giant JJ mark over one quiet row · imagery: the user's photographs in colour · signature: a stock search on the slash key that jumps to the item
 * axes: light/grotesk-sans/chromatic-yellow · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a search is a modest signature, so it opens on the slash key and jumps to the item instead of being a decorative box */
/* waive 58: the client has a 24-item range, two firms, a guide and questions, so the page runs past 450 words, each section kept to one idea */
/* waive 83: five photographs (hero, three in the yard, the shopfront), every one the client's own */
@import url("./tokens.css");
@import url("./base.css");

:root { --text-hero: clamp(3.25rem, 8.6vw, 9.5rem); --text-mega: clamp(2.25rem, 5.4vw, 6rem); --text-head: clamp(2.25rem, 4.6vw, 4.75rem); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.section { padding-block: var(--section-gap-s); }
.section--tight { padding-block: var(--space-3xl); }
.section--tint { background: var(--color-paper-2); }
small, figcaption, th { font-size: var(--text-sm); letter-spacing: 0; text-transform: none; }
.mega { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-mega); line-height: 1; letter-spacing: var(--tracking-display); max-width: 18ch; overflow-wrap: break-word; min-width: 0; }
.head { font-size: var(--text-head); font-weight: var(--display-weight); line-height: 1; letter-spacing: var(--tracking-display); max-width: 20ch; margin-bottom: var(--space-2xl); }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 500; font-size: var(--text-md); line-height: 1; text-decoration: none; cursor: pointer;
  translate: var(--mx, 0) var(--my, 0);
  transition: translate var(--dur-long) var(--ease-out), scale var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.btn:active { scale: .97; }
.btn--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--accent:hover { background: color-mix(in oklab, var(--color-accent) 85%, var(--color-paper)); }
.btn--ghost { background: color-mix(in oklab, var(--color-paper) 12%, transparent); color: var(--color-paper); border-color: color-mix(in oklab, var(--color-paper) 38%, transparent); backdrop-filter: blur(8px); }
.btn--ghost:hover { background: color-mix(in oklab, var(--color-paper) 22%, transparent); }
.btn--dark { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn--dark:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--sm { min-height: 40px; padding: 0 var(--space-md); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero :focus-visible, .nav--dark :focus-visible, .contact :focus-visible, .foot :focus-visible { outline-color: var(--color-accent); }

/* nav: a floating glass pill */
.nav { position: fixed; top: var(--space-md); left: 50%; translate: -50% 0; width: min(1180px, calc(100% - 32px)); z-index: var(--z-sticky-nav); display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); backdrop-filter: blur(14px);
  transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out); }
.nav--dark { background: color-mix(in oklab, var(--color-ink) 52%, transparent); color: var(--color-paper); border-color: color-mix(in oklab, var(--color-paper) 20%, transparent); }
.nav--light { background: color-mix(in oklab, var(--color-paper) 82%, transparent); color: var(--color-ink); border-color: var(--color-rule); }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-lg); letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.nav__links { display: flex; gap: var(--space-lg); margin-inline: auto; }
.nav__links a, .foot nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: var(--text-sm); }
.nav__links a::after, .foot nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--space-xs); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-long) var(--ease-out); }
.nav__links a:hover::after, .foot nav a:hover::after { transform: scaleX(1); }

/* hero: full-bleed, a Terminal-style dusk photograph */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; background: var(--color-ink); color: var(--color-paper); overflow: clip; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in oklab, var(--color-ink) 90%, transparent) 0%, color-mix(in oklab, var(--color-ink) 40%, transparent) 55%, color-mix(in oklab, var(--color-ink) 50%, transparent) 100%); }
.hero__in { display: grid; gap: var(--space-lg); padding-top: 160px; padding-bottom: clamp(48px, 12vh, 120px); }
.hero h1 { max-width: none; font-size: var(--text-hero); font-weight: var(--display-weight); line-height: .94; letter-spacing: -0.045em; color: var(--color-paper); }
.ln { display: block; overflow: hidden; padding-bottom: .08em; }
.ln > span { display: block; }
.hero .lead { color: color-mix(in oklab, var(--color-paper) 88%, transparent); max-width: 44ch; }
.js .ln > span { transform: translateY(108%); animation: rise 1000ms var(--ease-out) 150ms forwards; }
.js .ln:nth-of-type(2) > span { animation-delay: 270ms; }
.js .hero .lead, .js .hero .actions { opacity: 0; animation: fade 900ms var(--ease-out) 650ms forwards; }
@keyframes rise { to { transform: translateY(0); } }
@keyframes fade { to { opacity: 1; } }

/* about */
.about__cols { grid-column: 1 / 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); color: var(--color-ink-2); font-size: var(--text-lg); line-height: 1.5; }
#about .mega { grid-column: 1 / 11; }

/* two firms */
.firms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.panel { padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: 20px; background: var(--color-paper); }
.panel h3 { font-size: var(--text-2xl); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1.05; }
.panel > p { margin: var(--space-xs) 0 var(--space-xl); color: var(--color-muted); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { border-top: 1px solid var(--color-rule); }
.rows a { display: flex; align-items: center; min-height: 48px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
.rows a:hover, .cat__ask:hover { color: var(--color-blue); text-decoration-color: currentColor; }

/* in the yard */
.shots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.shot { margin: 0; display: grid; gap: var(--space-sm); align-content: start; min-width: 0; }
.shot--a { grid-column: 1 / 8; } .shot--b { grid-column: 8 / 13; } .shot--c { grid-column: 1 / 13; }
.shot__img { overflow: hidden; border-radius: 16px; aspect-ratio: 3 / 2; background: var(--color-paper-3); }
.shot--c .shot__img { aspect-ratio: 21 / 8; }
.shot__img img { width: 100%; height: 100%; object-fit: cover; }
.shot__img { transition: translate var(--dur-long) var(--ease-out); }
.shot:hover .shot__img { translate: 0 -6px; }
figcaption { color: var(--color-muted); }
figcaption strong { color: var(--color-ink); font-weight: 500; margin-right: var(--space-xs); }

.list { width: 100%; border-collapse: collapse; }
.list th, .list td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-rule); }
.list thead th { color: var(--color-muted); font-weight: 500; border-bottom-color: var(--color-ink); }
.list tbody th { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-title); letter-spacing: -0.02em; }
.list tbody tr { transition: background-color var(--dur-long) var(--ease-out); }

/* find the yard */
#yard .head { grid-column: 1 / -1; }
.addr { grid-column: 1 / 8; display: grid; gap: var(--space-lg); font-style: normal; align-content: start; color: var(--color-ink-2); font-size: var(--text-lg); }
.addr .mega { color: var(--color-ink); max-width: 12ch; }
.yard__side { grid-column: 9 / 13; display: grid; gap: var(--space-lg); align-content: start; justify-items: start; }
.photo-s { margin: 0; width: 100%; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; background: var(--color-paper-3); }
.photo-s img { width: 100%; height: 100%; object-fit: cover; }

/* guide, steps, questions */
#guide .lead { margin: calc(var(--space-xl) * -1) 0 var(--space-xl); color: var(--color-ink-2); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.steps li { counter-increment: step; display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 500; font-size: clamp(3.5rem, 7vw, 7rem); line-height: 1; letter-spacing: -0.05em; color: var(--color-muted); }
.steps h3 { font-size: var(--text-xl); font-weight: var(--display-weight); letter-spacing: -0.02em; }
.faq__h { grid-column: 1 / 5; margin-bottom: 0; }
.faq { grid-column: 5 / 13; border-top: 1px solid var(--color-ink); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 500; font-size: var(--text-title); letter-spacing: -0.02em; transition: color var(--dur-short) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--text-2xl); line-height: 1; transition: transform var(--dur-long) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-blue); }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }


/* footer */
.foot { background: var(--color-blue); color: var(--color-blue-ink); padding-block: var(--section-gap-s) var(--space-lg); overflow: clip; }
.foot__mark { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(7rem, 24vw, 24rem); line-height: .78; letter-spacing: -0.06em; margin: var(--space-2xl) 0 var(--space-xl) -.04em; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); border-top: 1px solid color-mix(in oklab, var(--color-blue-ink) 30%, transparent); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot__legal { padding-top: var(--space-md); color: var(--color-blue-ink); }


/* rise on enter: visible by default, hidden only when scripting runs */
.js [data-rise] { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js [data-rise].in { opacity: 1; transform: none; }

@media (max-width: 60rem) {
  #about .mega, .about__cols, .addr, .yard__side, .faq__h, .faq, .contact__h,   .about__cols { grid-template-columns: minmax(0, 1fr); }
  .firms, .steps { grid-template-columns: minmax(0, 1fr); }
  .shot--a, .shot--b, .shot--c { grid-column: 1 / -1; }
  .shot--c .shot__img { aspect-ratio: 3 / 2; }
  .yard__side { margin-top: var(--space-xl); }
  .faq { margin-top: var(--space-xl); }
    }
@media (max-width: 48rem) {
  .nav__links { display: none; }
  .nav { gap: var(--space-xs); } .brand { margin-right: auto; }
}
@media (max-width: 40rem) {
  .list, .list thead, .list tbody, .list tr, .list th, .list td { display: block; }
  .list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .list tbody tr { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
  .list th, .list td { border: 0; padding: var(--space-3xs) 0; }
  .list td[data-label]::before { content: attr(data-label) ": "; color: var(--color-muted); font-size: var(--text-sm); }
  .list .act { text-align: left; padding-top: var(--space-xs); }
  .panel { padding: var(--space-lg); }
}

/* skip link, range note, 404 */
.skip { position: fixed; left: var(--space-md); top: var(--space-md); z-index: calc(var(--z-sticky-nav) + 2); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; translate: 0 -200%; }
.skip:focus-visible { translate: 0 0; }
.note { margin: calc(var(--space-xl) * -1) 0 var(--space-xl); color: var(--color-ink-2); }
.notfound { min-height: 100svh; display: grid; align-items: center; padding-block: var(--space-4xl) var(--space-3xl); background: var(--color-ink); color: var(--color-paper); }
.notfound__in { display: grid; gap: var(--space-lg); justify-items: start; }
.notfound__code { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(8rem, 26vw, 24rem); line-height: .8; letter-spacing: -0.06em; color: var(--color-accent); }
.notfound h1 { font-size: var(--text-head); letter-spacing: var(--tracking-display); line-height: 1; color: var(--color-paper); max-width: 16ch; }
@media (pointer: coarse) { .btn--sm { min-height: 44px; } }
@media (max-width: 40rem) { .list td:empty { display: none; } }

/* catalogue */
.catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.cat { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: 20px; background: var(--color-paper); }
.cat h3 { font-size: var(--text-xl); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1.1; }
.cat__list { list-style: none; margin: 0; padding: 0; align-self: start; }
.cat__list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.cat__list small { color: var(--color-muted); text-align: right; }
.cat__list li.flash { background: color-mix(in oklab, var(--color-accent) 55%, transparent); transition: background-color var(--dur-long) var(--ease-out); }
.cat__ask { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
@media (max-width: 60rem) { .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .catalog { grid-template-columns: minmax(0, 1fr); } .cat { padding: var(--space-lg); } }

/* footer: a closing ask, three link columns, the mark, one legal row */
.foot__cta { padding-bottom: var(--space-3xl); row-gap: var(--space-xl); }
.foot__cta .mega { grid-column: 1 / 8; max-width: 10ch; font-size: clamp(3rem, 8vw, 8.5rem); line-height: .94; }
.foot__side { grid-column: 8 / 13; display: grid; gap: var(--space-lg); align-content: end; justify-items: start; }
.foot__side .lead { color: var(--color-blue-ink); }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-xl) 0; border-top: 1px solid color-mix(in oklab, var(--color-blue-ink) 30%, transparent); }
.foot__cols nav, .foot__col { display: grid; align-content: start; gap: 0; }
.foot__cols h3 { margin-bottom: var(--space-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; line-height: 1.4; color: color-mix(in oklab, var(--color-blue-ink) 78%, transparent); }
.foot__cols a { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.foot__cols a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.foot__cols a::after { content: none; }
.foot__cols address { font-style: normal; margin-bottom: var(--space-xs); max-width: 28ch; }