/* One type scale for the whole homepage. Sizes change only at device breakpoints. */
:root {
  --type-hero: 3rem;
  --type-hero-support: 1.75rem;
  --type-section: 2.25rem;
  --type-card: 1.5rem;
  --type-subtitle: 1.375rem;
  --type-body: 1.125rem;
  --type-label: 1rem;
  --type-action: 1.25rem;
  --type-kicker: .9375rem;
  --type-metric: 2rem;
  --leading-heading: 1.25;
  --leading-body: 1.7;
}
html { font-size: 100%; }
body {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: 0;
}
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: -.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero h1 { font-size: var(--type-hero); line-height: 1.15; letter-spacing: -.035em; }
.hero h1 > strong {
  font-size: var(--type-hero-support);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  margin-top: 20px;
}
h2,
.solutions .section-heading h2,
.nutshell-intro h2,
.sourcing-info-head h2,
.industries-heading h2,
.process-heading h2,
.cta-inner h2 {
  font-size: var(--type-section);
  line-height: var(--leading-heading);
  letter-spacing: -.025em;
  color: var(--red);
  margin-top: 0;
}
h3, h4,
.service-body h3,
.nutshell-grid h3,
.sourcing-stage h3,
.global-supply-copy h3,
.industry-grid h3,
.enquiry-form h3 {
  font-size: var(--type-card);
  line-height: 1.35;
  letter-spacing: -.02em;
}
.section-subtitle,
.sourcing-info-head .section-subtitle,
.global-supply-copy .section-subtitle {
  font-size: var(--type-subtitle);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--blue);
  margin: 12px 0 0;
}
.section-kicker,
.sourcing-info-head > div > .section-kicker,
.global-supply-copy > .section-kicker {
  font-size: var(--type-kicker);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .025em;
  color: var(--blue);
  margin: 0 0 12px;
}
.hero-summary > p,
.hero-summary > p:first-child,
.service-summary,
.service-body li,
.nutshell-grid p,
.sourcing-info-head > span,
.sourcing-stage p,
.global-supply-copy > span,
.process-heading > p,
.stats-grid p,
.enquiry-copy > p:not(.section-kicker) {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: 0;
}
.hero-summary > p:first-child { color: var(--text); }
.service-tagline,
.sourcing-stage b {
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--blue);
}
#engineering .service-summary { color: var(--muted); font-weight: 400; }
.service-body h3 { min-height: 2.7em; }
.service-tagline { min-height: 3.2em; }
.service-summary { min-height: 5.1em; }
.nutshell-grid article > strong,
.nutshell-grid article:first-child > strong,
.stats-grid strong {
  font-size: var(--type-metric);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.nutshell-grid h3 { color: var(--blue); }
.industry-grid h3 { color: #fff; }
#primary-navigation > a,
.primary-button,
.hero .primary-button,
.nav-cta,
.nav-shell > .nav-cta,
.nav-shell > .nav-cta:hover,
.cta-inner .nav-cta,
.cta-inner .enquiry-copy .nav-cta,
.hero-service-labels .service-button,
.service-body > a,
.process-banner > span,
.form-submit,
.draft-actions .text-link {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
.field label,
.draft-label,
.stage-meta > span,
.office-address strong {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
.field input, .field select, .field textarea {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
.field input::placeholder, .field textarea::placeholder { font: inherit; }
.enquiry-draft,
.email-fallback > p,
.form-note,
#copy-status,
.footer-brand p,
.footer-grid > div > a,
.footer-grid .contact-email,
.office-address address,
.testimonial-shell footer small {
  font-size: var(--type-label);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: 0;
}
.footer-grid h3,
.testimonial-shell footer strong {
  font-size: var(--type-label);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}
.footer-grid .contact-email { font-weight: 700; }
.region-list > span { font-size: var(--type-kicker); font-weight: 700; line-height: 1.5; }
.footer-bottom { font-size: .875rem; line-height: 1.6; }
#testimonial-quote { font-size: 1.25rem; line-height: var(--leading-body); letter-spacing: 0; font-weight: 400; }
.section { padding-block: 80px; }
.section-heading, .industries-heading { margin-bottom: 36px; }
.sourcing-info-head { align-items: start; gap: 64px; margin-bottom: 36px; }
.process-heading { align-items: start; gap: 64px; }
.about { padding-bottom: 0; }
.global-supply { padding-block: 64px 80px; }
.sourcing-stage h3 { color: var(--red); }
.hero-service-labels .service-button { min-height: 76px; }
.enquiry-form h3 { margin-bottom: 24px; }
.field { margin-bottom: 20px; }
.service-body li::before { top: .7em; }
@media (max-width: 1199px) {
  :root { --type-hero: 2.75rem; --type-section: 2rem; }
  .section { padding-block: 64px; }
  .about { padding-bottom: 0; }
  .global-supply { padding-block: 48px 64px; }
  .sourcing-info-head, .process-heading { gap: 40px; }
}
@media (max-width: 1100px) {
  .service-body h3, .service-tagline, .service-summary { min-height: 0; }
  .service-image { min-height: 0; }
  .hero-service-labels .service-button { min-height: 60px; }
}
@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; }
  .hero-copy { padding: 48px 28px; }
  .hero-cover { min-height: 450px; height: 450px; }
  .hero-cover > img { object-position: 50% 38%; }
  .hero-service-labels { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero-service-labels .service-button:last-child { grid-column: auto; }
}
@media (max-width: 767px) {
  :root {
    --type-hero: 2.25rem;
    --type-hero-support: 1.5rem;
    --type-section: 1.75rem;
    --type-card: 1.375rem;
    --type-subtitle: 1.25rem;
    --type-body: 1.0625rem;
    --type-metric: 1.75rem;
  }
  .section { padding-block: 48px; }
  .about { padding-bottom: 0; }
  .section-heading, .industries-heading { margin-bottom: 28px; }
  .hero-copy { padding: 36px 20px; }
  .hero-cover { min-height: 420px; height: 420px; }
  .hero-service-labels { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-service-labels .service-button:last-child { grid-column: 1 / -1; }
  .hero-service-labels .service-button { min-height: 56px; }
  .nutshell-layout, .cta-inner, .sourcing-info-head { grid-template-columns: 1fr; }
  .sourcing-info-head, .process-heading { gap: 24px; }
  .global-supply { padding-block: 40px 48px; }
  .sourcing-stage b { min-height: 0; }
  #testimonial-quote { font-size: var(--type-body); }
  .nav-shell { gap: 10px; }
  .nav-shell > .nav-cta { min-height: 44px; padding-inline: 12px; }
  .brand, .brand img { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Brand red needs large bold text for readable white button labels. */
.hero .primary-button,
.cta-inner .enquiry-copy .nav-cta,
.hero-service-labels .service-button,
.form-submit { font-size: var(--type-action); font-weight: 700; }
@media(max-width:767px) { .menu-toggle { width:44px; height:44px; } }
@media(max-width:375px) {
  .brand,.brand img { width:100px; }
  .nav-shell { gap:8px; }
  .nav-shell > .nav-cta { padding-inline:10px; }
}
/* Keep trust credentials and long actions inside narrow mobile columns. */
.hero .primary-button, .cta-inner .enquiry-copy .nav-cta { max-width:100%; text-align:center; }
@media(max-width:767px) {
  .nutshell-grid { grid-template-columns:1fr; }
  .nutshell-grid article { display:flex; flex-direction:column; gap:12px; min-width:0; }
}
@media(max-width:900px) {
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px; }
  .stats-grid article { padding:12px 20px; }
  .stats-grid article:nth-child(odd) { padding-left:0; border-right:1px solid #ffffff30; }
  .stats-grid article:nth-child(even) { padding-right:0; border-right:0; }
}
@media(max-width:767px) {
  .nutshell-grid article > strong { width:auto; max-width:100%; }
}
@media(max-width:375px) { :root { --type-metric:1.5rem; } }
/* Keep small text legible while using the exact logo colours as accents. */
#primary-navigation > a { text-decoration:none; text-underline-offset:8px; text-decoration-thickness:2px; }
#primary-navigation > a.active,
#primary-navigation > a:hover { color:var(--blue); text-decoration:underline; text-decoration-color:var(--red); }
.nav-shell > .nav-cta:hover { background:var(--blue); color:#fff; text-decoration:underline; text-underline-offset:4px; }
.footer-grid > div > a:hover,
.footer-grid .contact-email,
.process-banner > span,
.field label > span { color:var(--blue); }
.footer-grid > div > a:hover { text-decoration:underline; text-underline-offset:4px; }
.process-viewport:focus-visible { outline:3px solid var(--blue); outline-offset:-4px; }
.stage-meta > span { color:var(--blue); }

/* Component photography and the expanded, readable primary navigation. */
.nav-shell { gap:20px; }
#primary-navigation { gap:18px; }
.service-card { scroll-margin-top:0; }
.sourcing-parts-grid {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:3px;
  background:var(--surface);
}
.sourcing-parts-grid figure { min-width:0; min-height:0; overflow:hidden; }
.service-image, .sourcing-parts-grid figure { position:relative; }
.service-image > img, .sourcing-parts-grid figure img { position:absolute; inset:0; }
.sourcing-parts-grid figure:first-child { grid-row:1 / -1; }
.sourcing-parts-grid figure img { width:100%; height:100%; object-fit:cover; }
#sourcing .sourcing-parts-grid figure:last-child img { object-fit:contain; object-position:center; padding:6px; background:#fff; }
#engineering .service-image img { object-position:50% 45%; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.portfolio-card { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.portfolio-image { aspect-ratio:4 / 3; overflow:hidden; background:#fff; }
.portfolio-image img { width:100%; height:100%; object-fit:cover; }
.portfolio-card:nth-child(2) img { object-fit:contain; padding:18px; }
.portfolio-card h3 { padding:24px; color:var(--blue); }
.portfolio-photo-credit { margin-top:24px; font-size:var(--type-label); line-height:var(--leading-body); color:var(--muted); }
.portfolio-photo-credit a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
@media (min-width:1101px) and (max-width:1300px) {
  #primary-navigation { gap:15px; }
  .nav-shell { gap:18px; }
}
@media (max-width:1240px) {
  .menu-toggle { display:block; order:4; margin-left:0; flex-shrink:0; }
  .nav-shell { min-height:94px; }
  .nav-shell > .nav-cta { margin-left:auto; }
  #primary-navigation { display:none; position:absolute; top:100%; left:0; right:0; margin:0; padding:12px 28px 24px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 12px 25px #00168810; max-height:calc(100dvh - 94px); overflow-y:auto; }
  #primary-navigation.open { display:grid; grid-template-columns:1fr 1fr; gap:0 30px; }
  #primary-navigation > a { padding:13px 0; }
}
@media (min-width:768px) and (max-width:1100px) {
  .sourcing-parts-grid { grid-template-columns:1fr; grid-template-rows:1fr 1fr 1fr; }
  .sourcing-parts-grid figure:first-child { grid-row:auto; }
}
@media (max-width:767px) {
  .nav-shell { min-height:85px; gap:10px; }
  #primary-navigation { padding-inline:20px; max-height:calc(100dvh - 85px); }
  #primary-navigation.open { grid-template-columns:1fr; }
  #primary-navigation > a { padding-block:12px; }
  .service-card { display:flex; flex-direction:column; }
  .service-image { height:235px; min-height:0; }
  .portfolio-grid { grid-template-columns:1fr; gap:24px; }
  .portfolio-card h3 { padding:20px; }
}
@media (max-width:375px) {
  .nav-shell { gap:8px; }
  .nav-shell > .nav-cta { padding-inline:8px; }
}