/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.relative{position:relative}.start{inset-inline-start:var(--spacing)}.grid{display:grid}.table{display:table}}:root{--ink:#131416;--paper:#f2f1ec;--muted:#777770;--copper:#d77735;--copper-dark:#b85822;--line:#d6d3ca;--night:#090b0d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}em{color:var(--copper);font-style:normal}.site-header{z-index:20;color:#fff;background:linear-gradient(#050709b3,#0000);border-bottom:1px solid #fff3;grid-template-columns:220px 1fr 160px;align-items:center;height:92px;padding:0 clamp(24px,5vw,82px);display:grid;position:absolute;top:0;left:0;right:0}.wordmark{letter-spacing:.48em;width:max-content;font-size:25px;font-weight:300;position:relative}.wordmark span{background:var(--copper);width:54px;height:2px;position:absolute;bottom:-12px;left:0}.site-header nav{text-transform:uppercase;letter-spacing:.17em;justify-self:center;gap:34px;font-size:12px;display:flex}.site-header nav a{opacity:.72;transition:all .2s}.site-header nav a:hover{opacity:1}.nav-cta{text-transform:uppercase;letter-spacing:.12em;justify-self:end;font-size:12px;font-weight:700}.nav-cta span,.button span,.text-link span{color:var(--copper);margin-left:8px}.hero{color:#fff;background:url(/images/hero-v2.png) 50%/cover no-repeat;align-items:center;height:100vh;min-height:780px;display:flex;position:relative;overflow:hidden}.hero-scrim{background:linear-gradient(90deg,#030608eb 0%,#040709b3 42%,#04070914 76%),linear-gradient(#0000 40%,#0305067a);position:absolute;inset:0}.hero-content{z-index:2;width:min(730px,88vw);margin-left:clamp(24px,6vw,100px);padding-top:62px}.eyebrow{text-transform:uppercase;letter-spacing:.32em;color:var(--copper);align-items:center;gap:13px;margin-bottom:22px;font-size:12px;font-weight:800;display:flex}.eyebrow:before{content:"";background:currentColor;width:34px;height:2px;display:block}.eyebrow.light{color:#e98a4c}.hero h1{letter-spacing:-.045em;max-width:850px;margin-bottom:28px;font-size:clamp(54px,6.2vw,92px);line-height:.98}.hero h1 em{display:block}.hero-copy{color:#ffffffb8;max-width:600px;font-size:clamp(17px,1.55vw,23px);line-height:1.55}.hero-actions{align-items:center;gap:25px;margin-top:36px;display:flex}.button{text-transform:uppercase;letter-spacing:.14em;border:0;justify-content:center;align-items:center;min-height:54px;padding:0 24px;font-size:12px;font-weight:800;display:inline-flex}.button.copper{background:var(--copper);color:#111}.button.copper span{color:#111}.concept-note{color:#ffffff7a;font-size:11px}.hero-tag{z-index:2;letter-spacing:.34em;color:#ffffff94;font-size:10px;font-weight:800;position:absolute;bottom:38px;left:6vw}.hero-tag:before{content:"/";color:var(--copper);margin-right:15px}.section-dark{background:radial-gradient(circle at 85% 25%,#2a1913 0,transparent 32%),var(--night);color:#fff}.benefits{padding:120px clamp(24px,6vw,100px) 72px}.section-heading{max-width:820px;margin-bottom:64px}.section-heading.inverse p{color:#a8a7a2}.section-heading h2,.technology h2,.newsletter h2{letter-spacing:-.04em;margin-bottom:24px;font-size:clamp(45px,5vw,72px);line-height:1.02}.section-heading>p:last-child{color:#62625f;max-width:690px;font-size:20px}.benefit-grid{border-top:1px solid #ffffff2e;border-bottom:1px solid #ffffff2e;grid-template-columns:repeat(5,1fr);display:grid}.benefit-card{border-right:1px solid #ffffff21;min-height:230px;padding:32px 22px}.benefit-card:last-child{border-right:0}.benefit-card>span{color:var(--copper);letter-spacing:.2em;font-size:12px}.benefit-card h3{margin:54px 0 12px;font-size:19px;line-height:1.2}.benefit-card p{color:#c9c8c3;margin:0;font-size:16px;font-weight:600;line-height:1.5}.qualification{color:#8c8c88;margin:20px 0 0;font-size:12px;font-style:italic}.technology{background:#ecebe6;grid-template-columns:minmax(390px,.72fr) 1.28fr;min-height:780px;display:grid}.technology-copy{align-self:center;padding:120px clamp(34px,5vw,82px)}.technology-copy .lead{color:#2f3030;margin-bottom:28px;font-size:22px;line-height:1.45}.technology-copy>p:not(.eyebrow):not(.lead){color:#686865;max-width:620px;font-size:16px;line-height:1.65}.text-link{text-transform:uppercase;letter-spacing:.14em;border-bottom:1px solid var(--ink);margin-top:24px;padding-bottom:7px;font-size:12px;font-weight:800;display:inline-block}.technology-image{background:#ecebe6 url(/images/engine-product-v2.png) 50%/contain no-repeat;min-height:650px;position:relative;overflow:hidden}.technology-image:after{content:"CONCEPT VISUAL";color:#777;letter-spacing:.24em;font-size:9px;position:absolute;bottom:22px;right:26px}.tech-callout{z-index:2;color:#151617;width:210px;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;line-height:1.35;position:absolute}.tech-callout:before{content:"";background:var(--copper);width:62px;height:2px;position:absolute;top:50%}.tech-callout:after{content:"";border-top:5px solid #0000;border-bottom:5px solid #0000;width:0;height:0;position:absolute;top:calc(50% - 4px)}.tech-callout.one{text-align:right;top:44%;left:2%}.tech-callout.one:before{left:calc(100% + 12px)}.tech-callout.one:after{border-left:8px solid var(--copper);left:calc(100% + 70px)}.tech-callout.two{top:35%;right:2%}.tech-callout.two:before{right:calc(100% + 12px)}.tech-callout.two:after{border-right:8px solid var(--copper);right:calc(100% + 70px)}.manifesto{color:#fff;background:linear-gradient(100deg,#07090af7,#0b0c0cbf),url(/images/texture.jpg) 50%/cover;padding:130px clamp(24px,10vw,170px)}.manifesto blockquote{letter-spacing:-.035em;max-width:1150px;margin:0;font-size:clamp(35px,4.7vw,68px);line-height:1.18}.manifesto-signoff{color:var(--copper);margin-top:35px;font-size:17px;font-weight:700}.markets{padding:120px clamp(24px,6vw,100px)}.market-grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.market-card{background-position:50%;background-size:cover;height:430px;position:relative;overflow:hidden}.market-card:after{content:"";background:linear-gradient(#0000 40%,#060809e6);position:absolute;inset:0}.market-card div{z-index:1;color:#fff;position:absolute;bottom:24px;left:24px}.market-card p{letter-spacing:.14em;text-transform:uppercase;color:#bbb;margin-bottom:7px;font-size:10px}.market-card h3{margin:0;font-size:28px}.question-panel{border-top:1px solid var(--line);grid-template-columns:.7fr 1.4fr 170px;align-items:center;gap:30px;margin-top:90px;padding:62px 0;display:grid}.question-panel>p{color:#777;font-size:15px}.question-panel h3{margin:0;font-size:clamp(27px,3vw,43px);line-height:1.15}.newsletter{background:var(--night);color:#fff;grid-template-columns:1fr 1fr;gap:80px;padding:90px clamp(24px,6vw,100px);display:grid}.newsletter form{align-self:center}.newsletter label{text-transform:uppercase;letter-spacing:.16em;color:#858585;margin-bottom:10px;font-size:10px;display:block}.field-row{border-bottom:1px solid #666;display:flex}.field-row input{color:#fff;background:0 0;border:0;outline:none;flex:1;padding:14px 0;font-size:18px}.field-row button{color:var(--copper);text-transform:uppercase;letter-spacing:.12em;background:0 0;border:0;font-size:11px;font-weight:700}footer{color:#fff;background:#050708;padding:78px clamp(24px,6vw,100px) 30px}.footer-brand{flex-direction:column;gap:35px;display:flex}.footer-brand p{color:#747575;max-width:340px}.footer-links{grid-template-columns:repeat(3,1fr);gap:50px;margin-top:-100px;margin-left:42%;display:grid}.footer-links div{flex-direction:column;gap:9px;display:flex}.footer-links b{text-transform:uppercase;color:var(--copper);letter-spacing:.2em;margin-bottom:8px;font-size:10px}.footer-links a{color:#a4a5a5;font-size:13px}.footer-bottom{color:#5e6060;text-transform:uppercase;letter-spacing:.15em;border-top:1px solid #292b2c;justify-content:space-between;margin-top:70px;padding-top:22px;font-size:10px;display:flex}@media (max-width:980px){.site-header{grid-template-columns:1fr auto;height:78px}.site-header nav{display:none}.benefit-grid{grid-template-columns:repeat(2,1fr)}.benefit-card{border-bottom:1px solid #ffffff21}.technology{grid-template-columns:1fr}.technology-image{min-height:560px}.tech-callout.one{left:4%}.tech-callout.two{right:4%}.market-grid{grid-template-columns:repeat(2,1fr)}.question-panel,.newsletter{grid-template-columns:1fr}.footer-links{margin:60px 0 0}}@media (max-width:600px){.site-header{padding:0 20px}.wordmark{font-size:20px}.nav-cta{font-size:10px}.hero{background-position:60%;min-height:720px}.hero-content{margin-left:22px;padding-top:30px}.hero h1{font-size:48px}.hero-copy{font-size:16px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-tag{display:none}.benefits,.markets{padding:90px 22px}.benefit-grid{grid-template-columns:1fr}.benefit-card{border-right:0;min-height:180px}.benefit-card h3{margin-top:35px}.technology-copy{padding:90px 22px}.technology-image{min-height:390px}.tech-callout{display:none}.manifesto{padding:90px 22px}.market-grid{grid-template-columns:1fr}.market-card{height:360px}.question-panel{margin-top:55px}.newsletter{padding:75px 22px}.field-row input{min-width:0}.footer-links{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;gap:8px}}

/* ---------------------------------------------------------------------------
   Subpages. Everything above this line came from the original concept build.
   --------------------------------------------------------------------------- */

/* Compact dark band at the top of a subpage. The .site-header is absolutely
   positioned and white, so a subpage needs a dark backdrop behind it or the
   navigation disappears against --paper. The top padding clears the 92px
   header. */
.page-hero {
  padding: 186px clamp(24px, 6vw, 100px) 92px;
}

.page-hero .section-heading {
  margin-bottom: 0;
}

/* Matches .section-heading h2 — a subpage title is an h1 but reads at the
   same scale as a homepage section heading. */
.page-hero h1 {
  letter-spacing: -.04em;
  margin-bottom: 0;
  font-size: clamp(45px, 5vw, 72px);
  line-height: 1.02;
}

/* .section-heading.inverse p (0-2-1) otherwise outranks .eyebrow.light (0-2-0)
   and greys out the eyebrow. Three classes (0-3-0) restores the copper the
   .light variant was written for. */
.page-hero .section-heading .eyebrow {
  color: #e98a4c;
}

.team {
  padding: 110px clamp(24px, 6vw, 100px);
}

.team-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 44px;
  display: grid;
}

