/* ==========================================================================
   CT Alloy — shared stylesheet
   Ported from the Claude Design export ("CT alloy"). The design source is
   100% inline styles with non-standard style-hover/style-focus attributes;
   everything interactive or repeated lives here instead, so hover states work
   without a runtime and the layouts survive small screens.
   ========================================================================== */

:root {
  --ink: #0c0f14;
  --ink-900: #05060a;
  --ink-800: #0a0b0e;
  --ink-700: #0b0d12;
  --ink-600: #14161d;
  --ink-500: #23272f;
  --steel-700: #3b414a;
  --steel-500: #6b7178;
  --steel-400: #8a9099;
  --silver: #c9ced6;
  --silver-100: #eef1f6;
  --paper: #eef0f3;
  --chalk: #eceff3;
  --danger: #d0472b;
  --danger-soft: #e06a4f;

  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.2, .7, .2, 1);
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--ink-900);
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--chalk); color: var(--ink); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — keyboard users need a way past the fixed hero. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes ct-spin { to { transform: rotate(360deg); } }
@keyframes ct-bob {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50% { transform: translateY(6px); opacity: .45; }
}
@keyframes ct-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ct-marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes ct-marq-rev {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@keyframes ct-domino {
  from { opacity: 0; transform: perspective(500px) rotateX(-92deg) translateY(12px); }
  to { opacity: 1; transform: perspective(500px) rotateX(0deg) translateY(0); }
}
@keyframes ct-squish {
  0%, 100% { transform: scale(1.018, .982); }
  50% { transform: scale(.982, 1.018); }
}
@keyframes ct-bling {
  0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  12% { opacity: .9; }
  40%, 100% { transform: translateX(160%) skewX(-18deg); opacity: 0; }
}
@keyframes ct-sparkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes ct-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ct-pop {
  from { opacity: 0; transform: translateY(26px) scale(.93); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sections that animate in on scroll. JS adds .is-visible via IntersectionObserver;
   without JS the `no-js` fallback below keeps them readable. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.mono {
  font-family: var(--mono);
  text-transform: uppercase;
}

.rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(238, 241, 246, .2), rgba(238, 241, 246, 0));
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  text-transform: uppercase;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.btn--dark {
  background: var(--chalk);
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .18em;
  padding: 14px 22px;
  border-radius: 100px;
  box-shadow: 0 16px 40px -14px rgba(238, 241, 246, .3);
}
.btn--dark:hover { background: #fff; transform: translateY(-2px); }

.btn--light {
  background: var(--silver-100);
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  padding: 14px 22px;
  border-radius: 100px;
}
.btn--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(201, 206, 214, .55);
}

.btn--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(238, 241, 246, .6);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: .16em;
  padding: 11px 16px;
}
.btn--outline:hover { color: var(--silver-100); border-color: rgba(255, 255, 255, .3); }

.btn--danger {
  background: transparent;
  border: 1px solid rgba(208, 71, 43, .4);
  color: var(--danger-soft);
  border-radius: 9px;
  font-size: 11px;
  letter-spacing: .1em;
  padding: 8px 12px;
}
.btn--danger:hover { background: var(--danger); color: #fff; }

.btn--glass {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 12px;
  letter-spacing: .24em;
  padding: 11px 18px;
  border-radius: 100px;
}
.btn--glass:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); }

.btn--cta {
  background: var(--chalk);
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .22em;
  padding: 18px 34px;
  border-radius: 100px;
  gap: 14px;
  box-shadow: 0 18px 44px -16px rgba(238, 241, 246, .34);
}
.btn--cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 54px -16px rgba(238, 241, 246, .45);
}

