/* ==========================================================================
   Shalom On Site Machining - site stylesheet
   --------------------------------------------------------------------------
   Palette comes from the logo: blueprint blue, paper and spark orange.
   Type: Inter (self-hosted in fonts/, variable weight 400 to 800). Headings are set large,
   heavy and slightly tracked out to echo the wide logo lettering.

   Contents
   1.  Tokens
   2.  Base
   3.  Buttons
   4.  Header and navigation (incl. mobile menu)
   5.  Blueprint surfaces (home hero + inner page heroes)
   6.  Hero drawing (flange + facing tool path)
   7.  Title block
   8.  Paper sections (shared)
   9.  Home: operations table, routes, about, areas
   10. Services page
   11. Contact page + form
   12. Call to action band + footer
   13. 404 page
   14. Motion preferences
   15. Workshop machining page + cross-links
   ========================================================================== */


/* 1. Tokens ================================================================ */

/* Inter, self-hosted: one variable file covering weights 400 to 800, Latin
   characters only (about 50 KB). Licence: fonts/OFL.txt. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
}

:root {
  --bp: #2C4A5E;          /* blueprint, from the logo */
  --bp-mid: #213C4F;
  --bp-deep: #172B3A;
  --paper: #EEEDE9;       /* paper, from the logo notes */
  --white: #FFFFFF;
  --spark: #D97D2B;       /* spark, from the logo */
  --spark-lt: #E68A3A;    /* spark light, from the logo */
  --spark-dk: #9A5216;    /* spark for small text on paper (5.0:1, AA) */
  --steel: #5E6468;       /* logo grey, darkened slightly for text contrast */
  --ink: #1B2F3D;
  --ink-2: #33495A;
  --rule: rgba(44, 74, 94, 0.22);
  --line: #A9C4D4;        /* drawn lines on blueprint */
  --on-dark: #EEF1F2;
  --on-dark-muted: #B9C8D1;

  --font: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 76rem;
  --header-h: 5rem;
}

@media (max-width: 48rem) {
  :root { --header-h: 4.25rem; }
}


/* 2. Base ================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }

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

[id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

.container {
  width: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.65rem 1rem;
  background: var(--spark);
  color: var(--bp-deep);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.text-link {
  color: var(--bp);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(44, 74, 94, 0.4);
  text-underline-offset: 0.18em;
}
.text-link:hover { text-decoration-color: var(--spark); }


/* 3. Buttons ===============================================================
   Sizing carried over from the earlier build: 14px / 26px padding,
   0.98rem type, Safari appearance reset, hover only on hover devices. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.625rem;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn--primary { background: var(--spark); color: var(--bp-deep); }
.btn--ghost   { color: var(--on-dark); border-color: rgba(169, 196, 212, 0.65); }
.btn--outline { color: var(--bp); border-color: var(--bp); }
.btn--small   { padding: 0.625rem 1.05rem; font-size: 0.92rem; }

.btn--primary:focus-visible { background: var(--spark-lt); }

@media (hover: hover) {
  .btn--primary:hover { background: var(--spark-lt); transform: translateY(-1px); }
  .btn--ghost:hover   { border-color: var(--on-dark); background: rgba(238, 237, 233, 0.08); }
  .btn--outline:hover { background: rgba(44, 74, 94, 0.08); }
}


/* 4. Header and navigation ================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--on-dark);
  background: var(--bp-deep);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* With JavaScript the header is see-through over the blueprint and turns
   solid once the page scrolls. Without it, it simply stays solid. */
.js .site-header { background: transparent; }
.js .site-header.is-stuck,
.nav-open .site-header {
  background: rgba(23, 43, 58, 0.97);
  box-shadow: 0 1px 0 rgba(169, 196, 212, 0.18);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  height: 100%;
}

