/* ==========================================================================
   TDK Holdings Group — one-page site
   A deliberately single-theme brand palette: warm near-white ground,
   deep green as ink and as flood, one gold accent reserved for dark surfaces.
   ========================================================================== */

:root {
  color-scheme: light;

  --ground:     #FAFAF7;
  --surface:    #FFFFFF;
  --tint:       #F3F5F1;
  --band-tint:  #E9EEE8;

  --ink:      #121714;
  --ink-2:    #434B46;
  --muted:    #676E69;

  --hair:     #E3E2DB;
  --hair-2:   #EDEBE4;
  --rule:     #D5DBD4;

  --green:    #002B22;
  --green-2:  #143A30;
  --gold:     #E5C977;

  --on-dark:      #FAFAF7;
  --on-dark-soft: rgba(250, 250, 247, 0.78);
  --on-dark-dim:  rgba(250, 250, 247, 0.58);
  --on-dark-hair: rgba(250, 250, 247, 0.20);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --shell: 1220px;
  --gutter: clamp(20px, 5vw, 80px);
  --lift: 0 20px 46px -32px rgba(18, 23, 20, 0.55);
  --lift-hi: 0 26px 56px -30px rgba(18, 23, 20, 0.6);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Every line drawing shares one stroke weight and one join style. */
svg use { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--green);
  color: var(--on-dark);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- shared type ---------------------------------------------------------- */

.eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(38px, 5.4vw, 58px);
  line-height: 1.1;
}
h1 em { font-style: italic; font-weight: 500; }

h2 { font-size: clamp(28px, 3.7vw, 40px); line-height: 1.16; }
h3 { font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; }

p { margin: 0; }

/* --- top bar -------------------------------------------------------------- */

.topbar {
  border-bottom: 1px solid var(--hair);
  background: var(--ground);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.mark-letters {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-right: -0.14em; /* cancel the trailing space after the K */
  line-height: 1;
  color: var(--green);
}
.mark-rule { width: 1px; height: 25px; background: #CFD3CC; }
.mark-words {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.topnav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.topnav a { text-decoration: none; transition: color 0.18s ease; }
.topnav a:hover { color: var(--green); }

/* The mobile header is a disclosure: mark on the left, Menu on the right, and
   the nav drops below the bar as a panel. The collapsed state is keyed off the
   button's own aria-expanded, so the styling and the announced state cannot
   drift apart. Because the panel leaves the flow, the bar stays one 74px row
   and can go on being sticky. */
.navtoggle {
  display: none;
  align-items: center;
  /* 12px around a 20px icon makes a 44px tap target. The negative margin pulls
     the icon back out to the gutter so it lines up with the edge of the text
     below it. The type properties went with the visible label. */
  margin-right: -12px;
  padding: 12px;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.navtoggle:hover { color: var(--green); }
.navtoggle-icon { display: none; }
.navtoggle[aria-expanded="false"] .navtoggle-open { display: block; }
.navtoggle[aria-expanded="true"] .navtoggle-shut { display: block; }

@media (max-width: 720px) {
  .navtoggle { display: inline-flex; }

  .topnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 2px var(--gutter) 12px;
    font-size: 11px;
    background: var(--ground);
    border-bottom: 1px solid var(--hair);
  }
  /* 14px of padding on an 11px line clears a 40px tap target. */
  .topnav a { padding: 14px 0; border-top: 1px solid var(--hair); }
  .topnav a:first-child { border-top: 0; }

  .navtoggle[aria-expanded="false"] + .topnav { display: none; }
}

/* --- hero ----------------------------------------------------------------- */

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 78px);
}

.hero-copy { display: flex; flex-direction: column; gap: 24px; }

.lede {
  max-width: 50ch;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink-2);
}

/* Stats replace the old call-to-action pair: the rating is stated once,
   here, rather than repeated against every storefront.
   The three sit on one line, each divider rule centred in its own space —
   so the separation comes from the padding alone, never padding plus gap. */