/* Size chips (15"–23") shared by gallery cards, the detail modal and the admin form. */
.chip {
  font-family: var(--mono);
  font-size: 12px;
  border-radius: 9px;
  padding: 7px 11px;
  min-width: 42px;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(12, 15, 20, .18);
  background: #fff;
  color: rgba(12, 15, 20, .7);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover { border-color: rgba(12, 15, 20, .5); }
.chip[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.chip--lg { font-size: 13px; padding: 9px 14px; min-width: 52px; border-radius: 10px; }

/* ==========================================================================
   Rim card — used on the home "Featured" grid and across the gallery
   ========================================================================== */

.rim-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #fff 0%, #f3f4f7 58%, #eaecf0 100%);
  border: 1px solid rgba(12, 15, 20, .07);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(12, 15, 20, .04);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), border-color .45s ease;
}
.rim-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 54px -20px rgba(12, 15, 20, .34);
  border-color: rgba(12, 15, 20, .14);
}
.rim-card__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(201, 206, 214, 0), var(--silver) 50%, rgba(201, 206, 214, 0));
}
.rim-card__index {
  position: absolute;
  top: 15px;
  left: 17px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(12, 15, 20, .32);
}
.rim-card__tag {
  position: absolute;
  top: 13px;
  right: 15px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(12, 15, 20, .36);
  border: 1px solid rgba(12, 15, 20, .12);
  border-radius: 100px;
  padding: 3px 9px;
}
.rim-card__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-top: 10px;
}
.rim-card__stage--square { aspect-ratio: 1 / 1; }
.rim-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 52% at 50% 49%, rgba(58, 64, 72, .34) 0%, rgba(58, 64, 72, .15) 56%, rgba(150, 158, 168, 0) 74%);
}
.rim-card__shadow {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 12%;
  height: 14px;
  background: var(--ink);
  transform: skewX(-34deg);
  filter: blur(8px);
  opacity: .2;
}
.rim-card__figure {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rim-card__img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  filter: drop-shadow(0 14px 22px rgba(12, 15, 20, .2));
  transition: transform .55s var(--ease-soft);
}
.rim-card:hover .rim-card__img { transform: scale(1.07) rotate(5deg); }
.rim-card__body {
  padding: 6px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rim-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rim-card__name {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}
.rim-card__arrow {
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid rgba(12, 15, 20, .16);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: rgba(12, 15, 20, .5);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.rim-card:hover .rim-card__arrow,
.rim-card__arrow:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.rim-card__spec {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  line-height: 1.5;
  color: rgba(12, 15, 20, .5);
}
.rim-card__hr {
  height: 1px;
  margin-top: 3px;
  background: linear-gradient(90deg, rgba(12, 15, 20, .13), rgba(12, 15, 20, 0));
}

/* ==========================================================================
   Rim detail modal (home + gallery)
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 7, 10, .74);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  animation: ct-fade .3s ease both;
  font-family: var(--sans);
}
.modal[hidden] { display: none; }
.modal__panel {
  position: relative;
  width: min(1240px, 96vw);
  max-height: 92vh;
  overflow: auto;
  display: grid;
  /* The media column carries the weight now that the stage is zoomable — the
     info column holds four stats, a paragraph and a button, and does not need
     the room it used to take. */
  grid-template-columns: 1.14fr .86fr;
  background: linear-gradient(165deg, #1a1e24 0%, #12151b 60%, #0c0f13 100%);
  border: 1px solid rgba(238, 241, 246, .1);
  border-radius: 26px;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .75);
  animation: ct-pop .45s var(--ease-out) both;
}
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(238, 241, 246, .16);
  background: rgba(255, 255, 255, .08);
  color: var(--silver-100);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, transform .25s ease, color .25s ease;
}
.modal__close:hover { background: var(--chalk); color: var(--ink); transform: rotate(90deg); }
.modal__media {
  position: relative;
  padding: 30px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid rgba(238, 241, 246, .07);
}
.modal__stage {
  position: relative;
  flex: 1;
  min-height: 440px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(56% 54% at 50% 49%, rgba(58, 64, 72, .36) 0%, rgba(58, 64, 72, .16) 58%, rgba(150, 158, 168, 0) 76%);
  cursor: zoom-in;
  /* Unzoomed, a finger drag still belongs to the panel's own scrolling; zoomed,
     we own it, because it is how the visitor pans the wheel. */
  touch-action: pan-y;
}
.modal__stage.is-zoomed { cursor: grab; touch-action: none; }
.modal__stage.is-dragging { cursor: grabbing; }
/* Contact shadow under the wheel. */
.modal__stage::before {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 11%;
  height: 16px;
  background: var(--silver-100);
  transform: skewX(-34deg);
  filter: blur(9px);
  opacity: .22;
}
.modal__stage img {
  position: relative;
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(238, 241, 246, .26));
  transform-origin: 50% 50%;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
/* Only deliberate steps animate — a transform that is tracking a wheel or a
   finger has to land on the same frame as the input. */
.modal__stage.is-easing img { transition: transform .3s var(--ease-out); }

/* The contact shadow is painted on the stage, not the wheel, so it cannot
   follow it once the wheel moves. Better absent than detached. */
.modal__stage.is-zoomed::before { opacity: 0; }

.modal__zoomhint,
.modal__zoomctl {
  position: absolute;
  z-index: 2;
  font-family: var(--mono);
  transition: opacity .25s ease, transform .25s ease;
}
.modal__zoomhint {
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .52);
  border: 1px solid rgba(238, 241, 246, .12);
  background: rgba(12, 15, 20, .62);
  border-radius: 100px;
  padding: 5px 12px;
  pointer-events: none;
}
.modal__stage.is-zoomed .modal__zoomhint { opacity: 0; }

