/* HajoSign — site
   Orange and white, with black kept secondary. The palette is anchored on the
   same orange as the hero's buttons so the two pages agree.

   Contrast note, and the reason orange never carries body copy: #FF5A0A on
   white measures 3.13:1. That clears WCAG AA for large text and for graphics,
   and fails it for anything set small. So orange draws lines, rules, numbers
   and headings; sentences are set in ink, and small orange text uses
   --sv-orange-deep at 4.95:1.

   Tokens, the nav and the blocks shared by more than one page live here.
   Page-specific sections live in home.css and products.css. */

:root {
  --sv-orange: #ff5a0a;
  --sv-orange-deep: #c93f04;   /* 4.95:1 on white — safe under white text */
  --sv-orange-wash: #fff1e8;

  --sv-paper: #ffffff;
  --sv-paper-warm: #fff7f2;
  --sv-ink: #0b0b0c;           /* the secondary black */
  --sv-ink-soft: #55534f;
  --sv-line: rgba(11, 11, 12, 0.12);

  --sv-display: 'Archivo Narrow', 'Oswald', 'Helvetica Neue Condensed',
    'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --sv-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sv-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --sv-ease: cubic-bezier(0.16, 0.84, 0.44, 1);
}

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

body {
  margin: 0;
  background: var(--sv-paper);
  color: var(--sv-ink);
  font-family: var(--sv-body);
  -webkit-font-smoothing: antialiased;
}

.sv-wrap {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

/* ---------- site chrome ---------- */

/* Solid black, one orange edge, no glass. No backdrop blur and no specular
   canvas: the shine was the glass treatment, and a static edge is the point.
   It collapses on the way down and comes back on the way up, so it is never
   parked over the content. */
.sv-nav {
  position: fixed;
  z-index: 20;
  top: clamp(0.75rem, 2vw, 1.25rem);
  left: 50%;
  translate: -50% 0;
  width: min(100% - 1.5rem, 62rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.6rem 0.75rem 0.6rem 1.4rem;
  border: 1px solid var(--sv-orange);
  border-radius: 999px;
  background: #030304;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 280ms var(--sv-ease), padding 240ms var(--sv-ease);
}

/* Collapsed once you are past the top of the page. */
.sv-nav.is-compact {
  padding: 0.3rem 0.5rem 0.3rem 1.1rem;
}

.sv-nav.is-compact .sv-nav__mark {
  font-size: clamp(0.95rem, 1.45vw, 1.15rem);
}

.sv-nav.is-compact .sv-nav__links a {
  min-height: 2.05rem;
  font-size: 0.68rem;
}

/* Off the screen entirely while you are reading down the page. */
.sv-nav.is-away {
  transform: translateY(calc(-100% - 1.75rem));
}

.sv-nav__mark {
  font-size: clamp(0.95rem, 1.45vw, 1.15rem);
}

.sv-nav.is-compact .sv-nav__links a {
  min-height: 2.05rem;
  font-size: 0.68rem;
}

/* Out of the way while reading, back on the way up. `translate` already holds
   the centring, so `transform` is free to carry the hiding on its own. */
.sv-nav.is-away {
  transform: translateY(calc(-100% - 1.5rem));
}

.sv-nav > *:not(.specular-button__fx) {
  position: relative;
  z-index: 2;
}

.sv-nav__mark {
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #f5f5f5;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: font-size 240ms var(--sv-ease), color 180ms var(--sv-ease);
}

.sv-nav__mark em {
  font-style: normal;
  color: var(--sv-orange);
}

.sv-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.5vw, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 clamp(0.75rem, 1.6vw, 1.1rem);
  border-radius: 999px;
  font-family: var(--sv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cdc9c5;
  text-decoration: none;
  transition: color 180ms var(--sv-ease), background-color 180ms var(--sv-ease),
    min-height 240ms var(--sv-ease), font-size 240ms var(--sv-ease);
}

.sv-nav__links a:hover {
  color: #f5f5f5;
  background: rgba(255, 90, 10, 0.16);
}

.sv-nav__links a:focus-visible,
.sv-nav__mark:focus-visible,
.sv-nav__toggle:focus-visible {
  outline: 2px solid var(--sv-orange);
  outline-offset: 3px;
}

.sv-nav__toggle {
  display: none;
  position: relative;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms var(--sv-ease), transform 200ms var(--sv-ease);
}

.sv-nav__toggle:hover {
  background: rgba(255, 90, 10, 0.2);
}

.sv-nav__toggle:active {
  transform: scale(0.96);
}

.sv-nav__toggle span {
  position: absolute;
  left: 50%;
  width: 1rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  translate: -50% 0;
  transition: top 220ms var(--sv-ease), transform 220ms var(--sv-ease),
    opacity 160ms var(--sv-ease);
}

.sv-nav__toggle span:nth-child(1) { top: 0.82rem; }
.sv-nav__toggle span:nth-child(2) { top: 1.22rem; }
.sv-nav__toggle span:nth-child(3) { top: 1.62rem; }

.sv-nav.is-open .sv-nav__toggle span:nth-child(1) {
  top: 1.22rem;
  transform: rotate(45deg);
}

.sv-nav.is-open .sv-nav__toggle span:nth-child(2) {
  opacity: 0;
}

.sv-nav.is-open .sv-nav__toggle span:nth-child(3) {
  top: 1.22rem;
  transform: rotate(-45deg);
}

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

/* The fixed nav must not land on top of a section it just scrolled to. */
:target,
#about,
#services,
#machines,
#contact {
  scroll-margin-top: 6rem;
}

/* ---------- shared blocks ---------- */

.sv-eyebrow {
  margin: 0 0 clamp(0.9rem, 2vw, 1.25rem);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sv-orange-deep);
}