.team-photo {
  aspect-ratio: 560 / 646;
  object-fit: cover;
  background: var(--line);
  width: 100%;
  margin-bottom: 26px;
}

.team-card h2 {
  letter-spacing: -.02em;
  margin-bottom: 7px;
  font-size: 26px;
  line-height: 1.15;
}

/* Scoped to .team-card so it outranks the .team-card p colour below. */
.team-card .team-role {
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--copper);
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 800;
}

.team-card p {
  color: #62625f;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.65;
}

.team-links {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .page-hero { padding: 150px 22px 76px }
  .team { padding: 84px 22px }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 34px }
}

@media (max-width: 600px) {
  .page-hero { padding: 150px 22px 62px }
  .page-hero h1 { font-size: 40px }
  .team-grid { grid-template-columns: 1fr; gap: 52px }
  /* Full-bleed portraits get unwieldy on a phone. */
  .team-photo { max-width: 320px }
}

/* ---------------------------------------------------------------------------
   Mobile navigation.

   The original build hid the nav entirely below 980px. That was survivable
   when every link was a scroll shortcut on a one-page site; with real pages it
   left phones no way to navigate. Rather than a JavaScript menu, the nav drops
   to a second header row that scrolls sideways if it runs out of width.

   These rules must come after the original @media blocks: they have the same
   specificity as the display:none they override, so source order decides.
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .site-header {
    /* The header is absolute over the hero, so it grows downward without
       displacing anything. */
    grid-template-columns: 1fr auto;
    grid-template-rows: 62px auto;
    height: auto;
    padding-bottom: 12px;
    /* The default gradient fades to transparent, which would strand white
       links over a pale part of the hero image. */
    background: linear-gradient(#050709f2, #050709b3);
  }

  /* Every child is placed explicitly. Left to auto-placement, the full-width
     nav collides with the wordmark and pushes the CTA out of the top row. */
  .site-header .wordmark {
    grid-area: 1 / 1;
  }

  .site-header .nav-cta {
    grid-area: 1 / 2;
  }

  .site-header nav {
    grid-area: 2 / 1 / 3 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-self: start;
    gap: 9px 17px;
  }

  .site-header nav a {
    white-space: nowrap;
  }

  .site-header nav a[aria-current="page"] {
    opacity: 1;
    color: var(--copper);
  }
}