.modal__zoomctl {
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 100px;
  border: 1px solid rgba(238, 241, 246, .14);
  background: rgba(12, 15, 20, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.modal__stage:hover .modal__zoomctl,
.modal__stage.is-zoomed .modal__zoomctl,
.modal__zoomctl:focus-within {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.modal__zoomctl button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--silver-100);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.modal__zoomctl button:hover { background: rgba(255, 255, 255, .13); }
.modal__zoomlevel {
  min-width: 46px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(238, 241, 246, .74);
}
.modal__zoomctl .modal__zoomreset {
  width: auto;
  padding: 0 11px;
  border-radius: 100px;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.modal__stage:not(.is-zoomed) .modal__zoomreset { display: none; }
.modal__code {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .6);
  border: 1px solid rgba(238, 241, 246, .14);
  border-radius: 100px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, .08);
}
.modal__thumbs { display: flex; gap: 10px; }
.modal__thumb {
  flex: none;
  width: 66px;
  height: 66px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .05);
  padding: 4px;
  cursor: pointer;
  /* The live thumbs are <button>s now — the strip is a real picker, ready for
     several pictures per rim. */
  font: inherit;
  color: inherit;
  border: 2px solid rgba(238, 241, 246, .2);
  transition: border-color .2s ease, background .2s ease;
}
.modal__thumb:hover { border-color: rgba(238, 241, 246, .55); }
.modal__thumb[aria-pressed='true'] { border-color: var(--silver-100); }
.modal__thumb--ph {
  border: 1px dashed rgba(238, 241, 246, .26);
  background-image: repeating-linear-gradient(135deg, rgba(238, 241, 246, .05) 0 2px, transparent 2px 8px);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: rgba(238, 241, 246, .42);
  text-align: center;
  line-height: 1.35;
  cursor: default;
}
.modal__thumb img { width: 100%; height: 100%; object-fit: contain; }
.modal__info {
  padding: 34px 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.modal__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--steel-500);
}
.modal__title {
  margin: 6px 0 0;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--silver-100);
  line-height: 1;
}
.modal__stats { display: flex; flex-wrap: wrap; gap: 8px; }
.modal__stat {
  flex: 1;
  min-width: 84px;
  border: 1px solid rgba(238, 241, 246, .1);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .05);
}
.modal__stat dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .4);
}
.modal__stat dd {
  margin: 3px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--silver-100);
}
.modal__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(238, 241, 246, .62);
  text-wrap: pretty;
}
.modal__hr { height: 1px; background: linear-gradient(90deg, rgba(238, 241, 246, .13), rgba(238, 241, 246, 0)); }
.modal__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .45);
}
.modal__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.modal__sizes .chip {
  border-color: rgba(238, 241, 246, .18);
  background: rgba(255, 255, 255, .05);
  color: rgba(238, 241, 246, .7);
}
.modal__sizes .chip:hover { border-color: rgba(238, 241, 246, .5); }
.modal__sizes .chip[aria-pressed='true'] {
  background: var(--chalk);
  border-color: var(--chalk);
  color: var(--ink);
}
.modal__cta {
  margin-top: 4px;
  width: 100%;
  padding: 15px 22px;
  border-radius: 12px;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background .25s ease, transform .2s ease;
}
.modal__cta:hover { background: #fff; transform: translateY(-1px); }

@media (max-width: 820px) {
  .modal { padding: 12px; }
  .modal__panel { grid-template-columns: 1fr; max-height: 94vh; }
  .modal__media { border-right: none; border-bottom: 1px solid rgba(238, 241, 246, .07); padding: 22px 18px 18px; }
  .modal__stage { min-height: 300px; }
  .modal__info { padding: 24px 20px 26px; }
  .modal__title { font-size: 32px; }
  /* There is no hover on the way in here, so the controls are simply always
     up — they are the only guaranteed route to zoom if a pinch is swallowed. */
  .modal__zoomctl { opacity: 1; transform: none; pointer-events: auto; }
  .modal__zoomhint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal__stage.is-easing img { transition: none; }
}

/* ==========================================================================
   Shared footer
   ========================================================================== */

.site-footer {
  position: relative;
  z-index: 5;
  background: var(--silver-100);
  padding: 62px 34px 40px;
  color: rgba(12, 15, 20, .7);
}
.site-footer__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.site-footer h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}
.site-footer__sub {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(12, 15, 20, .45);
}
.site-footer__social {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(12, 15, 20, .75);
}
.site-footer__social a:hover { color: var(--ink); }
.site-footer__legal {
  max-width: 1100px;
  margin: 44px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(12, 15, 20, .1);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(12, 15, 20, .4);
}
.site-footer__legal a:hover { color: rgba(12, 15, 20, .8); }
.site-footer__copy {
  max-width: 1100px;
  margin: 22px auto 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(12, 15, 20, .55);
}

