@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --nickel: #e6e9eb;
  --plate: #ffffff;
  --ink: #16222b;
  --steel: #56636d;
  --zinc: #a9b3ba;
  --brass: #e08a1e;
  --brass-deep: #935608;
  --measure: 62ch;
  --gutter: clamp(16px, 4vw, 48px);
  --W: calc(min(1240px, 100vw) - 2 * var(--gutter));
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 106.25%;
  line-height: 1.6;
  color: var(--ink);
  background: var(--nickel);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--brass-deep); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.contact :focus-visible { outline-color: var(--brass); }

.frame { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

.display {
  font-stretch: 62%;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.005em;
  word-spacing: .12em;
}

/* Header */
.masthead .frame { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; font-stretch: 75%; font-weight: 700; font-size: 1.2rem; }
.mark img { width: 40px; height: 40px; mix-blend-mode: multiply; }
.masthead nav { display: flex; gap: 28px; }
.masthead nav a { text-decoration: none; color: var(--steel); padding-block: 6px; }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--ink); }

/* Hero */
.hero { padding-block: clamp(20px, min(7vw, 4svh), 96px) clamp(16px, min(4vw, 3svh), 56px); }
.hero h1 { font-size: clamp(min(3.4rem, 15vw), min(11vw, 50.5svh - 262px), 9.5rem); margin: 0; }
.hero h1, .facts, .contact h2, .colophon { hyphens: auto; overflow-wrap: break-word; }
.brands h2 { overflow-wrap: break-word; }
.hero h1 span { display: block; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 34rem) auto; align-items: end; justify-content: space-between; gap: 24px 48px; margin-top: clamp(16px, min(3vw, 3svh), 40px); }
.hero-copy p { margin: 0; font-size: 1.12rem; color: var(--steel); }
.quote {
  position: relative;
  isolation: isolate;
  justify-self: start;
  display: inline-block;
  color: var(--ink);
  font-weight: 700;
  font-stretch: 85%;
  font-size: 1.1rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 22px 40px 20px 64px;
  max-width: 100%;
}
/* The plate is the hero key in miniature: bow with a punched hole, bitting 3 6 2 5 1 4, tip. */
.quote::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--brass);
  clip-path: polygon(
    0 4px,
    4px 0,
    40px 0,
    44px 4px,
    44px 7px,
    calc(34% - 9px) 7px,
    calc(34% - 1.5px) 13.6px,
    calc(34% + 1.5px) 13.6px,
    calc(34% + 9px) 7px,
    calc(45% - 9px) 7px,
    calc(45% - 1.5px) 19.0px,
    calc(45% + 1.5px) 19.0px,
    calc(45% + 9px) 7px,
    calc(56% - 9px) 7px,
    calc(56% - 1.5px) 11.8px,
    calc(56% + 1.5px) 11.8px,
    calc(56% + 9px) 7px,
    calc(67% - 9px) 7px,
    calc(67% - 1.5px) 17.2px,
    calc(67% + 1.5px) 17.2px,
    calc(67% + 9px) 7px,
    calc(78% - 9px) 7px,
    calc(78% - 1.5px) 10.0px,
    calc(78% + 1.5px) 10.0px,
    calc(78% + 9px) 7px,
    calc(89% - 9px) 7px,
    calc(89% - 1.5px) 15.4px,
    calc(89% + 1.5px) 15.4px,
    calc(89% + 9px) 7px,
    calc(100% - 16px) 7px,
    100% 23px,
    100% calc(100% - 17px),
    calc(100% - 10px) calc(100% - 7px),
    44px calc(100% - 7px),
    44px calc(100% - 4px),
    40px 100%,
    4px 100%,
    0 calc(100% - 4px)
  );
  -webkit-mask: radial-gradient(circle at 20px 50%, transparent 7px, #000 7.5px);
  mask: radial-gradient(circle at 20px 50%, transparent 7px, #000 7.5px);
}
.quote:hover { color: var(--brass); }
.quote:hover::before { background: var(--ink); }
.quote:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

/* Key drawing */
.blueprint { overflow: hidden; }
.blueprint svg { width: 100%; }
.rig { stroke-width: 3; }
.key-outline { fill: none; stroke: var(--brass); stroke-linejoin: round; }
.key-groove { fill: none; stroke: var(--brass); stroke-width: 1.5; opacity: .55; }
.dim line, .dim path { stroke: var(--zinc); stroke-width: 1; fill: none; }
.dim .lead { stroke-dasharray: 3 4; }
.dim text { fill: var(--steel); font-family: "Archivo", sans-serif; font-size: 15px; font-stretch: 75%; font-weight: 600; font-variant-numeric: tabular-nums; }
.dim .caption { fill: var(--steel); font-weight: 400; font-size: 14px; }
.lock { display: none; }
.dim line, .dim path { vector-effect: non-scaling-stroke; }

@media (prefers-reduced-motion: no-preference) {
  .key-outline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s cubic-bezier(.6, 0, .2, 1) .2s forwards; }
  .key-groove, .dim { opacity: 0; animation: appear .6s ease 1.7s forwards; }
  .key-groove { animation-name: appear-groove; }
  .quote { transition: transform .25s cubic-bezier(.4, 0, .2, 1), color .2s; }
  .quote::before { transition: background-color .2s; }
  .quote:hover { transform: translateX(5px); }
  .quote:active { transform: translateX(9px); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes appear-groove { to { opacity: .55; } }

/* Facts */
.facts { padding-block: clamp(56px, 8vw, 104px); }
.facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); }
.facts h2 { font-stretch: 70%; font-weight: 750; font-size: 1.75rem; line-height: 1.1; margin: 0 0 10px; }
.facts p { margin: 0; color: var(--steel); max-width: 30ch; }