/* Tightened so all five links still fit on one row at 390px. */
@media (max-width: 600px) {
  .site-header nav {
    letter-spacing: .12em;
    gap: 8px 14px;
    font-size: 11px;
  }
}

/* ---------------------------------------------------------------------------
   Contact
   --------------------------------------------------------------------------- */
.contact-page {
  padding: 110px clamp(24px, 6vw, 100px);
}

.contact-intro {
  max-width: 720px;
  margin-bottom: 64px;
}

.contact-intro .lead {
  color: #2f3030;
  margin: 0;
  font-size: 22px;
  line-height: 1.45;
}

.contact-grid {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.contact-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 30px 40px 0;
}

.contact-card:last-child {
  border-right: 0;
}

.contact-role {
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--copper);
  margin-bottom: 16px;
  font-size: 10px;
  font-weight: 800;
}

.contact-email {
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  font-size: clamp(16px, 1.5vw, 20px);
  transition: border-color .2s;
  display: inline-block;
  word-break: break-word;
}

.contact-email:hover {
  border-bottom-color: var(--copper);
}

.contact-place {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 20px);
}

/* ---------------------------------------------------------------------------
   Careers, and the post-signup thank-you page
   --------------------------------------------------------------------------- */
.careers {
  padding: 110px clamp(24px, 6vw, 100px);
}