/* ==========================================================================
   Persistent site nav

   The home page's top bar lives inside the hero, and the hero is cut out of
   the document the instant the reveal ends — which used to leave the rest of
   the page with no route to the catalogue at all. This bar owns the same
   links plus the construction categories, and every page carries it.

   On the home page it ships with `data-nav-deferred` and is switched on by
   CT.showSiteNav() (home.js) when the hero lets go, so it never shows through
   the hero. It sits in the flow directly after the hero and is `sticky`, so
   the ungated hero (mobile, coarse pointer, reduced motion, no JS) simply
   scrolls past it and pins it — no fixed-overlay padding to reconcile.
   ========================================================================== */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(8, 9, 13, .9);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.sitenav[data-nav-deferred] {
  opacity: 0;
  transform: translateY(-101%);
  pointer-events: none;
  transition: opacity .35s ease, transform .55s var(--ease-out);
}
.sitenav[data-nav-deferred].is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Without JS nothing ever calls showSiteNav(), and the hero is an ordinary
   section — so the bar just sits below it and pins on scroll. */
.no-js .sitenav[data-nav-deferred] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: none;
}

.sitenav__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 11px 34px;
}
.sitenav__brand { flex: 0 0 auto; display: flex; }
.sitenav__brand img { display: block; width: auto; height: 36px; }

.sitenav__links {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-right: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sitenav__links a {
  padding: 10px 12px;
  border-radius: 9px;
  white-space: nowrap;
  color: rgba(238, 241, 246, .58);
  transition: background .2s ease, color .2s ease;
}
.sitenav__links a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.sitenav__links a.is-here { color: #fff; }

/* Forged is the one family with constructions under it, so it opens a submenu
   instead of being a single link. Hover and focus-within both open it, which
   keeps it operable from the keyboard without any JS. */
.sitenav__cat { position: relative; }
.sitenav__cat-top { display: inline-flex; align-items: center; gap: 7px; }
.sitenav__caret { font-size: 8px; opacity: .55; transition: transform .2s ease; }
.sitenav__cat:hover .sitenav__caret,
.sitenav__cat:focus-within .sitenav__caret { transform: translateY(1px) rotate(180deg); }
.sitenav__sub {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 268px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(12, 14, 19, .98);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 28px 66px rgba(0, 0, 0, .58);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--ease-out);
}
.sitenav__cat:hover .sitenav__sub,
.sitenav__cat:focus-within .sitenav__sub {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.sitenav__sub a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  white-space: normal;
}
.sitenav__sub a[hidden] { display: none; }
.sitenav__sub em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(238, 241, 246, .34);
}
/* The three forged groups and the two cast/flow-formed ones read as one run of
   categories; the rules keep them from blurring into the page links. */
.sitenav__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 15px;
  margin: 0 9px;
  background: rgba(255, 255, 255, .16);
}

.sitenav__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sitenav__cta { padding: 11px 17px; font-size: 11px; }

.sitenav__burger {
  display: none;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.sitenav__bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 15px;
}
.sitenav__bars span { height: 1.5px; background: #fff; border-radius: 2px; }

/* Anchors have to clear the pinned bar, or every jump lands with its heading
   hidden underneath it. */
#technology,
#about,
#faq,
#contact,
.gsection { scroll-margin-top: 92px; }

@media (max-width: 1240px) {
  .sitenav__burger { display: inline-flex; }
  .sitenav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 18px;
    background: rgba(8, 9, 13, .98);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .24s ease, transform .24s var(--ease-out);
  }
  .sitenav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .sitenav__links a { padding: 13px 10px; }
  .sitenav__sep { width: auto; height: 1px; margin: 6px 10px; }
  /* No hover to open here — the submenu is simply an indented sub-list. */
  .sitenav__cat { position: static; }
  .sitenav__caret { display: none; }
  .sitenav__sub {
    position: static;
    min-width: 0;
    padding: 0 0 4px;
    margin: 0 0 2px 22px;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .14);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .sitenav__sub a { padding: 11px 12px; }
}

@media (max-width: 640px) {
  .sitenav__inner { padding: 10px 18px; gap: 12px; }
  .sitenav__brand img { height: 32px; }
  .sitenav__cta { display: none; }
}

/* Logo + burger + language switch stop fitting on one line somewhere under
   360px, and the bar was pushing the page 11px past the viewport. */
@media (max-width: 360px) {
  .sitenav__inner { padding: 9px 12px; gap: 8px; }
  .sitenav__brand img { height: 28px; }
  .sitenav__burger { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .lang button { padding: 8px 11px; }
}

/* ==========================================================================
   Language switch
   Shared, not hero-only: the persistent nav carries it on every page.
   ========================================================================== */

.lang {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  padding: 4px;
}
.lang button {
  background: transparent;
  color: rgba(255, 255, 255, .7);
  border: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  padding: 8px 15px;
  border-radius: 100px;
  transition: background .25s ease, color .25s ease;
}
.lang button[aria-pressed='true'] { background: #fff; color: var(--ink); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}