/* Precision Castings page matched to the curated-spark-collection reference.
   Every rule is scoped to .castings-page including the body:has opt-out
   blocks so nothing leaks onto other pages.
   Cormorant Garamond display; Jost 400 self-hosted with 300 and 500
   synthesised; JetBrains Mono labels. */

@font-face {
  font-family: "Cst Cormorant";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-400.ttf") format("truetype");
}
@font-face {
  font-family: "Cst Cormorant";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-400.ttf") format("truetype");
}
@font-face {
  font-family: "Cst Cormorant";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-italic-400.ttf") format("truetype");
}
@font-face {
  font-family: "Cst Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jost-400.ttf") format("truetype");
}
@font-face {
  font-family: "Cst JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-400.ttf") format("truetype");
}

/* ---- Shell opt-out: paint the full canvas and go edge to edge ---- */
body.service-page:has(.castings-page) { background: oklch(16% .025 53); }
body.public-reference-shell:has(.castings-page) { background: oklch(16% .025 53); }
body.public-reference-shell:has(.castings-page) main.service-page-main {
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
main.service-page-main:has(.castings-page) > #other-services { display: none; }
main.service-page-main:has(.castings-page) > .public-breadcrumbs {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  color: oklch(72% .03 75);
  font-size: 12px;
}
main.service-page-main:has(.castings-page) > .public-breadcrumbs ol {
  justify-content: flex-start;
  max-width: 1024px;
  margin: 0 auto;
  padding: 14px 24px;
}
main.service-page-main:has(.castings-page) > .public-breadcrumbs a { color: oklch(72% .03 75); }
main.service-page-main:has(.castings-page) > .public-breadcrumbs a:hover { color: oklch(76% .12 78); }
main.service-page-main:has(.castings-page) > .public-breadcrumbs [aria-current] { color: oklch(93% .028 85 / .75); }
main.service-page-main:has(.castings-page) > .service-back-nav {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 5;
  margin: 0;
  padding: 14px 24px;
  border: 0;
  background: transparent;
  color: oklch(72% .03 75);
}
main.service-page-main:has(.castings-page) > .service-back-nav a { color: oklch(72% .03 75); }

/* ---- Tokens and base ---- */
.castings-page {
  --cst-bg: oklch(16% .025 53);
  --cst-card: oklch(18% .025 53);
  --cst-fg: oklch(93% .028 85);
  --cst-muted: oklch(65% .035 76);
  --cst-gold: oklch(76% .12 78);
  --cst-gold-light: oklch(87% .11 86);
  --cst-gold-ink: oklch(16% .025 53);
  --cst-line: oklch(32% .043 70);
  --cst-gradient: linear-gradient(110deg, oklch(76% .11 78), oklch(87% .11 86));
  background: var(--cst-bg);
  color: var(--cst-fg);
  font-family: "Cst Jost", Jost, Manrope, Arial, sans-serif;
  font-weight: 400;
  font-synthesis: weight;
  -webkit-font-smoothing: antialiased;
  padding-top: 40px;
}
.castings-page *, .castings-page *::before, .castings-page *::after { box-sizing: border-box; }
.castings-page h1, .castings-page h2, .castings-page h3,
.castings-page p, .castings-page ul, .castings-page ol, .castings-page figure { margin: 0; padding: 0; }
.castings-page ol, .castings-page ul { list-style: none; }
.castings-page a { color: inherit; text-decoration: none; }
.castings-page img { display: block; max-width: 100%; }
.castings-page em { color: var(--cst-gold); font-style: italic; }
/* Override the global brand-system-v3 heading-em rule (Instrument Serif at
   higher specificity); keep the approved Cormorant italic with normal word
   spacing. Scope parser strips comments before reading selectors. */
.castings-page .cst-hero h1 em,
.castings-page .cst-head h2 em,
.castings-page .cst-band-inner h2 em,
.castings-page .cst-steps h3 em,
.castings-page .cst-uses h3 em {
  color: var(--cst-gold);
  font-family: "Cst Cormorant", Cormorant Garamond, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: normal;
}
.castings-page :focus-visible { outline: 2px solid var(--cst-gold); outline-offset: 4px; border-radius: 4px; }

.castings-page .cst-container { width: min(1024px, calc(100% - 48px)); margin-inline: auto; }

.castings-page .cst-icon { display: inline-flex; align-items: center; justify-content: center; }
.castings-page .cst-icon svg { width: 100%; height: 100%; }
.castings-page .cst-icon-inline { width: 12px; height: 12px; }

.castings-page .cst-eyebrow {
  margin-bottom: 22px;
  color: var(--cst-gold);
  font-family: "Cst JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ---- Gold pill ---- */
.castings-page .cst-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 41px;
  padding: 13px 24px;
  border-radius: 99px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: filter .2s ease, transform .2s ease;
}
.castings-page .cst-gold-pill {
  background: var(--cst-gradient);
  color: var(--cst-gold-ink);
}
.castings-page .cst-gold-pill:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ---- Hero ---- */
.castings-page .cst-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 56px;
  padding-block: 48px 40px;
}
.castings-page .cst-hero h1 {
  font-family: "Cst Cormorant", Cormorant Garamond, Georgia, serif;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -1px;
}
.castings-page .cst-lead {
  max-width: 460px;
  margin-top: 24px;
  color: var(--cst-muted);
  font-size: 16px;
  line-height: 1.65;
}
.castings-page .cst-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}
.castings-page .cst-actions-note {
  color: var(--cst-muted);
  font-family: "Cst JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.castings-page .cst-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 4px 120px 4px 4px;
  box-shadow: 0 40px 80px -40px color-mix(in oklab, var(--cst-fg) 45%, transparent);
}
.castings-page .cst-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.castings-page .cst-figure:hover img { transform: scale(1.04); }
.castings-page .cst-figure figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: color-mix(in oklab, var(--cst-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--cst-muted);
  font-family: "Cst JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---- Spec bar ---- */
.castings-page .cst-specbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 24px;
  border-block: 1px solid var(--cst-line);
}
.castings-page .cst-specbar div {
  display: grid;
  gap: 6px;
  padding: 20px 16px;
  border-left: 1px solid var(--cst-line);
}
.castings-page .cst-specbar div:first-child { padding-left: 0; border-left: 0; }
.castings-page .cst-specbar span {
  color: var(--cst-muted);
  font-family: "Cst JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.castings-page .cst-specbar strong {
  font-family: "Cst Cormorant", Cormorant Garamond, Georgia, serif;
  font-size: 28px;
  font-weight: 500;
}