.careers-copy {
  max-width: 720px;
}

.careers-copy .lead {
  color: #2f3030;
  margin-bottom: 26px;
  font-size: 22px;
  line-height: 1.45;
}

.careers-copy p {
  color: #62625f;
  margin-bottom: 18px;
  font-size: 17px;
  line-height: 1.65;
}

.careers-copy .button {
  margin-top: 22px;
}

.inline-link {
  border-bottom: 1px solid var(--copper);
  padding-bottom: 1px;
}

/* ---------------------------------------------------------------------------
   News
   --------------------------------------------------------------------------- */
.news {
  padding: 110px clamp(24px, 6vw, 100px);
}

.news-item {
  border-top: 1px solid var(--line);
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 46px 0;
  display: grid;
}

.news-date {
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--copper);
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 800;
}

.news-body {
  max-width: 720px;
}

.news-body h2 {
  letter-spacing: -.02em;
  margin-bottom: 16px;
  font-size: clamp(23px, 2.2vw, 30px);
  line-height: 1.2;
}

.news-body p {
  color: #62625f;
  margin-bottom: 14px;
  font-size: 17px;
  line-height: 1.65;
}

.news-body a:not(.text-link) {
  border-bottom: 1px solid var(--copper);
}

/* ---------------------------------------------------------------------------
   Long-form technical articles

   These pages are Markdown, so the rules are element-based rather than
   class-based — there are no hooks to hang classes on.
   --------------------------------------------------------------------------- */