.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 3.5rem; width: auto; }

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  list-style: none;
}
.nav a {
  display: block;
  padding: 0.35rem 0;
  font-weight: 600;
  text-decoration: none;
  color: var(--on-dark);
  border-bottom: 2px solid transparent;
}
.nav a[aria-current="page"] { border-bottom-color: var(--spark-lt); }
@media (hover: hover) {
  .nav a:hover { border-bottom-color: var(--line); }
  .nav a[aria-current="page"]:hover { border-bottom-color: var(--spark-lt); }
}
.nav__contact { display: none; }

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  padding: 0;
  color: var(--on-dark);
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.nav-toggle svg { width: 1.6rem; height: 1.6rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 48rem) {
  .site-header__inner { gap: 0.75rem; }
  .brand img { height: 2.4rem; }
  .site-header .btn--small { margin-left: auto; }

  /* Without JavaScript the links stay visible in the header. */
  .nav { margin-left: 0; }
  .nav ul { gap: 1rem; }
  html:not(.js) .site-header { height: auto; padding-block: 0.75rem; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; }
  html:not(.js) .nav { order: 3; width: 100%; }
}

/* With JavaScript: hamburger + slide-in panel (from the earlier build).
   Starts at 60rem, not 48rem, so portrait tablets don't get a crammed
   four-link header. Keep in sync with the matchMedia query in main.js. */
@media (max-width: 60rem) {
  .js .site-header .btn--small { margin-left: auto; }
  .js .nav-toggle { display: inline-flex; }
  .js .nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5rem var(--gutter) 2rem;
    background: var(--bp-deep);
    border-top: 1px solid rgba(169, 196, 212, 0.18);
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .js .nav.is-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.22s ease, visibility 0s;
  }
  .js .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav a {
    padding: 1rem 0.25rem;
    font-size: 1.25rem;
    border-bottom: 1px solid rgba(169, 196, 212, 0.22);
  }
  .js .nav a[aria-current="page"] {
    color: var(--spark-lt);
    border-bottom-color: rgba(169, 196, 212, 0.22);
  }
  .js .nav__contact {
    display: grid;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 2rem;
    color: var(--on-dark-muted);
  }
  .js .nav__contact a {
    padding: 0;
    font-size: 1.05rem;
    border: 0;
    color: var(--on-dark);
  }
  .nav-open { overflow: hidden; }
}

@media (max-width: 24rem) {
  .brand img { height: 2.1rem; }
  .site-header .btn--small { padding: 0.55rem 0.8rem; font-size: 0.875rem; }
}


/* 5. Blueprint surfaces ==================================================== */

.blueprint {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  color: var(--on-dark);
  background: radial-gradient(120% 95% at 72% 42%, #365a72 0%, var(--bp) 42%, #1f3748 100%);
  overflow: hidden;
}

/* Grid paper. It fades in once on load. */
.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(169, 196, 212, 0.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 196, 212, 0.17) 1px, transparent 1px),
    linear-gradient(rgba(169, 196, 212, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 196, 212, 0.07) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 68% 45%, #000 30%, transparent 95%);
  mask-image: radial-gradient(ellipse 95% 90% at 68% 45%, #000 30%, transparent 95%);
  animation: fade-in 1.4s ease-out both;
}

/* Home hero */
.hero {
  --s: min(52vw, 42rem);       /* drawing box */
  --d: calc(var(--s) * 0.76);  /* flange outside diameter */
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--s) + 6rem);
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(4.5rem, 7vw, 6rem);
}

.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 35rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 1.3rem + 3.75vw, 3.95rem);
}