.sv-eyebrow::before {
  content: '';
  width: clamp(1.5rem, 4vw, 3.25rem);
  height: 2px;
  background: var(--sv-orange);
  flex: none;
}


.sv-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0 2rem;
  border: none;
  border-radius: 2px;
  background: var(--sv-orange);
  color: var(--sv-ink);
  font-family: var(--sv-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--sv-ease), transform 180ms var(--sv-ease);
}

.sv-cta:hover {
  background: #ff7128;
}

.sv-cta:active {
  transform: scale(0.98);
}

.sv-cta:focus-visible {
  outline: 2px solid var(--sv-ink);
  outline-offset: 3px;
}


/* Section heading, shared by every section that has one. */
.sv-title {
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.sv-title em {
  font-style: normal;
  color: var(--sv-orange-deep);
}

.sv-lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--sv-ink-soft);
}

/* ---------- contact + footer ---------- */

.sv-contact {
  padding: clamp(3.25rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--sv-orange-wash);
  background: var(--sv-paper-warm);
}

.sv-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
  align-items: end;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.sv-contact__title {
  margin: 0 0 1rem;
  max-width: 13ch;
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

.sv-contact__lede {
  margin: 0;
  max-width: 42ch;
  color: var(--sv-ink-soft);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.6;
}

.sv-contact__details {
  margin: 0;
  border-top: 1px solid rgba(11, 11, 12, 0.18);
  font-style: normal;
}

.sv-contact__details > * {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(11, 11, 12, 0.13);
}

.sv-contact__details a {
  color: var(--sv-ink);
  text-decoration: none;
  transition: color 180ms var(--sv-ease), padding-left 180ms var(--sv-ease);
}

.sv-contact__details a:hover {
  padding-left: 0.35rem;
  color: var(--sv-orange-deep);
}

.sv-contact__details a:focus-visible {
  outline: 2px solid var(--sv-orange);
  outline-offset: 4px;
}

.sv-contact__details span {
  font-family: var(--sv-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sv-orange-deep);
}

.sv-contact__details strong {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sv-footer {
  padding: 1.5rem 0;
  background: #0b0b0c;
  color: #cdc9c5;
}

.sv-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem 2rem;
}

.sv-footer__mark {
  font-family: var(--sv-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.sv-footer__mark em {
  color: var(--sv-orange);
  font-style: normal;
}

.sv-footer__inner > p {
  margin: 0;
  font-size: 0.82rem;
  color: #8e8b88;
}

.sv-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem 1.35rem;
}

.sv-footer__links a {
  font-family: var(--sv-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cdc9c5;
  text-decoration: none;
}

.sv-footer__links a:hover {
  color: var(--sv-orange);
}

.sv-footer__links a:focus-visible,
.sv-footer__mark:focus-visible {
  outline: 2px solid var(--sv-orange);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .sv-contact__grid {
    grid-template-columns: 1fr;
  }

  .sv-footer__inner {
    grid-template-columns: 1fr;
  }

  .sv-footer__links {
    justify-content: flex-start;
  }
}

/* ---------- machine card ---------- */

/* One card, used by the three featured machines on the home page and by every
   machine in the catalogue. Changing it changes both. */
.sv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(11, 11, 12, 0.09);
  border-radius: 1.125rem;
  background: var(--sv-paper);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 16px 44px rgba(112, 52, 20, 0.08);
  transition: border-color 260ms var(--sv-ease), transform 260ms var(--sv-ease),
    box-shadow 260ms var(--sv-ease);
  isolation: isolate;
}

.sv-card:hover {
  border-color: rgba(255, 90, 10, 0.34);
  transform: translateY(-0.4rem);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 24px 60px rgba(112, 52, 20, 0.16);
}

.sv-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: stretch;
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 90, 10, 0.34), transparent 32%),
    #171311;
  overflow: hidden;
}

.sv-card__media::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 52%, rgba(8, 7, 6, 0.5)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3.5rem);
  pointer-events: none;
}

.sv-card__media::after {
  content: '0' counter(machine);
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(11, 11, 12, 0.62);
  color: #fff;
  font-family: var(--sv-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  backdrop-filter: blur(0.45rem);
}

.sv-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sv-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.05);
  transition: transform 600ms var(--sv-ease), filter 300ms var(--sv-ease);
}

