/* Reusable brand components: labels, buttons, canister device, terminus lines, textural patterns */

/* ---------- headings & labels ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}
/* The canister, scaled down to a bullet */
.eyebrow::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--heathered-gray-deep);
  -webkit-mask: var(--canister) center / contain no-repeat;
  mask: var(--canister) center / contain no-repeat;
}

.h2 { font-size: var(--text-h2); }

.section--dark h2 em, .on-dark h2 em { color: var(--heathered-gray); }
.section--dark .eyebrow::before, .on-dark .eyebrow::before { background: var(--heathered-gray); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: 19px / 50%; /* elliptical ends, as the brand's pill buttons */
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.btn .icon { width: 18px; height: 18px; flex: none; transition: transform 320ms var(--ease); }
.btn:hover .icon { transform: translateX(4px); }

.btn--primary { background: var(--heathered-gray); color: var(--heavy-metal); }
.btn--primary:hover { background: var(--heathered-gray-deep); }

.btn--outline { border-color: rgba(42, 53, 46, 0.5); color: var(--heavy-metal); }
.btn--outline:hover { border-color: var(--heavy-metal); background: rgba(42, 53, 46, 0.05); }

.section--dark .btn--outline, .on-dark .btn--outline { border-color: rgba(242, 242, 242, 0.45); color: var(--concrete); }
.section--dark .btn--outline:hover, .on-dark .btn--outline:hover { border-color: var(--concrete); background: rgba(242, 242, 242, 0.06); }

.btn--compact { min-height: 46px; padding: 0 22px; border-radius: 16px / 50%; }

/* ---------- canister device ---------- */

.canister-mask {
  -webkit-mask: var(--canister) center / contain no-repeat;
  mask: var(--canister) center / contain no-repeat;
}

.canister-badge {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--heavy-metal);
}
.canister-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--heathered-gray);
  -webkit-mask: var(--canister) center / contain no-repeat;
  mask: var(--canister) center / contain no-repeat;
}

/* ---------- terminus lines: hairlines that always end in a small canister ---------- */

.terminus {
  position: absolute;
  pointer-events: none;
  color: rgba(242, 242, 242, 0.8);
}
.terminus::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 9px;
  height: 15px;
  margin-top: -2px;
  border-radius: 4.5px / 5.5px;
  background: currentColor;
}

/* Straight drop from the top edge */
.terminus--drop { border-left: 1px solid currentColor; }
.terminus--drop::after { left: -5px; }

/* Enters from the right edge, turns and drops */
.terminus--turn {
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  border-top-left-radius: 64px;
}
.terminus--turn::after { left: -5px; }

.js .terminus[data-draw] {
  clip-path: inset(-4px -12px 100% -12px);
  transition: clip-path 1800ms var(--ease) 250ms;
}
.js .terminus--turn[data-draw] { clip-path: inset(-4px -12px 100% -12px); }
.js .terminus[data-draw].is-visible { clip-path: inset(-4px -12px -24px -12px); }

@media (prefers-reduced-motion: reduce) {
  .js .terminus[data-draw] { clip-path: none; transition: none; }
}

/* ---------- textural patterns (one per surface, drawn a step lighter than the ground) ---------- */

.pattern-grid::before,
.pattern-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Engineering grid with scattered dots and the occasional filled square */
.pattern-grid::before {
  background-image:
    linear-gradient(to right, rgba(242, 242, 242, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242, 242, 242, 0.055) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}

.grid-accent {
  position: absolute;
  left: calc(var(--x) * var(--grid-cell));
  top: calc(var(--y) * var(--grid-cell));
  pointer-events: none;
}
.grid-accent--dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: rgba(242, 242, 242, 0.2);
}
.grid-accent--square {
  width: var(--grid-cell);
  height: var(--grid-cell);
  background: linear-gradient(135deg, rgba(242, 242, 242, 0.1), rgba(242, 242, 242, 0.025));
}

/* Soft dot grid with faint diamond forms between the points */
.pattern-dots::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M0 .5H44M.5 0V44' stroke='rgb(42,53,46)' stroke-opacity='.05'/%3E%3Cpath d='M22 17.5C22.6 20.6 23.4 21.4 26.5 22 23.4 22.6 22.6 23.4 22 26.5 21.4 23.4 20.6 22.6 17.5 22 20.6 21.4 21.4 20.6 22 17.5Z' fill='rgb(42,53,46)' fill-opacity='.11'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 22% 50%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 85% at 22% 50%, #000 15%, transparent 78%);
}

.pattern-dots--inverse::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 17.5C22.6 20.6 23.4 21.4 26.5 22 23.4 22.6 22.6 23.4 22 26.5 21.4 23.4 20.6 22.6 17.5 22 20.6 21.4 21.4 20.6 22 17.5Z' fill='rgb(242,242,242)' fill-opacity='.12'/%3E%3C/svg%3E");
}

@media (max-width: 959px) {
  .grid-accent--square { display: none; }
}

/* ---------- "CONCEPT ONLY" watermark, tiled diagonally over a section and above its content ---------- */

.watermark-concept::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='460'%3E%3Cg font-family='Urbanist, Helvetica Neue, Arial, sans-serif' font-weight='700' font-size='46' letter-spacing='10' fill='rgb(242,242,242)' fill-opacity='0.14' text-anchor='middle' dominant-baseline='middle'%3E%3Ctext x='225' y='120' transform='rotate(-24 225 120)'%3ECONCEPT ONLY%3C/text%3E%3Ctext x='675' y='345' transform='rotate(-24 675 345)'%3ECONCEPT ONLY%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: 900px 460px;
}

@media (max-width: 699px) {
  .watermark-concept::after { background-size: 600px auto; }
}