/* Taylor Turning, Inc. — site styles
   Layout: left-aligned content on a 1200px measure. Graphite bands (header, hiring, footer)
   frame a light "inspection room" body. One accent: layout-fluid blue.
   Type: Archivo throughout; headlines run expanded (wdth ~118) like a machine nameplate. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Color */
  --paper: #F6F7F8;        /* page */
  --plate: #E8ECEF;        /* aluminum band */
  --white: #FFFFFF;        /* fields, data plate */
  --graphite: #1B2027;     /* text, dark bands */
  --graphite-2: #262D36;   /* raised surface on dark */
  --steel: #55606B;        /* secondary text */
  --rule: #CBD2D9;         /* hairlines on light */
  --rule-dark: #3A434E;    /* hairlines on dark */
  --blue: #1F45B5;         /* layout-fluid blue: actions, links, focus */
  --blue-deep: #17368F;
  --blue-tint: #E3E9F8;
  --on-dark: #EEF1F4;
  --on-dark-muted: #A7B1BB;
  --ok: #1D6E46;
  --ok-tint: #E2F1E8;
  --err: #A8261F;
  --err-tint: #F8E5E3;

  /* Type */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wide: 116%;
  --step--1: 0.84rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.75rem, 1.3rem + 1.6vw, 2.35rem);
  --step-4: clamp(2.2rem, 1.45rem + 3.1vw, 3.6rem);

  /* Layout */
  --measure: 1200px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --section: clamp(56px, 8vw, 112px);
  --header-h: 68px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--graphite);
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

h1, h2, h3 {
  font-stretch: var(--wide);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.2; }

p { margin: 0; max-width: 64ch; text-wrap: pretty; }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--steel); max-width: 58ch; }

a { color: var(--blue); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-deep); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--on-dark); }

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 40px);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--white); color: var(--graphite); padding: 10px 14px; border-radius: 4px;
}
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 22px;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  border-radius: 4px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-deep); color: var(--white); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--graphite); border-color: var(--graphite); }
.btn-secondary:hover { background: var(--graphite); color: var(--white); text-decoration: none; }
.on-dark .btn-secondary { color: var(--on-dark); border-color: var(--on-dark-muted); }
.on-dark .btn-secondary:hover { background: var(--on-dark); color: var(--graphite); border-color: var(--on-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--graphite); color: var(--on-dark);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; padding-block: 8px; }
.brand img { height: 54px; width: auto; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  color: var(--on-dark); text-decoration: none; font-weight: 500; font-size: 0.98rem;
  padding: 10px 12px; border-radius: 4px; display: inline-flex; align-items: center; gap: 8px;
}
.nav a:hover { background: var(--graphite-2); color: var(--white); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--on-dark); border-radius: 0; }
.nav .tag {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.02em;
  background: var(--blue); color: var(--white); padding: 2px 7px; border-radius: 99px;
}
.nav .btn-primary { margin-left: 10px; min-height: 42px; padding: 0 18px; }
.nav .btn-primary:hover { background: var(--blue-deep); }
.nav .btn[aria-current="page"] { box-shadow: none; border-radius: 4px; }
.nav-toggle {
  display: none; font: inherit; font-weight: 600; color: var(--on-dark);
  background: transparent; border: 1.5px solid var(--rule-dark); border-radius: 4px;
  min-height: 42px; padding: 0 14px; cursor: pointer;
}

@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--graphite); border-top: 1px solid var(--rule-dark);
    padding: 8px var(--gutter-r) 20px var(--gutter);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--rule-dark); border-radius: 0; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--on-dark); padding-left: 14px; }
  .nav .btn-primary { margin: 16px 0 0; border-bottom: 0; justify-content: center; border-radius: 4px; }
  .brand img { height: 44px; }
}

/* Sections */
.section { padding-block: var(--section); }
.section-plate { background: var(--plate); }
.section-dark { background: var(--graphite); color: var(--on-dark); }
.section-dark .lead, .section-dark .muted { color: var(--on-dark-muted); }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.muted { color: var(--steel); }
.small { font-size: var(--step--1); }
.stack { display: grid; gap: 20px; align-content: start; }
.stack-sm { display: grid; gap: 10px; align-content: start; }