.hero__lede {
  margin-top: 1.4rem;
  max-width: 34rem;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  color: var(--on-dark-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

@media (max-width: 64rem) {
  .hero {
    --s: min(96vw, 34rem);
    display: block;
    min-height: 0;
    padding-bottom: 1.5rem;
  }
  .hero__copy { max-width: none; }
}

@media (max-width: 51.25rem) {
  .hero__actions .btn { width: 100%; }
}

/* Inner page heroes (Services, Contact, 404) */
.page-hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(5.5rem, 9vw, 7rem);
}
.page-hero h1 {
  max-width: 20ch;
  font-size: clamp(2.3rem, 1.45rem + 3.3vw, 3.75rem);
}
.page-hero__lede {
  margin-top: 1.2rem;
  max-width: 40rem;
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  color: var(--on-dark-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  list-style: none;
  font-size: 0.92rem;
  color: var(--on-dark-muted);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: rgba(169, 196, 212, 0.6);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }


/* 6. Hero drawing ==========================================================
   A flange drawn with CSS (rings, holes, centrelines, dimensions). The
   facing tool path is the one SVG on top: a gramophone spiral that is cut
   from the face edge in to the bore edge, coloured as the tool moves, then
   cleared and repeated. Timing lives in the SVG (SMIL) in index.html. */

.drawing {
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--s);
  height: var(--s);
  translate: 0 -50%;
  pointer-events: none;
  /* A light fade on the left edge only, so it sits behind the text. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 26%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 26%);
}

.drawing > * { position: absolute; display: block; }

.ring {
  --k: 1;
  --n: 0;
  left: 50%;
  top: 50%;
  width: calc(var(--d) * var(--k));
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  animation: draw-in 0.9s ease-out calc(0.2s + var(--n) * 0.12s) both;
}
.ring--od   { --k: 1;    --n: 0; border-width: 2px; }
.ring--bc   { --k: 0.91; --n: 1; border: 1px dashed rgba(169, 196, 212, 0.6); }
.ring--rf   { --k: 0.84; --n: 2; }
.ring--bore { --k: 0.66; --n: 3; border-width: 2px; }

/* Raised face: a lightly hatched band between the bore and the face edge. */
.face {
  left: 50%;
  top: 50%;
  width: calc(var(--d) * 0.84);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, rgba(169, 196, 212, 0.2) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 78.4%, #000 78.8%);
  mask-image: radial-gradient(circle closest-side, transparent 78.4%, #000 78.8%);
  animation: fade-in 1s ease-out 0.7s both;
}

/* Centrelines, dash-dot like a real drawing. */
.cl {
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  animation: fade-in 1s ease-out 0.15s both;
}
.cl--h {
  width: calc(var(--d) * 1.16);
  height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(169, 196, 212, 0.7) 0 18px, transparent 18px 23px,
    rgba(169, 196, 212, 0.7) 23px 27px, transparent 27px 32px);
}
.cl--v {
  width: 1px;
  height: calc(var(--d) * 1.16);
  background: repeating-linear-gradient(180deg,
    rgba(169, 196, 212, 0.7) 0 18px, transparent 18px 23px,
    rgba(169, 196, 212, 0.7) 23px 27px, transparent 27px 32px);
}

/* 16 bolt holes on the pitch circle, straddling the centrelines. */
.hole {
  --i: 0;
  left: 50%;
  top: 50%;
  width: calc(var(--d) * 0.045);
  aspect-ratio: 1;
  margin: calc(var(--d) * -0.0225) 0 0 calc(var(--d) * -0.0225);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  transform: rotate(calc(var(--i) * 22.5deg + 11.25deg)) translateY(calc(var(--d) * -0.455));
  animation: fade-in 0.8s ease-out calc(0.6s + var(--i) * 0.03s) both;
}

/* Dimension line under the flange. */
.dim {
  left: 50%;
  top: calc(50% + var(--d) * 0.5);
  width: var(--d);
  height: calc(var(--d) * 0.1);
  translate: -50% 0;
  border-inline: 1px solid rgba(169, 196, 212, 0.7);
  background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
  animation: fade-in 1s ease-out 0.9s both;
}
.dim::before, .dim::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 6px;
  margin-top: -3px;
  background: var(--line);
}
.dim::before { left: 0;  clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.dim::after  { right: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }

.note {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: pre;
  color: var(--line);
  animation: fade-in 1s ease-out 1.1s both;
}
.note--od {
  left: 50%;
  top: calc(50% + var(--d) * 0.55);
  translate: -50% calc(-100% - 4px);
}
/* Leader to the bolt hole at 33.75 degrees above the horizontal. */
.note--pcd {
  left: calc(50% + var(--d) * 0.4448);
  top: calc(50% - var(--d) * 0.2973);
  translate: 6px -50%;
}
.note--finish {
  left: 50%;
  top: calc(50% - var(--d) * 0.6);
  translate: -50% -100%;
}

.leader {
  left: 50%;
  top: 50%;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
  animation: fade-in 1s ease-out 1.1s both;
}
.leader--pcd {
  width: calc(var(--d) * 0.08);
  transform: rotate(-33.75deg) translateX(calc(var(--d) * 0.455));
}
.leader--finish {
  width: 1px;
  height: calc(var(--d) * 0.18);
  top: calc(50% - var(--d) * 0.6);
}

/* The tool path layer (SVG, 100 x 100 units over the drawing box). */
.toolpath {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: fade-in 1s ease-out 0.9s both;
}
.toolpath__guide {
  fill: none;
  stroke: rgba(169, 196, 212, 0.38);
  stroke-width: 0.12;
}
.toolpath__cut {
  fill: none;
  stroke: var(--spark-lt);
  stroke-width: 0.34;
  stroke-linecap: round;
}
.toolpath__arm  { stroke: var(--line); stroke-width: 0.3; }
.toolpath__hub  { fill: var(--bp-mid); stroke: var(--line); stroke-width: 0.3; }
.toolpath__bit  { fill: var(--spark-lt); }

@media (max-width: 64rem) {
  .drawing {
    position: relative;
    top: auto;
    right: auto;
    translate: none;
    margin: 2.25rem auto 0;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, #000 18%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, #000 18%);
  }
}

@media (max-width: 40rem) {
  .note--pcd, .leader--pcd { display: none; }
}


/* 7. Title block ===========================================================
   Bottom right of every blueprint hero. It also says which sheet you are on. */

.titleblock {
  position: absolute;
  right: var(--gutter);
  bottom: 1.4rem;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto auto;
  border: 1px solid rgba(169, 196, 212, 0.55);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--on-dark);
  animation: fade-in 1s ease-out 1.2s both;
}
.titleblock > div { padding: 0.45rem 0.85rem; }
.titleblock > div + div { border-left: 1px solid rgba(169, 196, 212, 0.55); }
.titleblock span { display: block; font-size: 0.72rem; color: var(--on-dark-muted); }

@media (max-width: 64rem) {
  .hero .titleblock {
    position: relative;
    right: auto;
    bottom: auto;
    width: fit-content;
    margin: 0.5rem var(--gutter) 0 auto;
  }
}
@media (max-width: 30rem) {
  .titleblock { font-size: 0.7rem; }
  .titleblock > div { padding: 0.4rem 0.6rem; }
}


/* 8. Paper sections (shared) =============================================== */

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section + .section { padding-top: 0; }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1rem clamp(2rem, 6vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section__head p { max-width: 40rem; color: var(--ink-2); }

.h2 { font-size: clamp(2.1rem, 1.3rem + 2.65vw, 3.3rem); color: var(--bp); }

@media (max-width: 52rem) {
  .section__head { grid-template-columns: 1fr; }
}

.section__foot { margin-top: 2.25rem; }


/* 9. Home ================================================================== */

/* Operations table */
.ops {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--bp);
}
.ops thead th {
  padding: 0.7rem 1rem 0.7rem 0;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  color: var(--steel);
  border-bottom: 1px solid rgba(44, 74, 94, 0.3);
}
.ops th, .ops td {
  padding: 1.1rem 1.5rem 1.1rem 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--rule);
}
.ops tbody th {
  width: 32%;
  font-weight: 800;
  font-size: clamp(1.15rem, 1rem + 0.63vw, 1.42rem);
  color: var(--bp);
}
.ops tbody th a { text-decoration: none; }
.ops tbody th a:hover { text-decoration: underline; text-decoration-color: var(--spark); text-underline-offset: 0.2em; }
.ops td { color: var(--ink-2); }