.article {
  padding: 100px clamp(24px, 6vw, 100px);
}

/* The body was full-bleed within the section padding, which put the measure
   at roughly 150 characters on a wide desktop, twice what reads comfortably.
   The cap the old comment anticipated is applied below, on the text elements
   only, so figures keep their own wider column. */
.article-body {
  max-width: none;
}

/* Figures are constrained even though the prose is not — a line plot stretched
   to 1200px is mostly whitespace. */
.article-body img {
  max-width: 900px;
}

.article-body .lead {
  color: #2f3030;
  margin-bottom: 34px;
  font-size: 22px;
  line-height: 1.45;
}

.article-body h2 {
  letter-spacing: -.02em;
  margin: 58px 0 18px;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.2;
}

.article-body h3 {
  margin: 40px 0 14px;
  font-size: 20px;
}

.article-body p {
  color: #4a4a47;
  margin-bottom: 20px;
  font-size: 17px;
  line-height: 1.72;
}

/* The references sections carry bare URLs up to 175 characters, which
   otherwise push the page wider than a phone viewport. */
.article-body p,
.article-body li,
.article-body a,
.news-body p,
.news-body a {
  overflow-wrap: break-word;
}

.article-body ul,
.article-body ol {
  color: #4a4a47;
  margin: 4px 0 24px;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.72;
}

.article-body li {
  margin-bottom: 8px;
  list-style: disc;
}

.article-body ol li {
  list-style: decimal;
}

.article-body a {
  border-bottom: 1px solid var(--copper);
  padding-bottom: 1px;
}

.article-body strong {
  color: var(--ink);
}

/* Figures.

   The old Squarespace page paired figures on a 24-column grid — 1 and 2 on one
   row, 3 and 4 on the next, 5 and 6 after that, with figure 8 alone at about
   half width. That pairing is reproduced here, since the figures in each pair
   are meant to be compared against each other. */
.figure-row {
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 26px;
  margin: 34px 0 32px;
  display: grid;
}

.figure-half {
  max-width: 620px;
  margin: 34px 0 32px;
}

.article-body figure {
  margin: 0;
}