/* Home hero */
.hero { padding-top: clamp(40px, 6vw, 88px); }
.hero-text { display: grid; gap: 24px; padding-bottom: clamp(32px, 4vw, 56px); }
.hero-text h1 { max-width: 17ch; font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem); font-weight: 660; letter-spacing: -0.02em; }
.hero-photo { position: relative; }
.hero-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 700px) { .hero-photo img { aspect-ratio: 4 / 3; } }

/* Data plate: the one raised object on the page */
.plate-wrap { position: relative; margin-top: -56px; }
.data-plate {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; background: var(--white); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 1px 0 var(--rule), 0 18px 40px -24px rgba(27, 32, 39, 0.35);
}
.data-plate > div { padding: 22px 24px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.data-plate > div + div { border-left: 1px solid var(--rule); }
.data-plate dt { font-size: var(--step--1); color: var(--steel); font-weight: 500; }
.data-plate dd { margin: 0; font-stretch: var(--wide); font-weight: 640; font-size: var(--step-2); line-height: 1.15; }
@media (max-width: 820px) {
  .plate-wrap { margin-top: -32px; }
  .data-plate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-plate > div:nth-child(3) { border-left: 0; }
  .data-plate > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 380px) { .data-plate > div { padding: 16px; } .data-plate dd { font-size: var(--step-1); } }

/* Process columns */
.process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.process > article { display: grid; gap: 12px; align-content: start; border-top: 2px solid var(--graphite); padding-top: 20px; min-width: 0; }
.process .spec { font-weight: 600; font-size: 0.98rem; }
@media (max-width: 820px) { .process { grid-template-columns: 1fr; } }

/* Split layouts */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.top { align-items: start; }
.split > * { min-width: 0; }
.split-60 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 860px) { .split, .split-60 { grid-template-columns: 1fr; } }
.photo { border-radius: 4px; overflow: hidden; background: var(--plate); }
.photo img { width: 100%; object-fit: cover; }
.photo-43 img { aspect-ratio: 4 / 3; }
figcaption { font-size: var(--step--1); color: var(--steel); padding-top: 10px; }
.section-dark figcaption { color: var(--on-dark-muted); }

/* Facts list (schedule, benefits) */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.facts li { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); font-weight: 500; min-width: 0; }
.facts li:nth-child(odd) { padding-right: 20px; }
.section-dark .facts, .section-dark .facts li { border-color: var(--rule-dark); }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } }

/* Spec tables */
.spec-table-wrap { overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.spec-table caption { text-align: left; font-weight: 600; padding-bottom: 10px; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec-table thead th { font-size: var(--step--1); color: var(--steel); font-weight: 500; border-bottom: 1.5px solid var(--graphite); }
.spec-table tbody th { font-weight: 600; }
.spec-table td.num { white-space: nowrap; }
.spec-table .metric { color: var(--steel); }

/* Capability blocks */
.cap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); }
.cap:first-of-type { border-top: 0; padding-top: 0; }
.cap > * { min-width: 0; }
@media (max-width: 860px) { .cap { grid-template-columns: 1fr; } }

.note { font-size: var(--step--1); color: var(--steel); border-left: 2px solid var(--rule); padding-left: 14px; max-width: 70ch; }

/* Credentials */
.creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.creds > div { padding: 22px 24px 22px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 6px; min-width: 0; }
.creds > div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.creds strong { font-stretch: var(--wide); font-weight: 640; font-size: var(--step-1); }
@media (max-width: 640px) { .creds { grid-template-columns: 1fr; } .creds > div + div { padding-left: 0; border-left: 0; } }

/* Checklist of what to send */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.checklist li { padding: 12px 0 12px 30px; border-bottom: 1px solid var(--rule); position: relative; }
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 7px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg);
}

/* Page heads (inner pages) */
.page-head { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(32px, 4vw, 56px); display: grid; gap: 20px; }
.page-head h1 { max-width: 20ch; }