@media (max-width: 40rem) {
  .ops thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ops, .ops tbody, .ops tr, .ops th, .ops td { display: block; width: 100%; }
  .ops tr { padding-block: 1rem; border-bottom: 1px solid var(--rule); }
  .ops th, .ops td { padding: 0; border: 0; }
  .ops tbody th { width: 100%; margin-bottom: 0.3rem; }
}

/* Route comparison */
.routes {
  position: relative;
  isolation: isolate;
  color: var(--on-dark);
  background: var(--bp-mid);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.routes::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(169, 196, 212, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 196, 212, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(169, 196, 212, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 196, 212, 0.05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.routes h2 { font-size: clamp(2.1rem, 1.3rem + 2.65vw, 3.3rem); max-width: 22ch; }
.routes__lede { margin-top: 1.1rem; max-width: 38rem; color: var(--on-dark-muted); }

.route { margin-top: clamp(2rem, 4vw, 3rem); }
.route h3 { margin-bottom: 0.9rem; font-size: 1.1rem; }
.route ol {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
  list-style: none;
}
.route li {
  padding-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.35;
  border-top: 4px solid rgba(238, 237, 233, 0.32);
  color: var(--on-dark-muted);
}
/* Same step width, so the in-place route is visibly shorter. */
.route--short ol { width: calc(4 / 7 * 100% - 0.25rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.route--short li { border-top-color: var(--spark-lt); color: var(--on-dark); font-weight: 600; }

@media (max-width: 52rem) {
  .route ol,
  .route--short ol { width: 100%; grid-template-columns: 1fr; gap: 0; }
  .route li {
    padding: 0.55rem 0 0.55rem 1rem;
    border-top: 0;
    border-left: 4px solid rgba(238, 237, 233, 0.32);
  }
  .route--short li { border-left-color: var(--spark-lt); }
}

/* About */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.about__text { display: grid; gap: 1rem; max-width: 38rem; margin-top: 1.4rem; color: var(--ink-2); }

.facts { margin: 0; border-top: 2px solid var(--bp); }
.facts > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt { font-size: 0.92rem; font-weight: 600; color: var(--steel); }
.facts dd { margin: 0; font-weight: 600; }

@media (max-width: 52rem) {
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) {
  .facts > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Areas served */
.areas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 2rem clamp(2rem, 6vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.areas p { margin-top: 1rem; max-width: 30rem; color: var(--ink-2); }
.areas__lists { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; }
.areas h3 { margin-bottom: 0.75rem; font-size: 1.1rem; color: var(--bp); }
.areas ul { list-style: none; columns: 2; column-gap: 1.5rem; }
.areas__lists > div:last-child ul { columns: 1; }
.areas li { padding: 0.3rem 0; break-inside: avoid; border-bottom: 1px solid var(--rule); }

@media (max-width: 52rem) {
  .areas { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .areas__lists { grid-template-columns: 1fr; }
  .areas__lists > div:last-child ul { columns: 2; }
}


/* 10. Services page ======================================================== */

.service-index { border-top: 2px solid var(--bp); }
.service-index h2 { padding-top: 1rem; font-size: 1rem; color: var(--steel); font-weight: 600; }
.service-index ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0 2rem;
  margin-top: 0.5rem;
  list-style: none;
}
.service-index a {
  display: block;
  padding: 0.6rem 0;
  font-weight: 700;
  color: var(--bp);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.service-index a:hover { color: var(--spark-dk); }

.service {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 1.25rem clamp(2rem, 6vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.service:first-of-type { border-top: 2px solid var(--bp); }
.service h2 { font-size: clamp(1.75rem, 1.25rem + 1.75vw, 2.55rem); color: var(--bp); }
.service__kit { margin-top: 0.6rem; font-weight: 600; color: var(--steel); }
.service__body { display: grid; gap: 1rem; max-width: 44rem; color: var(--ink-2); }
.service__body h3 { margin-top: 0.5rem; font-size: 1.1rem; color: var(--ink); }

/* The service name stays in view while its details scroll past. */
@media (min-width: 52.01rem) {
  .service > header {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    align-self: start;
  }
}

@media (max-width: 52rem) {
  .service { grid-template-columns: 1fr; }
}

/* Spec sheets: a definition list, or a table for multi-machine services. */
.specs { margin: 0.25rem 0 0; border-top: 1px solid rgba(44, 74, 94, 0.45); }
.specs > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.97rem;
}
.specs dt { font-weight: 600; color: var(--steel); }
.specs dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 30rem) {
  .specs > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

.spec-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.spec-table caption { padding-bottom: 0.5rem; text-align: left; font-weight: 600; color: var(--ink); }
.spec-table th, .spec-table td {
  padding: 0.6rem 1rem 0.6rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.spec-table thead th { font-weight: 600; color: var(--steel); border-bottom-color: rgba(44, 74, 94, 0.45); }
.spec-table tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Download + FAQ */
.download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem 2rem;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--spark);
}
.download h2 { font-size: 1.45rem; color: var(--bp); }
.download p { margin-top: 0.4rem; color: var(--ink-2); }
@media (max-width: 40rem) {
  .download { grid-template-columns: 1fr; }
  .download .btn { width: 100%; }
}

.faq { border-top: 2px solid var(--bp); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  position: relative;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--bp);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.4rem;
  border-right: 2px solid var(--spark);
  border-bottom: 2px solid var(--spark);
  rotate: 45deg;
  transition: rotate 0.2s ease;
}
.faq details[open] summary::after { rotate: 225deg; margin-top: -0.1rem; }
.faq details > div { padding: 0 0 1.25rem; max-width: 46rem; color: var(--ink-2); }


/* 11. Contact page ========================================================= */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-info { display: grid; gap: 1.75rem; }
.info-block { padding-top: 1rem; border-top: 2px solid var(--bp); }
.info-block h2 { font-size: 1.2rem; color: var(--bp); margin-bottom: 0.6rem; }
.info-block p, .info-block address { font-style: normal; color: var(--ink-2); }
.info-block a { color: var(--ink); font-weight: 600; text-decoration-color: rgba(44, 74, 94, 0.35); text-underline-offset: 0.18em; }
.info-block a:hover { text-decoration-color: var(--spark); }

.contact-list { display: grid; gap: 0.5rem; list-style: none; }
.contact-list li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; }
.contact-list span { color: var(--steel); }
@media (max-width: 26rem) {
  .contact-list li { grid-template-columns: 1fr; gap: 0; }
}

.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 0.4rem 0; text-align: left; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.hours th { font-weight: 600; color: var(--ink); padding-right: 1rem; }
.hours td { color: var(--ink-2); }

@media (max-width: 52rem) {
  .contact { grid-template-columns: 1fr; }
}

/* Form */
.form-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--bp);
}
.form-card h2 { font-size: clamp(1.65rem, 1.3rem + 1.1vw, 2.2rem); color: var(--bp); }
.form-card > p { margin-top: 0.6rem; color: var(--ink-2); }

.form { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 36rem) {
  .form__row { grid-template-columns: 1fr; }
}

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.field .optional { font-weight: 400; color: var(--steel); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font: inherit;
  font-size: 1rem;           /* 16px stops iOS zooming into fields */
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(44, 74, 94, 0.65);   /* 3.6:1 on white (WCAG 1.4.11) */
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232C4A5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-size: 0.75rem auto;
  background-repeat: no-repeat;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--spark-lt);
  outline-offset: 0;
  border-color: var(--bp);
}
.field input:user-invalid,
.field textarea:user-invalid,
.field [aria-invalid="true"],
.select__button[aria-invalid="true"] { border-color: #B3261E; }
/* Message under a field the server refused (added by main.js). */
.field__error { margin-top: 0.35rem; font-size: 0.88rem; font-weight: 600; color: #B3261E; }

/* Custom dropdown (desktop only, built by main.js). Native menus on macOS
   open over the selected option, so they jump up or down depending on the
   value. This one always opens straight below the field, at the same width.
   The real <select> stays in the form, hidden, and carries the value. */
.select { position: relative; }
.select select { display: none; }
.select__button {
  display: block;
  width: 100%;
  padding: 0.75rem 2.75rem 0.75rem 0.875rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232C4A5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center / 0.75rem auto;
  border: 1px solid rgba(44, 74, 94, 0.65);
  border-radius: 2px;
}
.select__button:focus-visible,
.select.is-open .select__button {
  outline: 2px solid var(--spark-lt);
  outline-offset: 0;
  border-color: var(--bp);
}
.select__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  /* 6.9 rows: the next option peeks in under the fade, so the list
     clearly carries on. At 6.5 its text was hidden by the fade. */
  max-height: calc(0.25rem + 6.9 * 2.6rem);
  margin: 0;
  padding: 0.25rem 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--bp);
  border-radius: 2px;
  box-shadow: 0 10px 24px rgba(23, 43, 58, 0.16);
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 74, 94, 0.45) transparent;
}
/* Safari and Chrome on Mac hide scrollbars until you scroll; styling them
   keeps one visible. iPad Safari ignores this, hence the fade below. */
.select__list::-webkit-scrollbar { width: 8px; }
.select__list::-webkit-scrollbar-track { background: transparent; }
.select__list::-webkit-scrollbar-thumb {
  background: rgba(44, 74, 94, 0.45);
  border: 2px solid var(--white);
  border-radius: 4px;
}
.select__list[hidden] { display: none; }
.select__option {
  padding: 0.55rem 0.875rem;
  font-size: 1rem;
  line-height: 1.5rem;       /* row = 2.6rem, used in max-height above */
  color: var(--ink);
  cursor: pointer;
}
/* Group heading in the Service list ("On-site services", "Workshop services"):
   centred, with a rule either side so it reads as a divider, not an option. */
.select__group > ul { margin: 0; padding: 0; list-style: none; }
.select__heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bp);
  cursor: default;
}
.select__heading::before,
.select__heading::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(44, 74, 94, 0.3);
}
/* "More below" fade with an arrow, pinned to the bottom of the list while
   there are options out of view. main.js toggles .has-more. */