.article-body figure img {
  background: #fff;
  border: 1px solid var(--line);
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Paired figures have very different aspect ratios — a tall piston cutaway
   beside a squat rotor diagram. Giving them a common height keeps neither from
   dominating and lines the captions up with each other. */
.figure-row figure img {
  object-fit: contain;
  height: 380px;
  padding: 10px;
}

.article-body figcaption {
  color: #85857f;
  margin-top: 11px;
  font-size: 13px;
  line-height: 1.5;
}

/* Markdown images that are not inside a <figure> (the other two articles). */
.article-body p > img {
  background: #fff;
  border: 1px solid var(--line);
  width: 100%;
  margin: 36px 0 10px;
}

.article-body p > img + em,
.article-body p > em:only-child {
  color: #85857f;
  margin-bottom: 30px;
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
  display: block;
}

/* Overrides the site-wide `em { color: copper }`, which would otherwise make
   every emphasised run inside this prose orange. */
.article-body em {
  color: inherit;
  font-style: italic;
}

/* Formspree honeypot — must stay in the DOM but never be seen or focusable. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 980px) {
  .contact-page, .careers, .news, .article { padding: 84px 22px }
  .contact-grid { grid-template-columns: 1fr }
  .contact-card { border-right: 0; padding-right: 0 }
  .news-item { grid-template-columns: 1fr; gap: 12px; padding: 36px 0 }
}

/* Side-by-side figures become unreadable once each is under ~300px. */
@media (max-width: 760px) {
  .figure-row { grid-template-columns: 1fr; gap: 30px }
}

/* ---------------------------------------------------------------------------
   Machine shop directory.

   The interactive directory is a self-contained widget carried over from
   Squarespace. All of its own styling lives in machine-shops.css, scoped under
   .ms-page so its :root tokens (which redefine --ink and --muted) and its bare
   body/footer/a/h1 rules cannot reach the site chrome. It was written to sit
   inside a Squarespace container, so it brings no page padding of its own.
   --------------------------------------------------------------------------- */
.machine-shops {
  padding: 74px clamp(24px, 6vw, 100px) 96px;
}

@media (max-width: 980px) {
  .machine-shops { padding: 60px 22px 80px }
}


/* ---------------------------------------------------------------------------
   Full-width text.

   The concept build capped most prose well short of the page — 820px on
   section headings, 690px on their standfirsts, 720px on the Contact, Careers
   and News columns. On a 1440px screen that is roughly half the width, which
   is what made these pages look empty. Everything below runs to the section
   padding instead, matching the technical articles and the shop directory.

   Not removed, and why:
   - .hero-content is width: min(730px, 88vw). The hero text is composed to sit
     clear of the generator render on the right; widening it runs the headline
     across the product.
   - .footer-brand p is 340px because .footer-links is pulled up beside it with
     a negative margin. Widening the tagline collides with the link columns.
   - Image caps (.article-body img, .figure-half, .team-photo) are unchanged —
     a diagram stretched across 1200px is mostly whitespace.
   --------------------------------------------------------------------------- */
.section-heading,
.section-heading > p:last-child,
.technology-copy > p:not(.eyebrow):not(.lead),
.manifesto blockquote,
.contact-intro,
.careers-copy,
.news-body {
  max-width: none;
}

/* The claim line ("15% more efficient, 4× lighter and 4× smaller?") sat in the
   middle column of a .7fr / 1.4fr / 170px grid, which at 1440px left it about
   690px — not enough at 43px, so it broke with "smaller?" alone on line two.
   The heading column gets the space the intro column was not using, and the
   type scales with the viewport rather than jumping to a fixed 43px. */
.question-panel {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.85fr) 170px;
}

.question-panel h3 {
  font-size: clamp(24px, 2.3vw, 35px);
}

/* Balanced so the intro never drops a single word onto a line of its own. */
.question-panel > p {
  text-wrap: balance;
}

/* Stacks at 1280px rather than the 980px used elsewhere. Between roughly 980
   and 1280 the middle column cannot hold the claim on one line beside a 170px
   button and an intro column, whatever the type size; stacked, both the intro
   and the claim get the full width and each fits on one line.

   This must also come after the rule above — media queries add no specificity,
   so the three-column grid would otherwise win on phones and crush the heading
   into a 93px column. */
@media (max-width: 1280px) {
  .question-panel { grid-template-columns: 1fr }
}

/* Stacking the panel earlier (above) would otherwise stretch the CTA into a
   ~1100px bar between 600 and 1280px. Full width is right on a phone, not on a
   laptop. */
@media (min-width: 601px) and (max-width: 1280px) {
  .question-panel .button {
    justify-self: start;
    padding: 0 40px;
  }
}

/* Newsletter signup. The generated `.field-row button` (0-1-1) sets colour and
   type; these need the extra `.newsletter` to win. */
.newsletter .field-row button {
  cursor: pointer;
  white-space: nowrap;
  padding-left: 18px;
  transition: opacity .2s;
}

.newsletter .field-row button:hover {
  opacity: .72;
}

.newsletter .field-row button:disabled {
  color: #858585;
  cursor: default;
  opacity: 1;
}

/* Replaces the form on success. Sized to the h2 beside it so the section does
   not visibly shrink when the field is swapped out. */
.newsletter .signup-done {
  color: var(--copper);
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 700;
}