.sv-card:hover .sv-card__media img {
  transform: scale(1.045);
  filter: saturate(1) contrast(1.02);
}

/* Stands in for a photograph that does not exist yet. Deliberately
   typographic: a placeholder that reads as a design decision rather than as a
   broken image, and that cannot be mistaken for the machine itself. */
.sv-card__glyph {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: start;
  margin: 0;
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff4ec;
  text-align: left;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  text-wrap: balance;
}

.sv-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(1.25rem, 2.5vw, 1.7rem);
  flex: 1;
}

.sv-card__tag {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--sv-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sv-orange-deep);
}

.sv-card__tag::before {
  content: '';
  width: 1.35rem;
  height: 2px;
  background: var(--sv-orange);
}

.sv-card__name {
  margin: 0;
  font-family: var(--sv-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.sv-card__line {
  margin: 0;
  max-width: 38ch;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--sv-ink-soft);
  text-wrap: pretty;
}

.sv-card__specs {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  font-family: var(--sv-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.sv-card__body > .sv-card__specs {
  margin-top: auto;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(11, 11, 12, 0.06);
  border-radius: 0.7rem;
  background: #fbf6f2;
}

.sv-card__specs dt {
  text-transform: uppercase;
  color: var(--sv-ink-soft);
}

.sv-card__specs dd {
  margin: 0;
  color: var(--sv-ink);
  justify-self: end;
  text-align: right;
  font-weight: 600;
}

.sv-card__more {
  margin-top: 0.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(11, 11, 12, 0.09);
}

.sv-card__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--sv-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sv-orange-deep);
  cursor: pointer;
  list-style: none;
}

.sv-card__more summary::-webkit-details-marker {
  display: none;
}

.sv-card__more summary::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 1.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sv-orange-wash);
  color: var(--sv-orange-deep);
  font-size: 1rem;
  line-height: 1;
}

.sv-card__more[open] summary::after {
  content: '−';
}

.sv-card__more summary:focus-visible {
  outline: 2px solid var(--sv-orange);
  outline-offset: 3px;
}

.sv-card__more .sv-card__specs {
  margin-top: 0.85rem;
}

/* Card grid, shared by the home page's featured three and the catalogue.
   `minmax()` takes a plain length: a percentage or a min() inside repeat()
   makes the whole declaration invalid, and the grid silently falls back to a
   single very wide column. */
.sv-grid {
  counter-reset: machine;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.sv-card {
  counter-increment: machine;
}

/* Author-level display rules override the browser's default [hidden] rule. */
.sv-card[hidden] {
  display: none;
}

/* Below this the single track is wider than the viewport. */
@media (max-width: 21rem) {
  .sv-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- chip ---------- */

.sv-chip {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0 clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--sv-line);
  border-radius: 2px;
  font-family: var(--sv-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sv-ink-soft);
  white-space: nowrap;
}

/* ---------- scroll reveal ---------- */

/* Used by the sections that are not the roadmap. The roadmap has its own
   scroll-linked progress; these only need to arrive once. */
.sv-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--sv-ease), transform 520ms var(--sv-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.sv-reveal.is-in,
html:not(.sv-js) .sv-reveal {
  opacity: 1;
  transform: none;
}

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

  .sv-card {
    transition: none;
  }
}

/* Motion is the enhancement; the colour change is not. The nav still adapts to
   what is behind it, it just never slides away. */
@media (prefers-reduced-motion: reduce) {
  .sv-nav {
    transition: background-color 240ms var(--sv-ease);
  }

  .sv-nav.is-away {
    transform: none;
  }
}

/* ---------- nav, narrow ---------- */

@media (max-width: 560px) {
  .sv-nav {
    padding: 0.45rem 0.45rem 0.45rem 1rem;
    gap: 0.5rem;
  }

  .sv-nav.has-menu .sv-nav__toggle {
    display: block;
  }

  .sv-nav.has-menu .sv-nav__links {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 0.2rem;
    padding: 0.55rem;
    border: 1px solid rgba(255, 90, 10, 0.7);
    border-radius: 1.15rem;
    background: #0b0b0c;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.45rem) scale(0.98);
    transform-origin: top;
    transition: opacity 180ms var(--sv-ease), transform 220ms var(--sv-ease),
      visibility 180ms;
  }

  .sv-nav.has-menu.is-open .sv-nav__links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .sv-nav.has-menu .sv-nav__links li {
    display: block;
  }

  .sv-nav.has-menu .sv-nav__links a {
    width: 100%;
    min-height: 2.85rem;
    justify-content: space-between;
    padding: 0 0.9rem;
    border-radius: 0.75rem;
    font-size: 0.69rem;
  }

  .sv-nav.has-menu .sv-nav__links li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .sv-nav.has-menu .sv-nav__links a::after {
    content: '↗';
    color: var(--sv-orange);
    font-family: var(--sv-body);
    font-size: 0.95rem;
    letter-spacing: 0;
  }
}