/* ---- Marquee ---- */
.castings-page .cst-marquee {
  overflow: hidden;
  padding: 22px 0;
  border-block: 1px solid var(--cst-line);
  color: var(--cst-gold);
}
.castings-page .cst-marquee-track {
  display: flex;
  width: max-content;
  animation: cst-drift 45s linear infinite;
}
.castings-page .cst-marquee:hover .cst-marquee-track { animation-play-state: paused; }
.castings-page .cst-marquee span {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  font-family: "Cst JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.castings-page .cst-marquee b { font-size: 7px; font-weight: 400; }
@keyframes cst-drift { to { transform: translate(-50%); } }

/* ---- Section scaffolding ---- */
.castings-page .cst-section {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 56px;
  padding-block: 96px;
  border-top: 1px solid var(--cst-line);
}
.castings-page .cst-head h2 {
  font-family: "Cst Cormorant", Cormorant Garamond, Georgia, serif;
  font-size: clamp(36px, 4.5vw, 54px);
  font-weight: 400;
  line-height: 1.02;
}
.castings-page .cst-head-note {
  max-width: 300px;
  margin-top: 40px;
  color: var(--cst-muted);
  font-size: 15px;
  line-height: 1.65;
}
.castings-page .cst-head-aside {
  display: grid;
  gap: 28px;
  max-width: 300px;
  margin-top: 40px;
}

/* ---- Highlight facts ---- */
.castings-page .cst-head-facts { border-top: 1px solid var(--cst-line); }
.castings-page .cst-head-facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cst-line);
}
.castings-page .cst-head-facts strong {
  font-family: "Cst Cormorant", Cormorant Garamond, Georgia, serif;
  font-size: 24px;
  font-weight: 500;
}
.castings-page .cst-head-facts span { font-size: 16px; }
.castings-page .cst-head-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cst-gold);
  font-family: "Cst JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.castings-page .cst-head-link .cst-icon { width: 14px; height: 14px; }