/* Positions */
.positions { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1.5px solid var(--graphite); }
.positions li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.positions strong { font-stretch: var(--wide); font-weight: 640; font-size: var(--step-1); }

/* Ownership points */
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 56px); }
.points > div { display: grid; gap: 8px; align-content: start; border-top: 2px solid var(--graphite); padding-top: 16px; min-width: 0; }
@media (max-width: 680px) { .points { grid-template-columns: 1fr; } }

/* Forms */
.form-panel { background: var(--white); border: 1px solid var(--rule); border-radius: 4px; padding: clamp(22px, 3.5vw, 40px); }
.form { display: grid; gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: 0.96rem; }
.field .hint { font-size: var(--step--1); color: var(--steel); }
.req { color: var(--steel); font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--graphite);
  background: var(--paper); border: 1.5px solid var(--rule); border-radius: 4px;
  padding: 12px 14px; min-height: 48px;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--steel); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); background: var(--white); }
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: var(--err); }
.field .error { color: var(--err); font-size: var(--step--1); font-weight: 500; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: 4px; padding: 14px 16px; font-weight: 500; }
.form-status[data-kind="ok"] { background: var(--ok-tint); color: var(--ok); }
.form-status[data-kind="err"] { background: var(--err-tint); color: var(--err); }
.form-status[data-kind="info"] { background: var(--blue-tint); color: var(--blue-deep); }
.form-done { display: grid; gap: 14px; }
.form-done h3 { font-size: var(--step-2); }
button[disabled] { opacity: 0.6; cursor: progress; }

/* Contact details */
.contact-list { display: grid; gap: 0; border-top: 1.5px solid var(--graphite); }
.contact-list > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.contact-list dt { font-size: var(--step--1); color: var(--steel); }
.contact-list dd { margin: 0; font-weight: 600; font-size: 1.08rem; }
.contact-list a { color: var(--graphite); }

/* Prose pages */
.prose { display: grid; gap: 18px; max-width: 70ch; }
.prose h2 { font-size: var(--step-2); margin-top: 16px; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* Footer: laid out like a drawing title block */
.site-footer { background: var(--graphite); color: var(--on-dark); padding-block: 56px 32px; }
.title-block {
  display: grid; grid-template-columns: 1.3fr 1.2fr 1fr 1fr;
  border: 1px solid var(--rule-dark); border-radius: 2px;
}
.title-block > div { padding: 16px 18px; border-left: 1px solid var(--rule-dark); display: grid; gap: 6px; align-content: start; min-width: 0; }
.title-block > div:first-child { border-left: 0; }
.title-block .row2 { border-top: 1px solid var(--rule-dark); }
.title-block .cell-label { font-size: 0.74rem; color: var(--on-dark-muted); letter-spacing: 0.02em; }
.title-block .cell-value { font-weight: 500; overflow-wrap: anywhere; }
.title-block a { color: var(--on-dark); }
.title-block a:hover { color: var(--white); }
.title-block .brand-cell { grid-row: span 2; align-content: space-between; gap: 24px; }
.title-block .brand-cell img { width: 150px; height: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; font-size: var(--step--1); color: var(--on-dark-muted); }
@media (max-width: 900px) {
  .title-block { grid-template-columns: 1fr 1fr; }
  .title-block .brand-cell { grid-row: auto; grid-column: 1 / -1; border-bottom: 1px solid var(--rule-dark); }
  .title-block > div:nth-child(2n) { border-left: 0; }
  .title-block > div { border-top: 1px solid var(--rule-dark); }
  .title-block > div:first-child { border-top: 0; }
}
@media (max-width: 520px) {
  .title-block { grid-template-columns: 1fr; }
  .title-block > div { border-left: 0 !important; }
}

/* Utility */
.mt-lg { margin-top: clamp(32px, 4vw, 56px); }
.center-y { align-items: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .nav, .btn, .form-panel { display: none !important; }
  body { background: #fff; }
}

.split-40 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr); }
@media (max-width: 860px) { .split-40 { grid-template-columns: 1fr; } }