.stats {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.stat { flex: 1 1 0; min-width: 0; }
.stat + .stat {
  margin-left: clamp(16px, 2.2vw, 28px);
  padding-left: clamp(16px, 2.2vw, 28px);
  border-left: 1px solid var(--hair);
}

.stat dt {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat dd { margin: 8px 0 0; display: flex; align-items: center; gap: 7px; }

.stat-figure {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* One large star in the same gold used for "Five marketplaces" and the How we
   work glyphs, so the accent reads as one colour across the page. */
.stars { display: inline-flex; color: var(--gold); }
.stars svg { display: block; }

.stat-note { margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* On a phone the three stay side by side — stacked, they ran taller than the
   rack above them. The type and the dividers' padding tighten to fit. */
@media (max-width: 560px) {
  .stat + .stat { margin-left: 10px; padding-left: 10px; }
  .stat dt { letter-spacing: 0.12em; }
  .stat dd { margin-top: 6px; gap: 5px; }
  .stat-figure { font-size: 25px; }
  .stars svg { width: 19px; height: 19px; }
  .stat-note { margin-top: 6px; font-size: 11.5px; line-height: 1.45; }
}

/* --- storefront rack ------------------------------------------------------ */

.rack {
  background: var(--surface);
  border: 1px solid var(--hair);
  box-shadow: var(--lift);
  transition: box-shadow 0.25s ease;
}
.rack:hover { box-shadow: var(--lift-hi); }

/* The one saturated block above the fold. Everything else in the hero is
   near-white, so this is what stops the page loading colourless. */
.rack-head {
  padding: 16px 24px;
  background: var(--green);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.rack-head .eyebrow { color: var(--on-dark); }
.rack-count { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--gold); }

.store {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 17px 24px;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  transition: background 0.18s ease;
}
/* The green header already gives the first row a hard top edge — a rule there
   as well would read as a stray line under the bar. */
.store:first-of-type { border-top: 0; }
/* Each row carries its marketplace's own colour rather than an assigned one,
   and its own standing line where there is a true one to state — so the rows
   differ by fact, not by decoration. Every mark clears 4.5:1 on white and on
   its own hover tint. */
.store-vinted  { --sf: #0D7A80; --sf-tint: #EAF5F5; }
.store-ebay    { --sf: #1E5FA8; --sf-tint: #EDF2FA; }
.store-mercari { --sf: #B7332E; --sf-tint: #FBEEED; }
.store-etsy    { --sf: #B8480F; --sf-tint: #FDF0E8; }
.store-avon    { --sf: #A8246B; --sf-tint: #FAECF3; }

.store:hover { background: var(--sf-tint, #EFF5F1); }

.store-glyph { display: block; color: var(--sf, #35594C); transition: color 0.18s ease; }

.store-text { display: block; min-width: 0; }

.store-flag {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sf, var(--muted));
}
.store-name {
  display: block;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.store-meta { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

.store-arrow {
  font-size: 15px;
  color: #5E7A6F;
  transition: transform 0.18s ease, color 0.18s ease;
}
.store:hover .store-arrow { transform: translate(3px, -3px); color: var(--sf, var(--green)); }

@media (prefers-reduced-motion: reduce) {
  .store:hover .store-arrow { transform: none; }
}

@media (max-width: 900px) {
  /* Stacked, the rack would otherwise wait below the stats and the first
     screen would be all text. The copy column dissolves so the rack can sit
     straight after the lede, with the stats following it. */
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero-copy { display: contents; }
  .rack-wrap { max-width: 520px; margin-top: 6px; }
  .stats { order: 1; margin-top: 14px; }
}

@media (max-width: 560px) {
  .hero-inner { padding-top: 30px; gap: 20px; }
}

/* --- marquee -------------------------------------------------------------- */

.marquee {
  background: var(--green);
  color: var(--on-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 54px;
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marquee 52s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: inline-flex; align-items: center; }
.marquee b {
  padding: 0 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.marquee i { font-style: normal; opacity: 0.45; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* --- bands ---------------------------------------------------------------- */

.band { padding-block: clamp(64px, 8vw, 110px); }

.band-head { display: flex; flex-direction: column; gap: 16px; max-width: 700px; }
.band-lede { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); max-width: 56ch; }

/* A tonal step down from the page ground, so the white cards on it have
   something to sit on rather than dissolving into it. */
.band-tint { background: var(--band-tint); }
/* The band lifts the ground, so the small caps need a touch more weight of
   colour to keep clear of the 4.5:1 floor at 10px. */
.band-tint .eyebrow { color: #5A615C; }

.band-dark {
  background: var(--green);
  color: var(--on-dark);
}
.band-dark .eyebrow { color: var(--on-dark-dim); }
.band-dark .band-lede { color: var(--on-dark-soft); }

/* --- the aisle: one visual, six shelves ----------------------------------- */

/* Two halves of equal weight: the photograph takes the whole of the left,
   with its copy laid over the foot, and the tab list runs down the right on
   the open band — no panel, no card, so the only thing with a surface of its
   own is the shelf currently being read. */
.aisle {
  margin-top: clamp(38px, 4.6vw, 58px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
  align-items: stretch;
}
/* The tabs come first in the source, where a keyboard or screen reader wants
   them, and are placed second by hand. */
.aisle-view { grid-area: 1 / 1; }
.aisle-tabs { grid-area: 1 / 2; }

/* --- the visual --- */

.aisle-view {
  position: relative;
  overflow: hidden;
  min-height: clamp(430px, 42vw, 560px);
  background: #D8DDD5;
}

.aisle-shot {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0;
}
.aisle-shot.is-on { display: block; }

.aisle-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stand-in until the photography lands. The mark sits in the upper half so it
   never collides with the copy below. */
.aisle-ph {
  position: absolute;
  inset: 0 0 48% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  padding: 0 20px;
}
.aisle-ph-mark { width: 28px; height: 28px; color: #6F7A73; }
.aisle-ph-kind {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5A615C;
}
.aisle-ph-note { font-size: 13px; line-height: 1.5; color: #4B534D; max-width: 30ch; }

/* The copy reads off the photograph itself, on a scrim that clears by about
   two thirds of the way up so the image is never buried. */
.aisle-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 13px;
  padding: clamp(24px, 2.6vw, 36px);
  color: var(--on-dark);
  background: linear-gradient(
    to top,
    rgba(11, 17, 14, 0.92) 0%,
    rgba(11, 17, 14, 0.86) 30%,
    rgba(11, 17, 14, 0.42) 58%,
    rgba(11, 17, 14, 0.04) 84%
  );
}
.aisle-copy h3 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 33px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.024em;
}
.aisle-copy > p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.68;
  color: #D5E0D8;
  max-width: 42ch;
}


/* Outlined rather than filled, so the chips sit on the photograph instead of
   stamping six pale blocks over it. */
.aisle-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
}
.aisle-chips li {
  padding: 6px 12px;
  border: 1px solid rgba(250, 250, 247, 0.42);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  color: #F1F6F1;
}

/* --- the tabs --- */

.aisle-tabs { display: flex; flex-direction: column; }

.aisle-tabs-label {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5A615C;
}
.aisle-tabs-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5A615C;
}

/* The six divide the column evenly, so the list finishes flush with the foot
   of the photograph rather than trailing off short. */
.aisle-tablist {
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aisle-tab {
  flex: 1;
  min-height: 62px;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.aisle-tab-bar { width: 3px; height: 32px; flex-shrink: 0; background: transparent; }
.aisle-tab-name { flex-grow: 1; font-size: 17px; line-height: 1.3; color: var(--ink-2); }
.aisle-tab-num { font-family: var(--display); font-style: italic; font-size: 13px; color: #5A615C; }

.aisle-tab:hover { box-shadow: 0 6px 14px -12px rgba(18, 23, 20, 0.22); }
.aisle-tab:hover .aisle-tab-name { color: var(--green); }

/* Selected: warm paper, a marker bar and the faintest lift off the column —
   enough to read as the tab pulled forward, not as a card. */
.aisle-tab.is-on {
  background: #FCFAF4;
  border-bottom-color: transparent;
  transform: translateX(-8px);
  box-shadow:
    0 8px 18px -12px rgba(18, 23, 20, 0.22),
    0 1px 3px -1px rgba(18, 23, 20, 0.07);
}
.aisle-tab.is-on .aisle-tab-bar { background: var(--green); }
.aisle-tab.is-on .aisle-tab-name { font-weight: 600; color: var(--green); }
.aisle-tab.is-on .aisle-tab-num { color: #4E6B5C; }

@media (max-width: 900px) {
  .aisle { grid-template-columns: minmax(0, 1fr); }
  .aisle-view, .aisle-tabs { grid-area: auto; }
  .aisle-view { min-height: clamp(420px, 78vw, 520px); }
  .aisle-tab { min-height: 56px; }
}

@media (max-width: 560px) {
  .aisle-tab { padding: 0 14px; gap: 12px; }
  .aisle-tab-name { font-size: 16px; }
  .aisle-view { min-height: 440px; }
  .aisle-ph { inset: 0 0 56% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aisle-tab { transition: none; }
  .aisle-tab.is-on { transform: none; }
}

/* --- steps ---------------------------------------------------------------- */

.steps {
  margin: clamp(38px, 4.6vw, 58px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(26px, 3vw, 38px);
}

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--on-dark-hair);
}
.step-art { display: block; color: var(--gold); }
.step h3 { color: var(--on-dark); }
.step p { font-size: 14.5px; line-height: 1.68; color: var(--on-dark-soft); }

/* --- about ---------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

.about-copy { display: flex; flex-direction: column; gap: 18px; }
.about-copy p { font-size: 16px; line-height: 1.75; color: var(--ink-2); max-width: 58ch; }
.about-copy h2 { margin-bottom: 4px; }

.about-note {
  margin-top: 8px;
  padding: 16px 20px;
  background: var(--tint);
  border-left: 2px solid var(--green);
  font-size: 14.5px !important;
  color: var(--ink) !important;
}

/* The identity plate: the one place on the page where the legal name, base and
   contact details sit together, so it gets the brand flood rather than another
   white surface — and stops this section reading as white on white. */
.details {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--green);
  color: var(--on-dark);
  border: 0;
  box-shadow: 0 26px 52px -30px rgba(0, 43, 34, 0.6);
  padding: 26px 28px 22px;
}

.details-mark {
  position: absolute;
  z-index: -1;
  right: -30px;
  bottom: -34px;
  width: 150px;
  height: 150px;
  color: rgba(250, 250, 247, 0.11);
  pointer-events: none;
}

.details .eyebrow { color: var(--on-dark-dim); margin-bottom: 2px; }

.details dl { margin: 0; }
.details dl > div {
  padding: 15px 0;
  border-bottom: 1px solid var(--on-dark-hair);
}
.details dl > div:last-child { border-bottom: 0; padding-bottom: 4px; }
.details dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}
.details dd { margin: 6px 0 0; font-size: 15px; color: var(--on-dark); }
.details dl > div:first-of-type dd { font-size: 17px; }
.details dd a {
  text-decoration: none;
  color: var(--on-dark);
  border-bottom: 1px solid var(--on-dark-hair);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.details dd a:hover { color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 860px) {
  .about { grid-template-columns: minmax(0, 1fr); }
}

/* --- shelf illustration --------------------------------------------------- */

.shelf-band {
  padding: 0 var(--gutter) clamp(30px, 4vw, 50px);
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.shelf {
  display: block;
  width: 100%;
  max-width: var(--shell);
  height: auto;
  color: #86978F;
}
.shelf .obj path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shelf .board {
  fill: none;
  stroke: #B4BCB6;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Every path is normalised to pathLength 100, so each object draws at the same
   rate regardless of its real perimeter, and the objects come in left to right
   like a hand working along the shelf. */
@keyframes shelf-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
.shelf.js-reveal .obj path,
.shelf.js-reveal .board { stroke-dasharray: 100; stroke-dashoffset: 100; }
.shelf.js-reveal.is-in .board { animation: shelf-draw 0.85s ease-out forwards; }
.shelf.js-reveal.is-in .obj path { animation: shelf-draw 0.75s ease-out forwards; }

.shelf.js-reveal.is-in .objs > g:nth-child(1) path  { animation-delay: 140ms; }
.shelf.js-reveal.is-in .objs > g:nth-child(2) path  { animation-delay: 195ms; }
.shelf.js-reveal.is-in .objs > g:nth-child(3) path  { animation-delay: 250ms; }
.shelf.js-reveal.is-in .objs > g:nth-child(4) path  { animation-delay: 305ms; }
.shelf.js-reveal.is-in .objs > g:nth-child(5) path  { animation-delay: 360ms; }
.shelf.js-reveal.is-in .objs > g:nth-child(6) path  { animation-delay: 415ms; }
.shelf.js-reveal.is-in .objs > g:nth-child(7) path  { animation-delay: 470ms; }
.shelf.js-reveal.is-in .objs > g:nth-child(8) path  { animation-delay: 525ms; }
.shelf.js-reveal.is-in .objs > g:nth-child(9) path  { animation-delay: 580ms; }
.shelf.js-reveal.is-in .objs > g:nth-child(10) path { animation-delay: 635ms; }

/* Below tablet the band crops rather than shrinking the drawing to hairlines. */
@media (max-width: 760px) {
  .shelf-band { padding-bottom: 24px; }
  .shelf { flex: 0 0 760px; width: 760px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shelf.js-reveal .obj path,
  .shelf.js-reveal .board,
  .shelf.js-reveal.is-in .obj path,
  .shelf.js-reveal.is-in .board {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* --- footer --------------------------------------------------------------- */

.footer {
  background: var(--green);
  color: var(--on-dark);
  padding-top: clamp(48px, 6vw, 72px);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(38px, 5vw, 56px);
}

.footer .eyebrow { color: var(--on-dark-dim); margin-bottom: 14px; display: block; }

.mark-light .mark-letters { color: var(--on-dark); }
.mark-light .mark-rule { background: var(--on-dark-hair); }
.mark-light .mark-words { color: var(--on-dark-dim); }

.footer-brand p {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--on-dark-soft);
  max-width: 34ch;
}

.footer-links, .footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-links a, .footer-contact a {
  font-size: 14.5px;
  text-decoration: none;
  color: var(--on-dark-soft);
  transition: color 0.18s ease;
}
.footer-links a:hover, .footer-contact a:hover { color: var(--gold); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 22px;
  border-top: 1px solid var(--on-dark-hair);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--on-dark-dim);
}

@media (max-width: 760px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}

/* --- scroll reveal -------------------------------------------------------- */
/* Applied by script.js, and only to elements that start below the fold, so the
   page at rest is never a screen of invisible content. */

.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
}