/* Brands */
.brands { background: var(--plate); padding-block: clamp(56px, 8vw, 96px); }
.brands .frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 64px; align-items: center; }
.brands h2 { font-size: clamp(2.6rem, 6vw, 4.5rem); margin: 0; }
.brands ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 80px); align-items: center; }
.brands img { height: 88px; width: auto; }

/* Contact */
.contact { background: var(--ink); color: var(--plate); padding-block: clamp(64px, 9vw, 120px); }
.contact h2 { font-stretch: 75%; font-weight: 600; font-size: 1.6rem; line-height: 1.2; margin: 0 0 10px; }
.contact p { margin: 0 0 28px; color: #b9c3ca; }
.contact .address {
  font-size: clamp(2.4rem, 8.5vw, 7rem);
  color: var(--brass);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact .address:hover { color: var(--plate); }

/* Footer: company register data */
.colophon { padding-block: 48px 40px; font-size: .9rem; color: var(--steel); }
.colophon dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; margin: 0; }
.colophon dt { font-weight: 700; font-stretch: 75%; color: var(--ink); margin-bottom: 4px; }
.colophon dd { margin: 0; }
.colophon dd a { display: block; width: fit-content; }

/* Legal pages */
.legal { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 96px); }
.legal h1 { font-size: clamp(3rem, 9vw, 6.5rem); margin: 0 0 clamp(28px, 4vw, 48px); }
.legal article { background: var(--plate); padding: clamp(24px, 5vw, 56px); max-width: calc(var(--measure) + 2 * 56px); }
.legal h2 { font-stretch: 75%; font-weight: 700; font-size: 1.3rem; line-height: 1.25; margin: 2em 0 .5em; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { max-width: var(--measure); }
.legal ul { padding-left: 1.1em; }
.legal li { margin-bottom: .25em; }
.facts-table { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 28px; margin: 0 0 2em; }
.facts-table dt { color: var(--steel); }
.facts-table dd { margin: 0; }

@media (max-width: 860px) {
  .hero-copy { grid-template-columns: 1fr; }
  .facts ul { grid-template-columns: 1fr; }
  .brands .frame { grid-template-columns: 1fr; }
  .colophon dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .masthead nav { gap: 18px; }
  .mark { position: relative; }
  .brands h2 { hyphens: auto; }
  .mark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .blueprint svg { width: 190%; max-width: none; }
  .brands img { height: 72px; }
  .colophon dl { grid-template-columns: 1fr; }
  .facts-table { grid-template-columns: 1fr; gap: 0; }
  .facts-table dd { margin-bottom: 12px; }
}

/*
  Scroll choreography. The drawing is sticky with its bottom on the viewport bottom, so it
  docks on the bottom of the contact band when <main> ends. Inside the SVG, lengths are user
  units (1200 across the content width). The key slides right and turns tip-down into a lane,
  rides along, turns back in the ink band, grows below the address and goes into the cylinder.
*/
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-height: 30rem) {
    :root {
      --plate-h: calc(var(--W) * .2417);
      --lane: calc(var(--W) * .13);
      --mid-x: 418px;
      --lane-x: 554px;
      --gap: 180px;
    }
    body { timeline-scope: --contact, --colophon; }
    .journey { overflow-x: clip; }
    /* The first screen is headline, copy and the whole key; spare height goes mostly between copy and key. */
    .hero { display: flex; flex-direction: column; min-height: calc(100svh - var(--plate-h) - 80px); }
    .hero > .frame { width: 100%; }
    .hero::before { content: ""; flex: 1; }
    .hero::after { content: ""; flex: 2; }
    .facts .frame, .brands .frame, .contact .frame { padding-right: calc(var(--gutter) + var(--lane)); }
    .contact { view-timeline: --contact; padding-bottom: calc(var(--W) * .035); }
    .contact .frame::after { content: ""; display: block; height: calc(var(--W) * .171 + var(--gap)); }
    .colophon { view-timeline: --colophon; padding-bottom: 96px; }

    .blueprint {
      position: sticky;
      top: calc(100svh - var(--plate-h));
      z-index: 2;
      overflow: visible;
      pointer-events: none;
    }
    .blueprint svg { overflow: visible; }
    /* The facts sit in the space the key leaves; they show once the key has reached its lane. */
    .facts { margin-top: calc(-1 * var(--plate-h)); min-height: calc(var(--plate-h) + 130px); }
    .facts ul {
      animation: show linear both;
      animation-timeline: scroll(root);
      animation-range: 188px 200px;
    }

    .rig {
      transform-origin: 586px 150px;
      animation-name: travel, lane-exit, grow;
      animation-timing-function: cubic-bezier(.4, 0, .2, 1);
      animation-fill-mode: both, forwards, forwards;
      animation-timeline: scroll(root), --contact, --contact;
      animation-range: 0 200px, entry calc(100% - 160px) entry calc(100% - 110px), entry calc(100% - 110px) entry 100%;
    }
    .annotation, .grooves {
      animation-name: hide, show;
      animation-timing-function: linear;
      animation-fill-mode: both, forwards;
      animation-timeline: scroll(root), --colophon;
      animation-range: 0 110px, entry 70% entry 100%;
    }
    .dim text {
      animation: num-size step-start forwards;
      animation-timeline: --colophon;
      animation-range: entry 0% entry 1%;
    }
    .dim .caption { animation-name: caption-size; }

    .key-move {
      animation-name: withdraw, insert;
      animation-timing-function: cubic-bezier(.4, 0, .2, 1);
      animation-fill-mode: forwards;
      animation-timeline: --contact, --colophon;
      animation-range: entry calc(100% - 110px) entry 100%, entry 0% entry 45%;
    }

    .lock { display: inline; fill: none; stroke: #7d8a94; stroke-width: var(--lock-w, 2.4px); }
    .lock {
      animation: show linear both;
      animation-timeline: --contact;
      animation-range: entry calc(100% - 60px) entry 100%;
    }
    .housing {
      stroke-dasharray: 1;
      animation: lock-draw linear both;
      animation-timeline: --contact;
      animation-range: entry calc(100% - 60px) entry 100%;
    }
    .shear {
      stroke-dasharray: 6 5;
      animation: shear-open linear forwards;
      animation-timeline: --colophon;
      animation-range: entry 75% entry 90%;
    }
    .pin {
      stroke: #c3ccd2;
      fill: var(--ink);
      animation: pin-drop cubic-bezier(.5, 0, .4, 1) both;
      animation-timeline: --colophon;
      animation-range: entry 40% entry 72%;
    }
    .spring {
      transform-box: fill-box;
      transform-origin: 50% 0;
      animation: spring cubic-bezier(.5, 0, .4, 1) both;
      animation-timeline: --colophon;
      animation-range: entry 40% entry 72%;
    }
    .pin:nth-child(1 of .pin) { --d: -21px; } .spring:nth-child(1 of .spring) { --k: .611; }
    .pin:nth-child(2 of .pin) { --d: -42px; } .spring:nth-child(2 of .spring) { --k: .222; }
    .pin:nth-child(3 of .pin) { --d: -14px; } .spring:nth-child(3 of .spring) { --k: .741; }
    .pin:nth-child(4 of .pin) { --d: -35px; } .spring:nth-child(4 of .spring) { --k: .352; }
    .pin:nth-child(5 of .pin) { --d: -7px; } .spring:nth-child(5 of .spring) { --k: .870; }
    .pin:nth-child(6 of .pin) { --d: -28px; } .spring:nth-child(6 of .spring) { --k: .481; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-height: 30rem) and (max-width: 520px) {
    :root {
      --plate-h: calc(var(--W) * .4592);
      --lane: 52px;
      --withdraw: -40px;
      --mid-x: -152px;
      --lane-x: -11px;
      --lock-w: 4px;
      --num-end: 40px;
      --caption-end: 34px;
    }
    .contact { padding-bottom: calc(var(--W) * .0887); }
    .contact .frame::after { height: calc(var(--W) * .34 + 1rem); }
    .colophon { padding-bottom: 40px; }
    .rig {
      animation-name: travel, lane-drop, end;
      animation-fill-mode: both, forwards, forwards;
      animation-timeline: scroll(root), --contact, --colophon;
      animation-range: 0 200px, entry 55% entry 100%, entry 0% entry 26%;
    }
    .key-move {
      animation-timeline: --colophon, --colophon;
      animation-range: entry 0% entry 20%, entry 36% entry 60%;
    }
    .lock, .housing { animation-timeline: --colophon; animation-range: entry 22% entry 40%; }
    .shear { animation-range: entry 82% entry 92%; }
    .pin, .spring { animation-range: entry 58% entry 80%; }
    .annotation, .grooves { animation-range: 0 110px, entry 80% entry 100%; }
  }
}
@keyframes travel {
  50% { transform: translate(var(--mid-x), 15px) rotate(0deg) scale(.35); stroke-width: 6; }
  to { transform: translate(var(--lane-x), 35px) rotate(90deg) scale(.27); stroke-width: 7.5; }
}
@keyframes lane-exit {
  from { transform: translate(var(--lane-x), 35px) rotate(90deg) scale(.27); stroke-width: 7.5; }
  to { transform: translate(445px, 15px) rotate(0deg) scale(.3); stroke-width: 7; }
}
@keyframes grow {
  from { transform: translate(445px, 15px) rotate(0deg) scale(.3); stroke-width: 7; }
  to { transform: translate(237.4px, 26.2px) rotate(0deg) scale(.65); stroke-width: 4.6; }
}
@keyframes lane-drop {
  from { transform: translate(var(--lane-x), 35px) rotate(90deg) scale(.27); stroke-width: 7.5; }
  to { transform: translate(var(--lane-x), 50px) rotate(90deg) scale(.22); stroke-width: 7.5; }
}
@keyframes end {
  from { transform: translate(var(--lane-x), 50px) rotate(90deg) scale(.22); stroke-width: 7.5; }
  to { transform: translate(-275.4px, 26.3px) rotate(0deg) scale(.568); stroke-width: 5.4; }
}
@keyframes withdraw { from { transform: translateX(0); } to { transform: translateX(var(--withdraw, -140px)); } }
@keyframes insert { from { transform: translateX(var(--withdraw, -140px)); } to { transform: translateX(0); } }
@keyframes hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
@keyframes num-size { from, to { font-size: var(--num-end, 22px); fill: var(--zinc); } }
@keyframes caption-size { from, to { font-size: var(--caption-end, 20px); fill: var(--zinc); } }
@keyframes lock-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes shear-open { from { stroke: #7d8a94; stroke-dasharray: 6 5; } to { stroke: var(--brass); stroke-dasharray: 6 0; } }
@keyframes pin-drop { from { transform: translateY(var(--d)); } to { transform: none; } }
@keyframes spring { from { transform: scaleY(var(--k)); } to { transform: none; } }