.select__more {
  position: sticky;
  bottom: -0.25rem;          /* sit over the list's bottom padding too */
  height: 2.6rem;
  margin-top: -2.6rem;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232C4A5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center bottom 0.55rem / 0.75rem auto,
    linear-gradient(rgba(255, 255, 255, 0), var(--white) 75%);
  opacity: 0;
  transition: opacity 0.15s;
}
.select__list.has-more .select__more { opacity: 1; }
.select__option.is-active { background: var(--paper); }
.select__option[aria-selected="true"] { font-weight: 600; color: var(--bp); }

/* Honeypot: hidden from people, visible to bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__privacy { font-size: 0.88rem; color: var(--steel); }
/* Privacy notice: "How we use your details" opens the full text in place. */
.form__privacy details { margin-top: 0.35rem; }
.form__privacy summary {
  width: fit-content;
  font-weight: 600;
  color: var(--bp);
  cursor: pointer;
}
.form__privacy summary:hover { text-decoration: underline; text-decoration-color: var(--spark); text-underline-offset: 0.18em; }
.form__privacy details p { margin-top: 0.5rem; max-width: 40rem; }
.form__privacy .text-link { font-weight: 600; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form__status { font-weight: 600; }
.form__status:focus { outline: none; }
/* The form needs JavaScript for its security token, so without it the form
   is hidden and an email link shown instead. */
.form__nojs { display: none; margin-top: 1.5rem; font-weight: 600; }
html:not(.js) .form { display: none; }
html:not(.js) .form__nojs { display: block; }
.form__status:empty { display: none; }
.form__status.is-success { color: #1F6B3A; }
.form__status.is-error { color: #B3261E; }
@media (max-width: 51.25rem) {
  .form__actions .btn { width: 100%; }
}


/* 12. Call to action band + footer ========================================= */

.cta {
  color: var(--on-dark);
  background: var(--bp-deep);
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  border-top: 4px solid var(--spark);
}
.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 6vw, 5rem);
  align-items: end;
}
.cta h2 { font-size: clamp(2.1rem, 1.3rem + 2.65vw, 3.3rem); }
.cta__inner > div > p { margin-top: 1rem; max-width: 36rem; color: var(--on-dark-muted); }
.cta__actions { display: grid; gap: 1.1rem; justify-items: start; }
.cta__phones { display: grid; gap: 0.35rem; list-style: none; }
.cta__phones span { display: inline-block; min-width: 4.5rem; color: var(--on-dark-muted); }
.cta__phones a { font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.cta__phones a:hover { text-decoration: underline; text-decoration-color: var(--spark-lt); }

@media (max-width: 52rem) {
  .cta__inner { grid-template-columns: 1fr; }
}
@media (max-width: 51.25rem) {
  .cta__actions { justify-items: stretch; }
}

.site-footer {
  color: var(--on-dark-muted);
  background: var(--bp-deep);
  padding-block: 2.75rem 2rem;
  border-top: 1px solid rgba(169, 196, 212, 0.2);
  font-size: 0.95rem;
}
.cta + .site-footer { padding-top: 2.5rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr 1.2fr 1.1fr;
  gap: 2rem;
}
.site-footer__brand img { height: 2.6rem; width: auto; }
.site-footer__brand p { margin-top: 1rem; max-width: 18rem; }
.site-footer h2 {
  margin-bottom: 0.6rem;
  font-size: 1rem;
  color: var(--on-dark);
}
.site-footer ul { display: grid; gap: 0.35rem; list-style: none; }
.site-footer address { font-style: normal; }
.site-footer__group {
  margin-top: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(169, 196, 212, 0.15);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer__hours li { display: flex; justify-content: space-between; gap: 1rem; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(169, 196, 212, 0.2);
  font-size: 0.85rem;
}

@media (max-width: 60rem) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 34rem) {
  .site-footer__grid { grid-template-columns: 1fr; }
}


/* 13. 404 page ============================================================= */

.error-page { min-height: 70vh; display: flex; align-items: center; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; }
@media (max-width: 51.25rem) {
  .error-page__actions .btn { width: 100%; }
}


/* 14. Motion =============================================================== */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes draw-in {
  from { opacity: 0; scale: 0.94; }
  to   { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* Show the finished cut and hide the moving tool. */
  .toolpath__run { opacity: 1 !important; }
  .toolpath__cut { stroke-dashoffset: 0 !important; }
  .toolpath__tool { display: none; }
}


/* 15. Workshop machining page + cross-links ================================
   Added with the Workshop machining page. The cross-link card (Home,
   Services, Workshop) follows the download card; the steps sit in the
   blueprint "routes" band like the route comparison on the home page. */

.crosslink {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem 2rem;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--bp);
}
.section__foot + .crosslink { margin-top: clamp(2rem, 4vw, 3rem); }
.crosslink h2,
.crosslink h3 { font-size: 1.45rem; color: var(--bp); }
.crosslink p { margin-top: 0.4rem; max-width: 44rem; color: var(--ink-2); }
@media (max-width: 40rem) {
  .crosslink { grid-template-columns: 1fr; }
  .crosslink .btn { width: 100%; }
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding-top: 0.9rem;
  border-top: 4px solid var(--spark-lt);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--line);
}
.steps h3 { font-size: 1.1rem; }
.steps p { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.5; color: var(--on-dark-muted); }

@media (max-width: 52rem) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li {
    padding: 0.9rem 0 0.9rem 1rem;
    border-top: 0;
    border-left: 4px solid var(--spark-lt);
  }
}

/* Four menu items: without JavaScript the links stay inline on narrow
   tablets, so keep that header on one line. */
@media (min-width: 48.01rem) and (max-width: 60rem) {
  html:not(.js) .site-header__inner { gap: 1.25rem; }
  html:not(.js) .nav ul { gap: 1.1rem; }
  .site-header .btn--small { white-space: nowrap; }
}