.castings-page .cst-head-link:hover { text-decoration: underline; }

/* ---- Steps ---- */
.castings-page .cst-steps li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 4px 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--cst-line);
  transition: padding .3s ease, background .3s ease;
}
.castings-page .cst-steps li:hover {
  padding-left: 12px;
  background: color-mix(in oklab, var(--cst-gold) 6%, transparent);
}
.castings-page .cst-step-n,
.castings-page .cst-step-time {
  color: var(--cst-muted);
  font-family: "Cst JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.castings-page .cst-step-time { text-align: end; }
.castings-page .cst-steps h3 {
  font-family: "Cst Cormorant", Cormorant Garamond, Georgia, serif;
  font-size: 26px;
  font-weight: 500;
}
.castings-page .cst-steps p {
  grid-column: 2;
  color: var(--cst-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* ---- Processes table ---- */
.castings-page .cst-table { border-top: 1px solid var(--cst-fg); font-size: 14px; }
.castings-page .cst-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr .8fr 1.6fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--cst-line);
}
.castings-page .cst-row strong {
  font-family: "Cst Cormorant", Cormorant Garamond, Georgia, serif;
  font-size: 21px;
  font-weight: 500;
}
.castings-page .cst-row span { color: var(--cst-muted); }
.castings-page .cst-row .cst-row-parts { color: var(--cst-gold); }
.castings-page .cst-table-head span {
  color: var(--cst-muted);
  font-family: "Cst JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ---- Materials band ---- */
.castings-page .cst-band {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 460px;
  overflow: hidden;
}
.castings-page .cst-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.castings-page .cst-band-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cst-bg) 55%, transparent) 0%,
    transparent 30%,
    transparent 45%,
    color-mix(in oklab, var(--cst-bg) 92%, transparent) 100%);
}
.castings-page .cst-band-inner { position: relative; padding-block: 64px; }
.castings-page .cst-band-inner h2 {
  font-family: "Cst Cormorant", Cormorant Garamond, Georgia, serif;
  font-size: clamp(36px, 4.5vw, 54px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: normal;
}
.castings-page .cst-grades {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.castings-page .cst-grades span {
  padding: 8px 14px;
  border: 1px solid color-mix(in oklab, var(--cst-bg) 40%, transparent);
  border-radius: 99px;
  background: color-mix(in oklab, var(--cst-bg) 20%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: "Cst JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---- Industries ---- */
.castings-page .cst-uses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--cst-line);
  border-left: 1px solid var(--cst-line);
}
.castings-page .cst-uses > div {
  position: relative;
  padding: 28px;
  border-right: 1px solid var(--cst-line);
  border-bottom: 1px solid var(--cst-line);
  transition: background .3s ease;
}
.castings-page .cst-uses > div:hover { background: color-mix(in oklab, var(--cst-gold) 8%, transparent); }
.castings-page .cst-use-n {
  color: var(--cst-muted);
  font-family: "Cst JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2px;
}
.castings-page .cst-uses h3 {
  margin: 18px 0 8px;
  font-family: "Cst Cormorant", Cormorant Garamond, Georgia, serif;
  font-size: 26px;
  font-weight: 500;
}
.castings-page .cst-uses p { color: var(--cst-muted); font-size: 15px; line-height: 1.5; }
.castings-page .cst-use-arrow {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 18px;
  height: 18px;
  color: var(--cst-gold);
}

/* ---- Request form ---- */
.castings-page .cst-form {
  padding: 32px;
  border: 1px solid var(--cst-line);
  border-radius: 8px;
  background: var(--cst-card);
  box-shadow: 0 22px 50px color-mix(in oklab, oklch(70% .1 75) 12%, transparent);
}
.castings-page .cst-form label {
  display: block;
  margin-bottom: 24px;
  color: var(--cst-muted);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.castings-page .cst-form input,
.castings-page .cst-form select,
.castings-page .cst-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--cst-line);
  border-radius: 0;
  background: transparent;
  color: var(--cst-fg);
  font-family: "Cst Jost", Jost, Manrope, Arial, sans-serif;
  font-size: 14px;
  outline: none;
}
.castings-page .cst-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cst-muted) 50%),
    linear-gradient(135deg, var(--cst-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.castings-page .cst-form select option { color-scheme: dark; background: var(--cst-card); color: var(--cst-fg); }
.castings-page .cst-form textarea { min-height: 115px; resize: vertical; }
.castings-page .cst-form input:focus,
.castings-page .cst-form select:focus,
.castings-page .cst-form textarea:focus { border-bottom-color: var(--cst-gold); }
.castings-page .cst-form-submit { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.castings-page .cst-form-status { margin-top: 20px; color: var(--cst-muted); font-size: 14px; }
.castings-page .cst-form-status a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cst-gold);
}
.castings-page .cst-form-status a .cst-icon { width: 14px; height: 14px; }

/* ---- RTL rhythm ---- */
html[dir="rtl"] .castings-page .cst-figure { border-radius: 120px 4px 4px 4px; }
html[dir="rtl"] .castings-page .cst-specbar div { border-left: 0; border-right: 1px solid var(--cst-line); }
html[dir="rtl"] .castings-page .cst-specbar div:first-child { padding-right: 0; border-right: 0; }
html[dir="rtl"] .castings-page .cst-step-time { text-align: start; }
html[dir="rtl"] .castings-page .cst-use-arrow { right: auto; left: 28px; }
html[dir="rtl"] .castings-page .cst-steps p { grid-column: 2; }

/* ---- Up to small laptop ---- */
@media (width <= 1100px) {
  .castings-page .cst-hero,
  .castings-page .cst-section { grid-template-columns: 1fr; gap: 32px; }
  .castings-page .cst-section { padding-block: 64px; }
  .castings-page .cst-head-aside,
  .castings-page .cst-head-note { max-width: none; }
  .castings-page .cst-specbar { grid-template-columns: 1fr 1fr; }
  .castings-page .cst-specbar div:nth-child(3) { padding-left: 0; border-left: 0; }
  .castings-page .cst-table-head { display: none; }
  .castings-page .cst-row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .castings-page .cst-row strong { grid-column: 1 / -1; }
  .castings-page .cst-uses { grid-template-columns: 1fr; }
}

/* ---- Phones ---- */
@media (width <= 767px) {
  .castings-page .cst-container { width: calc(100% - 40px); }
  .castings-page .cst-figure { border-radius: 4px 72px 4px 4px; }
  .castings-page .cst-marquee { padding-block: 18px; }
  .castings-page .cst-steps li { grid-template-columns: 36px minmax(0, 1fr); }
  .castings-page .cst-step-time { grid-column: 2; text-align: start; }
  .castings-page .cst-form { padding: 25px; }
  .castings-page .cst-band { min-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .castings-page .cst-marquee-track { animation: none; }
  .castings-page .cst-figure img,
  .castings-page .cst-steps li,
  .castings-page .cst-uses > div,
  .castings-page .cst-pill { transition: none; }
}