.newsletter .signup-note {
  color: #a8a7a2;
  max-width: 420px;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

.newsletter .signup-error {
  color: #e98a4c;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Technology panel, v3 render.

   The callouts are drawn into the image now, so `.tech-callout` no longer
   appears in the markup — its rules survive above, unused.

   `contain` letterboxes the render inside a panel taller than its aspect
   ratio, so the panel colour is sampled from the render's own background
   (#f2efeb). The original #ecebe6 is close enough to look like a mistake
   rather than a choice, showing a soft rectangle where the two meet. The copy
   column takes the same colour so the section stays one surface. */
.technology,
.technology-image {
  background-color: #f2efeb;
}

.technology-image {
  background-image: url(/images/galt-product-callouts-v3.png);
}

/* Block diagram with its component key beside it rather than beneath. The key
   is a lookup table read against the diagram — eleven numbered callouts — so
   it belongs within eye travel of the thing it labels, not a paragraph away.

   The figure column is capped at the .figure-half width so the diagram does
   not grow just because there is space next to it. */
.figure-aside {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(230px, 1fr);
  align-items: start;
  gap: 38px;
  margin: 34px 0 32px;
}

/* Two classes (0-2-0) to beat `.article-body p` (0-1-1), which sets the body
   colour and 17px size that would otherwise make the key compete with the
   prose instead of reading as caption-weight reference text. */
.figure-aside .figure-key {
  color: #85857f;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

/* Below the 980px breakpoint the key would be squeezed into a column too
   narrow for its longest entry, so it goes back under the diagram. */
@media (max-width: 980px) {
  .figure-aside {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .figure-aside .figure-key {
    max-width: 620px;
  }
}

/* "GALT INDUSTRY" as the wordmark. At 13 characters it is more than twice the
   length of the GALIN it replaced, and the header reserves a 220px column for
   it, so the type comes down to fit beside the navigation.

   The header override is fenced above 980px on purpose: below that the
   original stylesheet switches the header to `1fr auto` for the mobile
   layout, and an unfenced rule here would win on source order and break it. */
.wordmark {
  letter-spacing: .3em;
  font-size: 16px;
}

@media (min-width: 981px) {
  .site-header {
    grid-template-columns: 250px 1fr 160px;
  }
}

@media (max-width: 600px) {
  .wordmark {
    letter-spacing: .22em;
    font-size: 12px;
  }
}

/* The hero art, re-rendered with GALT on the generator. Replacing only the
   image keeps the `50%/cover no-repeat` and the 60% mobile position that the
   original shorthand set. */
.hero {
  background-image: url(/images/hero-galt.jpg);
}

/* Test-report and thoughts indexes. Both reuse the news list; only the
   intro block is new. */
.lab-intro,
.thoughts-intro {
  max-width: 760px;
  margin-bottom: 46px;
}

.lab-intro .lead,
.thoughts-intro .lead {
  color: #2f3030;
  margin-bottom: 18px;
  font-size: 22px;
  line-height: 1.45;
}

/* Two classes (0-2-0) to beat `.article-body p`-style generated rules and the
   bare `p` colour, so the confidentiality line reads as a notice, not prose. */
.lab-intro .lab-notice,
.thoughts-intro .lab-notice {
  border-left: 3px solid var(--copper);
  color: #6a6a66;
  margin: 0;
  padding: 4px 0 4px 16px;
  font-size: 15px;
  line-height: 1.55;
}

.news-body h2 a {
  border-bottom: 1px solid #0000;
  transition: border-color .2s;
}

.news-body h2 a:hover {
  border-bottom-color: var(--copper);
}

/* The call-to-action panel used an <h3>, which made pages with no <h2> jump
   straight from h1 to h3 — a level a screen reader announces as missing. It is
   a top-level section, not a subsection, so it is an <h2> now. This carries
   over the size the generated `.question-panel h3` rule gave it. */
.question-panel h2 {
  margin: 0;
  font-size: clamp(27px, 3vw, 43px);
  line-height: 1.15;
}

/* The performance caveat sat in muted grey, which read as boilerplate. In
   copper it registers as something the reader is meant to take in, which is
   the point: these are targets, not measurements. */
.qualification {
  color: var(--copper);
}

/* Reading measure for article prose, matched to atoms.co/vision, which caps
   its text containers at 912px. Applied to the text elements rather than to
   .article-body so the cap is explicit about what it governs.

   Figures take the same 912px below, up from 900px, so prose and plots share
   one column edge instead of missing each other by twelve pixels.

   Left-aligned, not centred: the page hero above uses a left-aligned 820px
   heading block, and a centred body beneath it would break that edge. */
.article-body p,
.article-body li,
.article-body h2,
.article-body h3,
.article-body .lead {
  max-width: 912px;
}

.article-body img,
.article-body .figure-half,
.article-body .figure-row,
.article-body .figure-aside {
  max-width: 912px;
}

/* The three primitives, as columns rather than a sentence. The copper rules
   between them are the separator; the first column has none so the block
   starts flush with the prose above it. */
.primitives {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 912px;
  margin: 46px 0 42px;
}

.primitive {
  padding: 0 30px;
}

.primitive + .primitive {
  border-left: 2px solid var(--copper);
}

.primitive:first-child {
  padding-left: 0;
}

.primitive:last-child {
  padding-right: 0;
}

/* Symbols are stroked, not filled, and inherit the body ink so they never
   drift from the palette. The impeller triangle is the one filled shape. */
.primitive-symbol svg {
  width: 88px;
  height: 64px;
  margin-bottom: 18px;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.primitive-symbol svg path[d^="M36 24"] {
  fill: var(--copper);
  stroke: var(--copper);
}

.primitive-symbol svg text {
  fill: var(--ink);
  stroke: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

/* Two classes (0-2-0) to beat `.article-body h3` (0-1-1), which sets a
   20px size and margins tuned for running prose. */
.primitives .primitive h3 {
  margin: 0 0 6px;
  font-size: 19px;
}

.primitives .primitive p {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: 16px;
}

@media (max-width: 600px) {
  .primitives {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .primitive,
  .primitive:first-child {
    padding: 0 0 0 18px;
    border-left: 2px solid var(--copper);
  }
}

/* A single line set apart from the prose around it. Centred within the 912px
   reading column rather than the viewport, so it stays part of the text block
   instead of drifting away from the left edge everything else shares.

   Two classes (0-2-0) to beat `.article-body p` (0-1-1), which sets the body
   colour, the measure and a bottom margin tuned for running paragraphs. */
.article-body .statement {
  max-width: 912px;
  margin: 46px 0 48px;
  padding: 38px 28px;
  color: var(--ink);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* Contact page without the dividing rules.

   The grid drew a hairline across its top, each card drew one down its right
   and along its bottom, and the panel below drew one to separate itself from
   the cards. All removed.

   .contact-grid and .contact-card appear on this page alone, so they are
   cleared outright. The panel's top rule is shared with six other pages, so
   it is cleared only inside .contact-page: two classes (0-2-0) against the
   bare .question-panel (0-1-0).

   The cards keep their 34px padding. It was spacing the columns apart from
   each other rather than from the rules, and without it the three addresses
   would run together. */
.contact-grid {
  border-top: 0;
}

.contact-card {
  border-right: 0;
  border-bottom: 0;
}

.contact-page .question-panel {
  border-top: 0;
}

/* Boxed article body: one white card, centred on the page.

   Used by the vision page only. The technology pages keep the full-width
   treatment, since their figures are 912px wide and a card would either crop
   them or make the page very tall.

   `margin: 0 auto` is what centres it; the section's own padding keeps the
   card off the viewport edges on narrow screens. Text inside stays
   left-aligned, because centred running prose is hard to read; only the
   statement line is centred, which is the point of it. */
.article-boxed .article-body {
  background: #fff;
  border: 1px solid var(--line);
  max-width: 912px;
  margin: 0 auto;
  padding: 62px 72px;
}

/* Inside the card the 912px cap is already imposed by the card itself, so
   the text elements simply fill it. */
.article-boxed .article-body p,
.article-boxed .article-body li,
.article-boxed .article-body h2,
.article-boxed .article-body h3,
.article-boxed .article-body .lead,
.article-boxed .article-body .statement,
.article-boxed .article-body .primitives {
  max-width: none;
}

/* The call to action sits below the card, not inside it, so centre it to
   match rather than leaving it hanging at the left edge. */
.article-boxed .question-panel {
  max-width: 912px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .article-boxed .article-body {
    padding: 34px 22px;
  }
}